Devlounge

Design, Develop, and Grow

CSS Layout Techniques

By

Not everyone is busy daily with CSS, which makes it understandable you don’t know CSS layout structure and code by memory. It’s good to have some good sources providing ready basic code to get started on a new website. The pro of using these layout is that they are already tested and bug free. [Read more…]

Customizing WordPress: Advanced

By

On a day where more of the focus is on 9Rules, we’re back to finish the layouting elements of our WordPress Customization series.

In our last few articles, we’ve covered the importance of the WordPress Header file, and beginning layout changes, which were mostly minor code edits to accomplish certain things. Now we get to the heart of WordPress – taking advantage of it’s features to use it as much more than a blog.

Here We Go Again

Most beginners accept WordPress as what it is – a simple way for them to get their own ideas and opinions out by posting blog entries. Then there are the designers or more code-knowledgeable people who take WordPress to the next step, by adding there own graphics and customizing design elements in css files. Finally, there are those who understand everything wordpress is capable of, and they take advantage of all those features.

Multiple Post Queries

One great feature of WordPress is it’s ability to run multiple post queries. So, what does that mean in English? First, you must understand that WordPress knows what it’s doing by using a function called “The Loop“. The loop is how everything is done in WordPress, and it is used over and over again (hence, the loop ;)).

The loop decides how each post will be displayed, and what parameters go into certain functions. So what exactly is multiple queries? By default, WordPress themes tend to have a standard loop on their main index, which gathers all posts from every categories, and displays a certain amount as set in the options page. Sometimes by making small changes like indicated last week, the posts can be full or excerpts. Multiple queries allow you to layout posts from different categories in different areas of the site. For example, a three column layout with posts from one specific category in each.

In our case, we use multiple queries to display posts from our “Articles” and “Interviews” categories in their own columns, spacing them out from regular site news so they are more easily recognizable.

Devlounge - Multiple Post Queries Example

Let’s take a look at our code to see how we did this:

[php]

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

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

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

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge