Part 1 – Add HTML Structures to The Content
Welcome to the very first lesson in the Using WordPress Intermediate Tutorial Series. This tutorial series is divided up into a number of sections and this lesson is part of the Customizing WordPress Content with HTML and CSS section of that series.
The goal of this tutorial series is to show you how to use the advanced features of WordPress through HTML, CSS and PHP. In this lesson we will learn how to stylize a block of text in the content area by applying CSS to that block of text. We’ll start off by adding HTML to those blocks of text in our content, then we’ll add styling to that HTML, and finally we’ll add some features to the text blocks the form of headings and links.
We’ll begin by adding HTML to our text. I’m going to go to the website I created for the purpose of demonstrating this atwww.intermediatewordpress.byobtutorial.com, then log in and open the page in question. I’ll right click over here and open the link in a new tab and we’ll come over here to Demo 1 page. This is the page that we’ll be styling and we’re going to style this block of text as .info, this block as .note, this block as .important, and finally this block as .warning.
Let’s open up that page, How to Stylize a Block of Text in WordPress, and this is the content area with the text we are going to edit. I’ll scroll up a bit and drag this content box open a bit more so we can see all of the text and I’m going to switch over to the HTML view.
This is very basic HTML and CSS. The concepts that we’ll explore today can also be used any place else on your website. They don’t just apply to the content area, it could apply to widget areas, or the header, or the footer. What the content in WordPress refers to is this – whatever text is edited and added inside this window. You’re on the Edit page screen and this is your content. So this is the section that we will be adding the custom styles.
You can see that I already have a little bit of custom styling here because I’ve got this code tag wrapping the .info, there with a code again. If you switch to the Visual editor you can see that the text has changed in appearance and you can even see that in Thesis it gives it a little gray background color too.
Wrap the Text in div Tags
Anyway, back to our HTML page. We are going to take this block of text right here and wrap it in a div tag; we are going to apply a class to that div tag and then write the CSS styles for that class. So what HTML are we going to be using? We are going to be using the div tag and the class name element of that div tag.
Then for CSS ultimately we will be using the background property, the border property, the color property, the padding property, the margin property, the text property, the font property, and the link property. We’re going to look at a lot of different properties of these different elements in CSS.
Add Class Names to the div Tags
Let’s add these div tags. We’re going to come over here at the beginning of our block of text, type the less-than sign, and we’re going to say div and then class=” and we’re going to use the class of info, .info” then the greater-than symbol. Now this is our opening div tag, we’ve got a div and then we’ve assigned this class attribute to the div. Now we’re going to come here and enter our closing div tag which is again the less-than sign with a slash, and div, and a greater-than sign.
This is your standard HTML syntax for opening and closing tags. This opening div tag would work just as well without a class name and in that case we would have just segregated this block of text off from the other blocks of text but it wouldn’t have any special class definition. We’re going to go ahead and put that class name back into there.
Let’s go ahead and do the same thing for the note block – div, class=”.note”, greater-than symbol and then the less-than symbol, slash, div, greater-than symbol, and we’re going to go ahead and do the same thing with important and finally we’ll add the class for warning.
Now we have added all of the HTML structure to this block of text. We’ll update this page and then come back over and look at it and refresh it. You can see that what has happened is the spacing between these paragraphs has gone away but otherwise nothing has changed. Because we wrapped these in div tags it’s no longer just a standard paragraph and so it lost this bottom margin element that exists with the standard paragraph tag in Thesis.
That wraps up Part 1 of this lesson on stylizing a block of text in the WordPress content with CSS.