This article will deal with how to hide certain categories and subcategories from displaying in your navigation menus. We have covered a couple of different ways to display WordPress categories and subcategories, but sometimes excluding some links can help to present even cleaner navigational menus.


Why do we need this ?
There are many different reasons that we may not want to display all of our categories all the time. For this article we are going to look at the “Photography Category” (link opens in new window) on this blog.

I wanted the photographs grouped upon the type of image, for example flowers, the ocean, sunsets, and the like through the use of subcategories. While that was going to be the main focus of this category, I also wanted the ability to create smaller photo albums based upon WHERE the picture was taken. Only about 30% of the photos would actually be placed in a geographic location sub-subcategory. I wanted this additional sorting ability so that I could write posts about the travel destinations portrayed in the photos and insert these photo albums into the posts.

See this graphical display:





The problem I ran into when I set this up is that all of the sub-subcategories under the geographic locations subcategory were displaying in the navigation menu on the parent category and subcategory pages. Obviously this was not needed. This was going to create crowded and messy navigation menus on down the line. I wanted to exclude the sub-subcategories from all displays except for inside the actual “Geographic Locations” subcategory.


How To Accomplish This
You might want to quickly read the article “How To Display Subcategories” to familiarize yourself with the “list categories” template tag that we are using to display the subcategory navigation menus.

The original template tag looked like this:

<?php wp_list_categories(’child_of=5&style=list&title_li=’); ?>

When you visit the “Photography Category” that template tag displays the navigation menu of subcategories. The menu appears on the page directly below the page header image.

The following changes were made:

<?php wp_list_categories(’child_of=5&depth=1&exclude=111&style=list&title_li=’); ?>

You will obviously need to change the number values above to match the category ID numbers of your specific blog, but the above tag can be broken down as follows:

• Child_of=. This parameter tells WordPress to display all of the subcategories under the photography parent category. If this was the only parameter, then all of the subcategories and sub-subcategories shown in the image above would be displayed in the menu.
• Depth=. This parameter tells WordPress to display ONLY the subcategories directly under the photography category. Sub-subcategories and all deeper category depths will not be displayed in the menu. So all of the actual location sub-subcategories such as San Fransisco would be excluded. Different values can be entered here to regulate how many depths you would like to display. You can visit the WordPress site at the link below for more information on this.
• Exclude=. This parameter tells WordPress to NOT display the link to the “Geographic Locations” subcategory. This was a personal preference of mine and is not required. I excluded this category from the navigation menu as I wanted to hard code this link to the bottom of the navigation menu as opposed to having it appear in alphabetical order.
• style=list&title_li=. These are display property parameters that will tell WordPress how to display the list. You can learn more about these on the WordPress Codex site here. (opens in new window)

From here, all I needed to do was set-up a template file for my “Geographic Locations” subcategory ( How To Do This ) and add a special navigation menu that would display the different location sub-subcategories. The template tag used to accomplish this goal was:

<?php wp_list_categories(’child_of=111&depth=1&style=&title_li=’); ?>


In Conclusion
What we did above was completely hide all references to the “Geographic Locations” sub-sub categories from ALL areas of this blog except for when you are actually in the geographic locations subcategory. You are presented with links to the “Patrick’s Point”, “Sierra Nevada Mountains”, and “San Francisco” photo album categories only after you have clicked on the “Photos By Geographic Locations” link.

This blog is not a “travel destination” blog so most of the visitors are probably just here to look at a certain type of photograph, ie: flowers, and are not overly concerned with WHERE the photo was taken. I don’t need to overwhelm the visitor with unwanted links to 100 different geographic locations. Instead I present them with one link to a page where they can then sort photos based upon location if they desire.

I think that you will find your navigational menus much cleaner and easier to navigate by removing some of the unneeded links. Take a look and see if you can’t hold off on displaying certain links until the visitor reaches a certain location or depth of your blog.


For more information on the “list categories” template tag and the different parameters that you can set, visit the WordPress Codex Site.


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

