How To: Alternating Your Post Background Colors

Comments Off on How To: Alternating Your Post Background Colors

One thing I’ve always loved to do is set up my blogs comments to display alternating background colors (although ironically I have not done so for this site yet). I’ve always felt that this helps give the comments a little more separation from each other and improve the overall look of the blog.

Because WordPress is full of loops (homepage, category, tag, etc.), this same theory can truly be applied all over your blog. David of CyberCoder posted yesterday a great hack to alternate the background of your blog posts. Here are the steps you need to take:

Create a loop counter. Right before the Loop begins set a variable to zero.

<?php
$x=0;
if (have_posts()) : ?>

At this point I would want the Background Color to change, insert code to test for an even number post, and if this is true, add an inline CSS style for the background that would override the stylesheet.

<?php if ($odd = $x%2){?>
<div style=”background-color:#404040;padding:10px 0px 10px 10px;”>
<?php }?>

Then, where the background color should return to the original state, run the same test for the even numbered post and close the div tag set by the Inline Style.

<?php if( $odd = $x%2 ){?>
</div>
<?php }?>

The final step is to add 1 to the counter for each post, which is done at the end of the loop.

<?php
$x++;
endwhile; ?>

Thanks for sharing this trick David!

  • Leave a Comment
  • How To: Creating a Robots.txt for a WordPress Blog

    For those of you unfamiliar with Robots.txt, it is a file that webmasters use to help control what aspects of their websites are indexed by search engines and what parts are not to be indexed. This is a great way to give you full control of how they view your website and help avoid duplicate content penalities, but using a Robots.txt has to be done properly and responsibly in order to avoid making matters worse or accidentally preventing your website from being indexed all together!

    There are a lot of posts out there that talk about a Robots.txt file, how to set one up, etc. Unfortunately, many of these posts don’t apply specifically to WordPress and can often get confusing when you are trying to implement one for your website. Others tend to leave out a lot of important information that most people should have prior to attempting to add a Robots.txt file to their blog’s root directory.

    Ask Apache is offering a Robots.txt file and updated Robots.txt file that you can download and use for your blog. You’ll of course want to customize it to meet your needs, including adding any directories that you have created since installing the base WordPress install that you don’t want them to be indexed.

    I recommend you bookmark these posts if you plan to tackle adding a Robots.txt to your blog at some point in the future. Both posts provide a lot of valuable information and, as mentioned above, includes actual templates you can use for your website.

  • Leave a Comment
  • How To: Hiding Your Sub-Categories in WordPress

    I recently got an e-mail from a reader wanting to know how to hide their sub-categories in WordPress. If you use WordPress 2.1 or newer, this is actually really easy to do.

    All you need to do is open your stylesheet and add the following anywhere:

    .children {
    display:none;
    }

    You can also style the children accordingly this way if you’d like!

  • Leave a Comment
  • How To: Creating Sidebar Tabs In Your WordPress Theme

    As blogging continues to evolve and WordPress themes continue to become more functional, it is my belief that we will start to see more themes using tabs to help manage sidebar content. The problem with sidebar tabs is that they require Javascript to use, so very few themes seem to be using them.

    I won’t claim to be a whiz with javascript, but I found that creating tabs was not overly difficult. I’ve recently switched a section of my sidebar over to tabs to help manage my sidebar content. So far I am very happy with the results. It allows me to provide readers with a bunch of different site navigation options while not really taking up any extra room, so people that want it can use and it isn’t in the way for people that don’t want to browse archives or see my top commentators.

    If you are interested in doing something similar for your weblog, Headset Options wrote a series of posts studying the anatomy of a Magazine WordPress theme. The second post is actually dedicated to covering some types of javascript and focuses on Domtab and Tabber. You’ll find a nice examination and then a tutorial of how to add this to your WordPress blog. If you aren’t familiar with either type of javascript, I recommend you start with Tabber, as it is quite a bit easier to work with in my opinion.

    What is your opinion of sidebar tabs? Do you find it more convenient or does it make the content harder to find?

  • Leave a Comment
  • WordPress Hack: Using WordPress Conditional Tags

    Have you ever noticed how some pages on blogs behave different than on other pages? One of the most under-utilised features of WordPress is the wide variety of conditional tags available in WordPress. Through the use of conditional tags, you can instruct certain plugins, pictures, or code to only appear on designated pages.

    Recently I ran across a post by the Undersigned explaining Conditional Tags in WordPress, which appears was written in 2006 but is still valid with current versions of WordPress.

    Here is a list of the conditional tags available:

    • is_home()
    • is_single()
    • is_page()
    • is_category()
    • is_author()
    • is_date()
    • is_year()
    • is_month()
    • is_day()
    • is_time()
    • is_archive()
    • is_search()
    • is_paged()
    • is_404()

    One of my favorite places to use conditional tags is in the post meta area. For example, on most pages I want the comments button to display, but I don’t need it to appear on the single page because the comments are displayed on that page. At the same time, I like having an edit button on the single page, but I don’t need it on any other pages.

    Here is the code I use for the above example on one of my sites:

    <?php if (is_single()){ ?> <?php edit_post_link(__("*Edit*"), ''); ?> <?php } else { ?> | <?php comments_popup_link('0 comments', '1 comment', '% comments'); ?> <?php } ?>

    The bold code is the conditional tags I’ve set up.  You can see from the above code that I am telling WordPress to only display an Edit button on single pages, and on all other pages display the comments link.

    What other good uses have you found for conditional tags?

  • Leave a Comment
  • How To: Add Bio Info To Your WordPress Blog Posts

    Ever wanted that ability to show your bio information within your WordPress profile at the bottom of every post? For single user blogs, this might not be practical. But for multi-authored blogs, adding the bio info of each author at the bottom of their respective posts is a good way to give props to the author as well as providing information to the readers as to who that person is without having to refer to an about me page. The good news is that, you don’t need to install a plugin to have this functionality.

    BioInfo

    Inside of a user profile is this nifty little box where you can place information about yourself. As you can see, I have already placed some info into the box for reference later on in the tutorial. We are going to take the information in this box and display it at the bottom of every post that is under my name.

    The template tag we are going to focus on is <?php the_author_description(); ?> This tag doesn’t accept any parameters, so don’t bother trying to do anything funky with this tag. Now, head to your templates Style sheet and add this to it:

    .postauthor { }

    This will give us the opportunity to style the postauthor bit when it’s published in the post. Now that we have the template tag in order, we will need to place it within the loop.

    I’m not going to delve into the specifics of the loop, but in general, it deals with the information related to posts. Browse to your themes index.php file and look for something like this:

    < ?php the_content('Read the rest of this entry »'); ?>

    That is what it looks like in my theme, it may look different in yours, but this is the function that displays the content of the post. Underneath of this content function is where you would want to place the following code:

    < div class="postauthor ">< ?php the_author_description(); ? >< /div>

    Please keep in mind that if the code does not work, it is most likely due to the spaces which I had to add in order for the code to properly appear within this post. Simply remove the spaces, and the code should be just fine.

    Now that you have the author description function in place, this is what it might look like on your blog:

    WhatItMightLookLike

    If you ask me, this looks bland and boring. We need to fix that by editing the div class called Postauthor within the CSS file and give that Div class a nice look. You can style it to match your blog design, but for the sake of this tutorial, I’ll display the CSS code which makes it appear like the TAG div container shown below the Post Author.

    .postauthor {
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    background: #EAEAEA;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    width: 640px;
    padding: 3px;
    margin-bottom:5px;
    }

    This CSS style code turns that small black text into something like this:

    AllDone

  • Leave a Comment
  • How To: Displaying Content Only For The Admin To See

    Roughly four months ago I talked a bit about how to set up your blog so only the admin can see an edit button on blog posts. For whatever reason, I’ve always set this up on each of my websites and really get a lot of use out of it. Much along those same lines, Michael of WPCandy has written a post explaining how to display content so only the admin can view it. This goes well beyond the edit button and allows you to setup just about anything to display for the admin.

    In hist post, Michael provides some code that looks at the user id to determine if the user has admin privileges and then displays whatever you tell it to for that user. Here is the code:

    <?php global $user_ID; if( $user_ID ) : ?>
    <?php if( current_user_can('level_10') ) : ?>
    <a href="http://yourdomainurl.com/stats/">Stats</a>
    <?php else : ?>

    <?php endif; ?>
    <?php endif; ?>

    If you run a multi-author blog and would like to make this stuff available to editors, authors, contributors, and more, you can easily adjust the user level to determine who sees your display.

    Great find Michael!

  • Leave a Comment
  • How To: Display the Recent Posts of Specific Categories

    Most WordPress themes, by default, come with Recent Posts displayed automatically. Depending on the type of blog you run, it is possible that you would prefer to display Recent Posts per category. If this is the case, here is what you need to do to only display recent posts for specific categories.

    First, you’ll want to find your Recent Posts code, which is usually found in the sidebar. It will look something like this:

    <h2>Recent Posts</h2>
    <ul>
    <?php get_archives('postbypost', 10); ?>
    </ul>

    As always, make sure you have a backup of the file in question before making any changes. You’ll then want to replace the above code with the following code:

    <ul>
    <?php $recent = new WP_Query("cat=1&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark">
    <?php the_title(); ?>
    </a></li>
    <?php endwhile; ?>
    </ul>

    Where is says cat=1, you’ll want to insert the number assigned to the category that you want to display the posts from. You can find this from your Manage -> Categories page. You can also adjust the number of posts to be displayed where it says showposts=10.

    This could be useful to someone who wants to display the most recent few posts from a few different categories in their sidebar.

    [via ReadyWPThemes]

  • Leave a Comment
  • Tips For Highlighting Author Comments in WordPress

    In the past we’ve gone over some methods for setting up your theme to separate your author comments in WordPress. By default, most WordPress themes check the e-mail address to determine who the person is that is leaving the comment. By adjusting the code to check for the user id instead, you can set up your theme to recognize if you are the author of the post. This is also beneficial for blogs with multiple authors.

    In addition to separating trackbacks from comments, this is another way you can easily help improve the readers experience when trying to follow a conversation in the comments. Most people use a different background, but some choose to instead display a logo. The important thing is that readers can recognize which comments are coming from the author of the post.

    Today I noticed Matt Cutts has written his own tutorial explaining how to highlight author comments in WordPress. His post also includes the code needed for CSS styling. If you still haven’t gotten around to doing this on your theme yet, I recommend you check it out!

  • Leave a Comment
  • How To: Display WordPress Categories in a Horizontal Drop-Down Menu

    One thing more WordPress bloggers have been doing lately is moving their categories over to a horizontal menu, rather than displaying them in the sidebar. Depending on the type of blog you run and how well you keep your categories organized, I think this can be a great idea to help manage the website and improve overall navigation. Doing something like this allows for a much better use of sub-categories, and gives you the option of displaying them in a drop-down to give your blog a much more professional feeling.

    If you are interested in moving your WordPress categories into a menu and then displaying sub-categories in a drop-down menu, Anthology of Ideas has taken the time to write a detailed post explaining how to display WordPress categories in a horizontal drop-down menu. You can also view their menu to see if you like it. I recommend you check it out before attempting this on your own.

    Of course doing this will require the use of Javascript, but the author does a great job of detailing the process and provides the CSS required to style it properly. Once you have everything up and running correctly, you can then adjust the colors and margins to give your new menu the look and feel you want it to have, as well as fully integrate it into your WordPress theme.

    I like the idea of having the sub-categories be drop-down menus, but one downside I see is that displaying categories in a menu sort of eliminates using a traditional menu for your pages. It would be hard, in my opinion, to achieve a good look with more than one menu, so you then have to find a different way to display your blog pages. I think you are probably best off using this method mostly if you are trying to achieve a magazine-style look or some sort of a content management system (CMS).

    What do you think of moving your categories to a menu and displaying your sub-categories in drop-down boxes?

  • Leave a Comment