It's often very useful to have alternating classes in for styling purposes. Let's say you want every other row to be a darker shading, this is very common and I'll show you how to implement this in WordPress using a simple bit of code.
For my example here I will show you how to create alternating classes for use with the WordPress loop. This way, when the loop pulls your posts from the db every post container will have a separate class name up to as many as we define in our array. This method of alternating classes in WordPress will work for wherever you have a loop. Therefore, your comments, categories, tags, etc. can all be styled up using this method. Pretty cool huh? Let's see how this is done.
First Define the Class Array
The bit of code below should NOT be inside your WordPress loop, rather right before it.
<?php
// let's setup some classes first for us to style
$style_classes = array('dloccBox1','dloccBox2','dloccBox3');
$style_index = 0;
?>
Next Echo the Classes
Now that we have our array setup it's time to output the class names into the loop
<?php query_posts('category_name=portfolio&order=asc&nopaging=true'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="<?php $k = $style_index%3; echo "$style_classes[$k]"; $style_index++ ?>">
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
On the third line notice how we are using this bit of code to output a class name and then cycle to the next item in the array? Now you are free to style as you wish! Of course, make sure you test with Firebug that the classes are outputting as you want. Let me know if you have any question by commenting below!
Related posts:
- WordPress Heirarchical Sidebar Page Menus Let's say you want to show a hierarchical sidebar menu that displays a listing of current subpages. This is easy enough, but let's say that you have a top menu that shows all top-level pages. Once you click on a top level page from that menu it will take you there and in the sidebar [...]...
- Link separators for wp_list_pages() code snippet WordPress makes it very easy to dynamically create menus from pages and categories with the use of the function wp_list_pages() and wp_list_cats()... but what if you want to have separators in your menus? Here's a bit of code that will do just that: wp_list_pages Separators Please note: I got this code from Rares Comes (very [...]...
- WordPress List Subpages Even if On Subpage I'm building a new site and the navigation on it requires me to use a different bit of code for parent and child pages. I thought I'd share the code for those out there building a similar navigation. Here's a handy bit of code that you can use to display all subpages on a subpage. [...]...
- WordPress: If URL is Homepage then do this… Question: In WordPress how to I make sure the page loaded is the homepage URL and display some data if the standard WordPress Conditional Tags are not working for my theme?! Answer: Here's a quick snippet of code that will give you an option to do something if these WordPress basic conditional tags are not [...]...
- WordPress Loop: If Parent or Child of Page or Category The WordPress loop is extremely useful when developing customized WordPress solutions. One bit of code I've had to use often is one that will display a set of code if the page or post is a parent of child of a certain category. This is an easy way to display, output, or show data on [...]...
DLOCC Socials