Can you tell that this blog has 41 categories and 84 tags in my tag cloud ?


I figured that it was about time to group some of my WordPress posts and show you why I am doing what I am doing. I have written a few “How To” articles but I haven’t brought them together under one roof to show you how these simple steps can help you clean-up your blog.

With this being my fifth blog and about 20th web site, I really wanted this one to have a cleaner, smoother look. It drives me nuts when I visit a blog and it takes 12 minutes to load because of all of the JavaScript gadgets in the side column, or the 4 navigation columns and one very skinny content column, or having 10 full length posts on the front page. None of that is needed, and your actually killing (through suffocation) your visitors. Navigation is very helpful. Excessive navigation is just a needle in a haystack.

For example, this blog grows every time I post a new article. Maybe I add a new tag or a new category … Maybe I use only ones … but it always grows in some fashion. I have been running this blog for about 2 months now and I have 84 tags and 41 categories, but you cannot tell that from my side columns. It could grow to over 200 categories and 10,000 tags in the next month and my side columns and header will never change.

While you are on this page, reading this article, I am going to guess that you have absolutely no interest in knowing that this blog has a sub-sub-category that contains photographs of Agate Beach in Northern California. If you wanted to look at photographs you would use the photography link in the header. There is no need to list all categories in the side column. This is the same navigational concept they use a Yahoo andd other organized web portals. The front page has a link to the “sports” section. There is no need to have links to all of the separate team pages until AFTER you have clicked through to the sports section.


So clean up your blog round 1 contains:

1. Moving Your Tag Cloud

I wrote about HOW to move your tag cloud in the article Toxic Tag Clouds. What this will allow you to do is physically move your tag cloud off your side column and place it on a page instead. This can clean up a massive amount of real estate in your side column. After you place your tag cloud on a WordPress page just place a link to it in your side column or in the header links. People who love tags can easily find your tags and you will not be creating the amazonian jungle of links in your side column.

2. Use Multiple Levels Of Categories For Better Navigation

This blog has 4 parent categories, 35 sub-categories, and 2 sub-sub categories. The only links the appear in my header links are to the 4 parent categories … tech, ramblings, writing, and photography. After you click on one of those links you will be given sub-category links to better refine your search.

Let’s use Yahoo as an example here. You go to the front of yahoo and find 4 parent categories … News, Sports, Movies, TV. You click on the Sports link and then can choose from 10 sub-categories in the header bar … let’s say these subcategories are the 10 different sports teams. You click on one of the sports teams link and you are presented with some sub-sub-category links in the header bar … players on the team, team stats, team schedule and so on. You do not need to place the “team schedule” link on the very front of Yahoo because only a very small fraction of people are going to be interested in that … yet the navigation is extremely clear so that the people who DO follow that team can quickly and easily get to that page.

I have fallen in love with subcategories because they offer much better navigation then tags. By using multiple category depths you can accomplish this navigational style. It is really the only way and should be almost considered a MUST DO.

To accomplish this goal I have written a couple of different articles. The first article that you should look at is: How To Display Subcategories & WordPress Category Templates. This article will show you how to create separate templates for each of your parent categories. We are using separate templates because it allows us to display the subcategories that are the children of that particular category. Again, clean, simple navigation is what we are going for.

The second article is How To Display WordPress SubCategories: Descendant Function. This article will show you how to display the subcategories that are under the parent category of the article you are currently reading. For example, this article is in the tech category so I would only want to display “tech” subcategories. Again, it would be a mess if I included all 35 of my subcategories, but to include the directly related categories is good for navigation. Read your reader’s mind and give them what is most related to their interests. You can see an example of this in the Related Posts section at the bottom of this post.

The third article deals with How To Exclude Certain Categories From Menus. This is very useful in presenting a clean navigational menu. There in no need to display second or third level subcategories before your visitor has gone to the first level sub category. It only creates confusion and an overwhelming number of links.

3. Widget and Plugin Madness !

