[/php]

The first thing we did was enclose both sets of code in their own css classes, allowing the posts to appear in two columns, rather than crammed together. As you can see in line 1, we start with a opening div class tag calling for “cusleft”. The tag is closed on line 10, before an opening tag for div class “cusright” is opened for the next column of posts.

Let’s take a closer look at lines 2-9, which contain the php code for displaying posts.

[php]have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

[/php]

The php code starts off by stating that you’re starting a new WordPress query, then goes in to ask for category name and showposts. In our case, the category name we wanted to pull articles on the left for was called “articles”. We wanted to pull only one post, so our showposts number was one. Let’s say you had a category called “reviews”, and you wanted to show the last 10 posts from that category. Your php code would look like this:

[php]have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

[/php]

Notice that the category name has been changed to “reviews”, and the showposts number has been increased from 1 to 10. The function continues, this time saying to itself, do not repeat the post (which eliminates the post showing more than once.) The next part of code determines how the post will be displayed. Let’s say you wanted the title to link to the full post content, and you wanted to display the whole post content. The code would look like this:

[php]

[/php]

Notice how we changed “php the_excerpt to php the_content. By wrapping the code in a div, we tell it to output each post the same way. In this way, you can define style elements to be applied to each post being displayed.

Customizing WordPress: Headers

WordPress Customization Series Introduction

Over the next few weeks, Devlounge will chronicle all customization elements of wordpress, from headers, to layout, and even what plugins you need to have. By the end of the series, you’ll be on your way to using harvesting all of the power of WordPress, to do much more than a blog.

It All Gets Started:

Sometimes, headers become lost as an way of customization for wordpress. But in many ways, your wordpress header can be the kickstarter of your blog, in both terms of search placement, and display for every wordpress based page.

Understand It’s Purpose – Header.php

The WordPress Header is, by default, generated dynamically, with such things as the blog title and description, theme name, author, and stylesheet url. Usually, you’d prefer to keep these settings untouched, as it ensures that stylesheets will work correctly with your blog, and everything will flow right. But, in order for your blog to stand out, small tweaks to the header can make all the difference.

Output Better Titles

By default, WordPress outputs titles as “blog name – description – page/post title”. While in most cases this would be fine, there comes a time when you may want to change the page title to your own. Maybe you want all pages to have just the site name, or, you’d like to remove the description tagline. These edits are extremely easy to make, but first timers who know basic html become nervous when they see php being used to generate the title tag.

Wordpress Title Tag

Looking at the php tags for the first time, you’ll find it’s easy to see the meanings behind them. In the WordPress Default’s theme header.php, you’ll come across the title tags being filed with the tags from the screenshot above. So, what does it all mean? In between the title tags is php code calling for information from the WordPress Options, Options tab, where you specify the blog name and description. The next few php requests check to see if the page is a single page or part of the archives, and then assigns them with the corresponding name, usually “blog name – page or post title”.

So, how do you get around this? Start off by deleting everything between the title tages, so only the opening and closing tags remain. Next, you can enter the page title as you wish, for example, My Site. If you plan to include what page you’re on, you may want to include a space after your title, followed by a hyphen, space, and then the approriate php code. In this case you’d take all of the php code after the php tag containing “blog info” is closed.

You’ll now have a title that’s been customized, and doesn’t rely on the WordPress Options to generate it. This gives you the ability to include your own slogan, and not include page and post titles at all if you’d like to keep them out.

Adding Style to Your Sheets

Another benefit of editing the header is the ability to assign alternative style sheets, such as custom stylesheets for Printing, which normal wordpress headers would not have. Adding an alternative style sheet is easy, and it only requires one line of code, pointing to the location of your print style.
[html]Hello <php code>[/html]

Setup A Common Header

Since all theme files call for both the header and the footer (Index, Page, Single, Archives, Etc), the header is a great place to setup parts of your design which will repeat on every page, for example, a graphical banner and navigation. In the WordPress Default Theme, there are some quick stylesheet classes and allow for easy changing of elements such as a header background color and image. The actual page design begins after the stylesheet ends, following the body. Underneath the opening body tag, you can begin adding elements that you’ll want to be located on every single page.
[html]

[/html]

Meta Your Blog

Another thing WordPress leaves out which is essential to earning blog popularity is metadata, such as keywords, descriptions, etc. These can be easily added, by adding just a few lines of code and filling in your best choice of keywords and site description. This will greatly increase your rank of search engines, and benefit your blog in the long run.
[html]
[/html]

Up Next

Next week, we break down early layout techniques, and get you started with turning your blog into your own. Over the next few weeks, I’ll also be bringing you Advanced Layouting, Customizing the Sidebar, Making the Footer leave a better print, and Plugins you need to have.