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

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

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...

Recent comments