You will notice in the above article that we are doing a lot of hand coding to accomplish these goals. You may be asking yourself why we are not using widgets and plugins. The answer, for me, is a simple one … flexibility. I don’t want to use sidebar widgets because my whole goal is to clean-up the sidebar, not add more to it. As for general plugins, many of them lack flexibility. They may do one or two of the things I was looking for but very rarely will they accomplish everything.

In addition, when you hand-code something you have the option to NOT place the code in certain locations. I can place these little code changes anywhere I want in my template files, BUT I also have the option to leave these functions off certain OTHER pages or sub-template files. I can also place the code anywhere I would like to on the page. For example, if you visit my “Photos By Geographic Location” in the photography section you notice a double navigational menu. If I so desire I could easily remove the second menu without affecting the first menu. How ? Because they are not controlled by a single master “plugin” program.



So get out there and clean-up those blogs. Get your navigational menus in order. Let your visitors just flow through your site. Trust me, you don’t want to have to force them to find their way through the jungle.

For example, take a peek at the mess I have going on in my last blog … Lohman Trading. In the next month or so I will really need to attend to this blog. The navigation is overwhelming. I will be applying all of the techniques mentioned above !


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

In this article we will be creating mini photo albums on our WordPress post pages in the photography category. These photo albums will replace our standard “Related Posts” link lists on these pages and create a very nice graphic display of related photographs. Hopefully this will make it easier for your blog visitors to find related photographs and entice additional page visits.

In my TimThumb thumbnail article I talked about the wonderful flexibility that timthumb.php offers. I also stated that my next project with this program would be to create mini photo albums on the post pages in my Art and Photography Category. Well, I am happy to announce that I have actually completed that project A LOT quicker then I thought I would.

Before reading this article, it is suggested that you take a look at the following previous articles. By reading these articles first you will have a much better understanding of the procedure to create the photo albums :
1. Beautiful and Easy Thumbnails with TimThumb
2. How To Display Subcategories & WordPress Category Templates
3. WordPress Loop Inside Of A Loop


You can see an example of the mini photo albums on my Clover Flowers post. The photo album appears below my signature in the “Related Posts” section.


STEP 1.
You must have timthumb.php installed on your WordPress blog or this code will not work. If you need to install timthumb.php, please visit the Timthumb Page for details.


STEP 2.
The first step is to create a custom field on your “Add New Posts” page in WP admin. Click on “add new” in the custom field section of the page and add a new field named photoalbum. You can obviously change the field name to anything you would like.


STEP 3.
Add the following code to your “single.php” page. (this page displays your individual posts)

<B><h3>Related Posts:</h3></B>
<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
Below are more photographs from the same photo album. You can visit the main photo album page if you would like to see all of the photographs from this album.
<BR>
<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>

<?php rewind_posts(); the_post(); ?> <--- your MIGHT need this snippet


CODE BREAKDOWN: Here is a breakdown of the above code …

First … in my example, when you want to display the mini photo album on the post page you should enter the cat id (number) of the category you want displayed as the photo album. Enter this number as the value for your photoalbum custom field when you are adding a new post. This is especially useful if you post photos to more then one category.


<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
This segment of the code checks to see if your post has the “photoalbum” custom field specified. If the photoalbum field has been filled out when you wrote your post (true statement) then it is renamed to photoalbumlink. If the photoalbum field was not filled out, then we jump down to the else statement further down the page.


<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>
We need to create another loop to pull-in the photo thumbnails for the photo album. Since I am already running 2 other loops on the post page (gallery at top of page and the loop to pull the post info in) I needed to pick a unique term for this loop – “queryphoto”. See the article link above for “Loop inside of a Loop” for more information on this. In the query I am specifying which category/subcategory to pull the thumbs from using cat=.$photoalbumlink. with the photoalbumlink being the cat id number that we specified in our custom field when we created the post. I am also requesting that only 10 post thumbnails be shown.


