Home Tutorials WP Theme Lesson #12: Post Formatting and Miscellaneous

WP Theme Lesson #12: Post Formatting and Miscellaneous



Updated on


Follow this WordPress Theme Tutorial Series from the beginning.

You don’t need index.php today. Open Xampp Controltheme folderFirefoxInternet Explorer, and style.css.

Before we start, forget yesterday’s screenshot that I showed you. I had the widget plugin turned on while taking the screenshot, which explains why my sidebar looked different from yours. Also, in the style.css file, change all Sans-serif to Sans-serif. My mistake again, I tend to add an extra ‘F’ to Sans-serif.

Step 1

Get rid of most margins and paddings by typing the following codes above the body{}in style.css:

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;

  • Notice that it’s margin: 0; instead of margin: 0 0 0 0;. When all your values are the same, use one number. Same goes for padding.
  • Save your file. Refresh Firefox and Internet Explorer. Don’t worry, now you’ll add in the margins and paddings where you actually want them to appear, and not where the browsers want them by default.

By the way, I’m telling you to put this and that under or above this or that, but know that it’s optional. You can type/place your codes anywhere. The way I’m doing it is how I organize.

Step 2

Style H1 title, type this under the body{}:

font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;

  • font-family: Georgia, Sans-seriff; changes the H1 title front from Arial to Georgia. Without Georgia, the web page looks for Sans-serif;
  • font-size: 24px; is self-explanatory. However, notice that when you set the font size to 12px within body{}, the H1 and H2 tags didn’t follow that rule. That’s because heading tags follow their own rules. To control them, you need to style specifically for them.
  • padding: 0 0 10px 0; means 10-pixel bottom padding. It’s for adding space between your blog’s title and description.

Save, refresh, and here’s the result:


Step 3

Type the following codes under #container{}: (Save and refresh after each block of codes to see what the changes are.)

padding: 10px 0 10px 0;

(You added 10-pixel top and bottom paddings to each DIV with a class named, post.)

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;

(.post h2 is not a general rule. It specifically targets the H2 sub-headings within the post DIV. The H2 sub-headings in the Sidebar aren’t affected.)

line-height: 18px;

(Increased the size of the space between each line within the entry DIV.)

Step 4

Type the following codes under a:hover{}:

padding: 10px 0 0 0;

(10-pixel top padding to each paragraph tag.)

Step 5

Type under .entry{}:

border-top: 1px solid #ccc;
margin: 10px 0 0 0;

Remember the pargraph tag that you gave a class named, postmetadata, to? Styling a specific paragraph tag and styling DIV are very much the same. You can apply border, margin, padding, and background to both.

For the postmetadata paragraph tag, you added a gray border and a 10-pixel top margin to it.

border-top means top border only. border-left means left border only. Etc. border, alone, without -top-right-bottom, or -left means all borders. For example, border: 1px solid #ccc; means all four sides have a gray 1px border.

Step 6

Type under p.postmetadata{}:

padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;

For the navigation DIV wrapping the Next page and Previous page links, you just:

  • added a 10-pixel top padding
  • change its font size to 14px
  • change its font-weight to bold.
  • increased its line-height to 18px.

That’s the end of today’s lesson.


Please enter your comment!
Please enter your name here

Recent posts

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Domain Name Generation Tips for Business in the Teen Niche

Choosing a domain name is important for every business; how much more when you want to choose a name for a niche site like...

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Recent comments