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

10 Ways To Speed Up Post-Building Process With WordPress Gutenberg Themes

There’s no need to explain why I decided to start with Gutenberg-supporting products. All in all, Gutenberg is a well-known and long-awaited product. It is more...

HostPapa Linux Hosting: Reliable, robust and fast

As a small business owner, it can be challenging to find the right hosting provider for your website. HostPapa distinguishes itself from other web...

Are You Making These Costly Mistakes When Outsourcing?

In today’s world, it is almost impossible to find a small business where everything about the business process is done in-house. For most small...

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

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

Recent comments