<?php
$thumbnail = get_post_custom();
…….. THROUGH …….
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $imagpath; ?>” alt=”<?php the_title(); ?>” /></a>
All of this code is from timthumb.php. There is really no sense to go through all of it again in this article. If you are unfamiliar with any part of this code, please take a look at my article: Beautiful and Easy Thumbnails with TimThumb.


<BR> See more photos in the album: <?php wp_list_categories(’include=’.$photoalbumlink.’&style=html&title_li=’); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>
There are 2 important parts to this code segment.

1. The “See more …” segment of the code creates a link to to the rest of the pictures in this photo album (category). The “include” requirement is telling WordPress to link ONLY to the category specified in our custom field. This is the same category that was used in our query posts above.

2. Everything after the “ELSE” statement is displayed if you DID NOT specify a cat id in your photoalbum custom field of the “add new post” page. In other words, if you leave it blank the following will display. You will need this so WordPress will know what to display on post pages that are NOT in the photography category. In my case above, I am using a “similar posts” plugin to display text links to similar posts. If you look below in the “related posts” section on this page you will notice that NO photo album appears, just the related posts links.


<?php rewind_posts(); the_post(); ?>
You will need this little piece of code IF you need to return to the original post query. You will need this for your comments box IF you place this photo album above it. You may also need it if you have social networking submission links below the photo album. I am not 100% comfortable with this little code piece, but as far as I can tell is that it is telling WordPress to re-populate the “query” with the original query post information. For example, the permalink and the title from the post that displays on your page.


WHY AM I DOING IT THIS WAY

When you look at all the above code, you may notice that there may be slightly easier ways to accomplish this task. Maybe you have seen a “related posts” program that would accomplish this. Maybe a gallery program would. But I can pretty much guarantee that those will not offer you the type of flexibility that this does. The above method offers post-by-post flexibility. I would like to see a standard plug-in offer that.

This method is very useful for me because I post my photographs in up to three categories. For a photo of the ocean I may display it in the “ocean” category, the “scenic” category, and the “Patrick’s Point” category. For my post page mini photo albums I would like to display related pictures based upon the LOCATION (Patrick’s Point) so I would select that cat id for my custom field.

As a side note, my Patrick’s Point Category is a sub-sub-category. It is semi-hidden under my “Photos By Location” subcategory under the photography category. This, I suppose, will be yet another article in the near future.

The flexibility of this method is endless. For example, I could display a photo album of flowers on the bottom of this post if I so desired, just by entering the cat id in my custom field. I think you probably get the picture …


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

A few articles back I mentioned that I would do a post about the thumbnail program that this blog uses … TimThumb. Without further ado let’s take a peek at this small php program.


What This Program Does
Timthumb.php will crop, zoom, and resize any and all images and photos on your website. This program will work with .jpg, .png, and .gif images.


Why Do We Want This Program
I like this program because of one thing … simplicity. Timthumb came with this theme originally and I have since learned to love it. There are probably thousands of different WordPress gallery plugins, programs, and thumbnail programs. Some plugins, by their nature, may be easier to install, but they are not as flexible.

Timthumb.php runs the following special segments on this blog: handles all of the article image thumbnailing, runs the mini latest posts gallery at the top of the page (article here), and my current adventure of turning my photos category into a gallery. All of the design and layout is handled by your theme and it’s stylesheet so it makes it a lot easier to implement timthumb in many different areas of your blog.

Because only one PHP file is required to do all of that, I have decided to get rid on my photo gallery plugin ( YAPB ) in favor of using timthumb.php.

The flexibility of timthumb, along with the ease of having only 1 file to look at anywhere thumbnails or galleries are concerned, makes it a win-win for me.


Installing TimThumb
Grab your copy of timthumb for free on the TimThumb Google Project Page.


1. After you download your copy upload it to your server. It would probably make the most sense to place it in your current THEME folder like:
MY_WEBSITE/wp-content/themes/MY_THEME/timthumb.php

2. On your “Add Post” page in WordPress administration you will need to ad a custom field at the lower part of the page. Let’s name this custom field “thumbnail”. From now on you can add the URL of the image you want to use as a thumbnail in this field.

