Display a category menu above the projects loop

A common feature in portfolios is displaying a menu of categories above portfolio entries. Indeed this is a feature in the portfolio implementation we previously included in our themes.

Despite being a common feature, it is not necessarily ubiquitous which is why we didn’t include it in Projects core. However, that’s not to say it cannot be added, which is what this tutorial will help you do. Fortunately, it’s an incredibly simple process!

Preparation ↑ Back to top

Before diving into the code be sure to set up a safe environment to do so. Adding code to, or modifying core files in a WordPress plugin or parent themes will cause you no end of headaches when it comes to applying updates. Any custom code you add will be overwritten. To avoid this I highly recommend adding your customisations to a child theme which will be untouched when performing theme / plugin updates ensuring your code is not overwritten. In this tutorial your child theme will require a style.css file (a requirement of any child theme anyway) and a functions.php file.

Add the category menu ↑ Back to top

As you’re probably aware, Projects does include a feature to display project categories – the Project Categories Widget. So rather than adding a bunch of duplicate code we can simply utilise this to output the menu. We’ll do this by creating a new function to output the widget and hook that into the action that is executed before the projects loop. Add the following to your child themes functions.php file to create the function:

function projects_categories_menu() {
	the_widget( 'Woothemes_Widget_Project_Categories', 'title=&hierarchical=0&count=1' );
}

This includes the widgets three required arguments; title, hierarchical and count. You can tweak these if you would for example prefer not to display the count (number of projects in the category).

With the function created, we now have to hook it in before the projects loop. Add the following to your child themes functions.php file to do so:

add_action( 'projects_before_loop', 'projects_categories_menu' );

Visiting your projects page will now reveal the fully functional category menu:

The projects menu coming to life!
The projects menu coming to life!

Appearance ↑ Back to top

With the menu in place and fully functional all that’s left is to add some styling. This will be dictated by your theme and will therefore be up to you to make it fit in seamlessly. The example screenshot above is taken from our Canvas theme and the code following will work well with that. It may however require tweaks to fit with other themes.

First of all let’s arrange the links into a single line. All of the following CSS should go in your child themes style.css file.

#main .projects_categories_list_widget li {
	float: left;
	display: inline-block;
	border: 0;
}

Note the #main prefix. This is important so that these styles are not applied to the widget when placed in the sidebar or other widget regions.

Category links displayed inline
Category links displayed inline

The icons are looking a bit strange so let’s remove those:

#main .projects_categories_list_widget li:before {
	display: none;
}
Screen Shot 2014-05-09 at 12.40.13
Now we’re getting somewhere!

Now let’s fix the spacing by tweaking the first css snippet and we’re done with the layout styling:

#main .projects_categories_list_widget li {
	float: left;
	display: inline-block;
	border: 0;
	border-right: 1px solid #ccc;
	padding-right: 1em;
	margin-right: 1em;
	padding-bottom: 0;
}
Screen Shot 2014-05-09 at 12.47.34
Spacing fixed!

And that’s it! The only other thing you might want to do is add some styling for the active category:

#main .projects_categories_list_widget li.current-cat a {
	font-weight: 700;
}
The active category is now illustrated in bold.
The active category is now illustrated in bold.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top