WordPress Hack: Creating a Two-Tiered Navigation Menu

If you’ve been following the recent trends with premium WordPress themes, you’ve probably noticed that the two-tiered navigation menu has become extremely popular. An example of this is the popular Revolution WordPress themes. This style of menu can be used in a variety of ways, but the most common seems to be to display your children pages in a menu below your blog’s parent pages.

If you’ve wondered how to hack your existing WordPress theme to accomplish something along these lines, Darren Hoyt has taken the time to explain this in his post Creating Two-Tiered Conditional Navigation in WordPress. Here is the PHP you’ll need:

<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

Once you’ve got the code in place, you’ll want to style it to look the way you want it to.

  • Leave a Comment
  • How To: Using a Custom Page as Your Homepage

    Comments Off on How To: Using a Custom Page as Your Homepage

    Most WordPress blog themes come with a standard homepage that displays a designated number of posts (which you control from your dashboard), but not everyone wants to use their recent posts as their blogs homepage.   If you’ve ever wanted to display something different on your homepage, Blogging Experiment has put together a very detailed post explaining how to use a custom page as your blogs homepage.

    The best part is that there isn’t any hacking or code changes involved.  You can do everything from the dashboard!

  • Leave a Comment
  • How To: Prevent Google From Indexing Your Images

    For most of us, traffic is the driving force behind our blogs and motivation to blog. Therefore, it may seem silly to think that you would want to prevent a lot of potential traffic from Google’s image search.

    However, some bloggers like to post personal pictures, or custom make their pictures and don’t want others to take them when possible. If you fit into this category, you can easily prevent Google from indexing your pictures by placing the following code into your blog’s header file above the < /head > tag:

    <meta name="robots" content="noimageindex">

    If your site has a problem with people taking your content (including the pictures), then there is a chance Google will still index them when they index that person’s website. Another route you can take is to place images into a folder then add a disallow to your Robots.txt file. For WordPress users, this is fairly easy as by default, we already have pictures in either our Images folder of our theme, or the uploads folder (unless you’ve assigned a custom path for your images). You can add something like the following to your Robots.txt file:

    User-agent: *
    Disallow: /images/

    or

    User-agent: *
    Disallow: /uploads/

  • Leave a Comment
  • 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: 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
  • 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