3. Add the following code to your theme pages wherever you would like the thumbnail to appear:


<?php
$thumbnail = get_post_custom();

$scrap = get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/timthumb.php?’;

if (empty($thumbnail['thumbnail'][0])) { $imagpath = $scrap . ’src=’ . get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/images/thumbnail.jpg’ . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

} else {
$imagpath = $scrap . ’src=’ . $thumbnail['thumbnail'][0] . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

}
?>



Now let’s look at the code piece by piece …

The $scrap line … this is the path to your installation of timthumb … you will need to change your theme name. If you installed the file in your theme folder then everything else on this line should be correct, but double check that this path is correct.

The if empty line tells timthumb what to do if you have not included a thumbnail with your post. Upload a generic thumbnail to your themes/images/ folder that timthumb can use. make sure the name of this image is ” thumbnail.jpg ” – OR – change the name in the code above.

The else line creates the thumbnail for your post if you have specified one.

The settings. In the above code you will need to change the settings …
“w” stands for the desired width of the thumbnail,
“h” stands for the desided height of the thumbnail,
“zc” stands for zoom crop (0 is no, 1 is yes),
and “q” stands for quality (75 to 100 … 75 is default).

Finally, you will probably want to wrap the above code in a div class/id so that you can influence the display. You can add your new class to your theme’s stylesheet.


As you can probably tell from the above code, there is a lot of flexibility here and that is what I like with using this program. You can run this code anywhere on your page and you can use it as many times as you would like. In addition, in each and every application of this code you can change the setting to anything you would like.

My next major project with this code will be developing photo albums to display below below photo posts. These will contain thumbs of other photos directly related to the original post by category or tag. I hope to use a new “Custom Field” which will allow me to specify which category, tag, or search term to use in gathering the thumbs … everything else will be automatic. This, though, is probably still a while away …


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

In this article we will be discussing how to override the “Posts Per Page” in WordPress admin setting for select sections in your blog.


Why Do We Need This ?
I ran across this problem when I decided to modify my “Photography and Art Category”. I wanted to set-up this category like a photo gallery and display only thumbnail images and no written content. You can Click here to see the photo category, but please keep in mind that it may not be completely finished yet. It is still a work in progress.

This blog is set to display 10 posts per page in the “reading” section of WordPress Administration, but for just the photography category … and only this category … I wanted at least 30 post thumbnails to be displayed per page. It would be ineffective to display only 10 thumbnails per page in this category, so I needed to find a way to override my posts-per-page setting.


The Code To Override
You can quite easily override the posts per page setting by using the following code:

<?php query_posts($query_string.’&posts_per_page=35‘);?>

By using the term “$query_string” we are telling WordPress to change query_post ONLY with the information provided. We are not completely overriding all settings of query_posts. In the above code you will need to change the red number to the number of posts you would like to have displayed on that page.

This code needs to be placed on your page before The Loop. For example, your final code may look something like this:

…… Blah blah …. header info …..

<?php query_posts($query_string.’&posts_per_page=35′);?>
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

……. blah blah post design settings …….


This override feature is especially helpful for overriding the settings on category.php, archive.php, and search results (search.php) pages. Let’s say you only want to display post titles on your search results page. Everywhere else on your blog you display post excerpts and are displaying 10 posts per page. The search results page could certainly fit more then 10 posts on a page if you are only listing the post titles. With the above code, added to your search.php file, you could display as many post titles as you would like on a page.

If you use category templates ( article here ) like I do, you can easily use the above code to modify each category independantly. Very helpful !


As a side note … while you are working with this string … you can also change the sort order of the posts. WordPress automatically sorts your posts in descending order based upon the date of the post. You can change this to ascending order using the following method:

<?php query_posts($query_string.’&posts_per_page=35&order=ASC’);?>

Changing the sort order may be helpful for those who have a “serialized” category. Perhaps a storyline or series of photos that need to be viewed IN ORDER from the first post on.

More info about “query_posts” can be found on the WordPress site.


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here