Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Lucas Santos
Lucas Santos
19,315 Points

Wordpress Course Suggestion for Zac Gordon.

So iv been learning a lot from the Wordpress teacher here at Treehouse Zac Gordon and I want to thank you for all the help you've given me.

But as iv been working with Wordpress iv noticed some key features that are really important to learn such as the template hierarchy and you made a course specially for that which I thought was great. I really think "Categories" and "Sub-Categories" in Wordpress is extremely important to know. How to display posts that are assigned to categories and as well as sub-categories. Also how to filter categories with conditionals and what not.

There is so much to learn on categories I think it would be a great mini course all on it's own just like the template hierarchy course that you can go more in depth with. Would love to see a "Wordpress Categories" Course.

4 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Wow folks, great conversation here! Thanks Kevin Korte for the awesome assistance.

I have an Advanced Theme Development course I've been outlining for a while and I just added in creating custom and complex category driven pages to the outline.

Looks like you have some good direction and guidance here, I'll just second the use of using conditional statements, more generic category templates, and possibly some custom includes.

Lucas Santos
Lucas Santos
19,315 Points

Hey Zac! Thank you so much for everything you've done, you have literally changed my life thank you.

Wanted to ask you tho when will that "Advanced Theme Development course" be out?

And yes Kevin Korte is extremely helpful just one thing thats confusing me here. I have this in my category.php to show the list of all sub-cats thats related to that main category in that categories page.

<?php if (is_category('Honda') ) : ?>

    <?php $args = array(
    'orderby'            => 'name',
    'order'              => 'ASC',
    'style'              => 'list',
    'show_count'         => 1,
    'hide_empty'         => 1,
    'use_desc_for_title' => 1,
    'child_of'           => 5,
    'hierarchical'       => 1,
    'title_li'           => __( 'Categories' ),
    'show_option_none'   => __( 'No categories' ),
    'number'             => null,
    'echo'               => 1,
    'taxonomy'           => 'category',
    'walker'             => null
); ?>

<?php wp_list_categories( $args ); ?>

<?php else : ?>
<p>This is some generic text to describe all other category pages.</p>
<?php endif; ?>

So when I click on Honda I see a list of all the sub cats in Honda which is great but when I click on any of the sub-categories the list of categories does not show any more. And I think I know where it went wrong. on top I have <?php if (is_category('Honda') ) : ?>

When the logic should be <?php if (is_category('Honda') OR A CHILD OF THAT CATEGORY ) : ?>

I just don't know how I can determine if a sub-cat is the child of a certain category so that the list can also display in the sub-categories template and not just the parents.

The help of Wordpress Master Zac is greatly appreciated!

Kevin Korte
Kevin Korte
28,148 Points

So question here:

So you have a list of categories, which are car makes. I choose my car make, say "Honda", and I get a new list of sub categories that are "models". Now let's say I choose "Civic", are you trying to show another list of sub-cats below "Civic"?

Lucas Santos
Lucas Santos
19,315 Points

Just to avoid the confusion of going back and forth I made an example of what the problem is so that it's clear. CLICK HERE

Kevin Korte
Kevin Korte
28,148 Points

I think this is a good idea.

I have a site that I'm still building right now, but I've got some of the features built. You might be interested in in the filter dropdown navigation.

Here: http://www.machinecheatsheet.com/

Basically, each post is a machine, and each post has 4 categories; Type, Year, Make, Model

They are chaining dropdowns, meaning as you select one, the second only populates with years that also have that type, as you select a year, you only get makes that also have that year and type, and so on.

As I add more machines, the chaining dropdowns will adjust their options and update automatically to reflect what I have posted.

I'd be happy to share all of the code with you on github or something if you'd like to see it. It probably needs more commenting in it, and can probably be made more efficient, but it's working at least.

Took me a couple of days to build the functionality. Next step is putting it into a plugin. Right now I'm working on the UI still. Not happy with whats there.

Let me know if you want the PHP code.

Lucas Santos
Lucas Santos
19,315 Points

Wow great filter! I would love to see the code for that. Thank you!

What I originally wanted to know was how to display Wordpress Sub-Categories in the parent Categories Page. So if I had a Car category like, Category: Honda > Sub-Category: Accord, Civic, Prelude. And of course do to the Wordpress Template Hierarchy the Honda Parent Category would display it's information in "category-honda.php". Now in that page I would want to display links to the sub-categories of Honda, which leads me to my next question and that is: Where would the links to a sub-category take you in the Wordpress Template Hierarchy? Because it would NOT take you to cateogry-slug.php. That goes to the parent categories, so where would it take me or where should I direct the sub-category page to?

Kevin Korte
Kevin Korte
28,148 Points

Here is a possible solution that jumped out at me, however I haven't tested it yet.

http://www.mindfiresolutions.com/How-to-use-different-template-for-subcategories-in-Wordpress-2277.php

Just a word of caution if you haven't thought about it. by using category-{slug}.php you're not making your theme as extendable as it could be. What happens when you want to add a new make, do you than have to make a new category-{slug}.php file and FTP it to your server? What if you want to change the markup; do you have to edit every file?

I might try to use just a category.php template, if at all possible. Does the markup change depending on the make? It would seem that the pages for a Honda or a Toyota should mirror each other for better UX, with only the content being different. And that the sub-categories should also have the same structure as each other, only with the appropriate content. And this is where using WP to generate that content dynamically would be ideal. I'd try to do this with only two pages based on what you've said here.

I'll work on getting my filter code on Github. It might help build what you need base on what I did.

Lucas Santos
Lucas Santos
19,315 Points

First off when you say " WP to generate that content dynamically would be ideal" you mean with PHP conditionals, just to be clear right?

And yes the mark up is the same and I can just use category.php for all Categories but what happens when in category.php I list all the links to the Sub-Category of a certain category and I click on a sub-category link. Where would it go? or it wouldn't go anywhere because the content would generate dynamically upon the click?

Here is a perfect example of I want to achieve then you answer that question:

I am trying to achieve generating dynamic content through Custom Post Types and assigning each custom post to a category and sub-category. So lets say I have 3 categories Honda Toyota Nissan and in those 3 categories there are sub-categories of only the model. So:

Honda: Accord - Civic - Prelude

Toyota: Camry - Corrola - Turcel

Nissan: Maxima - Ultima - Versa

Now in my homepage I have 3 links in my navigation which are the main categories Honda | Toyota | Nissan and when I click on Honda I want it to go to a page where it would display only Honda Sub-Categories not any other. And im not sure how I would achieve that with only using category.php and not category-{slug}.php.

So when I go on the page that displays the Honda Sub-Categories links which are all the models I want to be able to click on one and go to a page (which Im not sure what page it would be in the template hierarchy) that displays the custom post type information such as a title and an image of a Custom Post Type Honda that was assigned to that category and sub-category.

So some other questions in this scenario would be how to display only a certain categories sub-category on a page?

The main links in my home page of Honda | Toyota | Nissan that would display it's sub-categories, are they linked to page-honda.php, category.php, or some other link?

And thank you! for uploading your work on Github.

Kevin Korte
Kevin Korte
28,148 Points

Let me work on a bare bones theme here. It might help.

To answer a question.

WP to generate that content dynamically would be ideal" you mean with PHP conditionals, just to be clear right?

--Yes, feeding WP information about what the user has chosen, and altering it's output based on that.

Lucas Santos
Lucas Santos
19,315 Points

Thank you.

Im also curious about that jQuery fadeout effect used when different content is generated because I can write conditionals and what not but im wondering how you used JQuery for that effect based on what information PHP throws out? Sorry for these all these questions im just curious and you have an amazing filter theme.

Kevin Korte
Kevin Korte
28,148 Points

Hey Lucas,

Getting close to having a barebones working template for you I'll throw up on Github. In the meantime, I'd create a fresh localhost wordpress installation, no plugins. And I'd generate a few posts. I can give you the database file, but it's so easy.

Use the default post type for now. Create your posts.

For instance for posts title put Honda Accord and for the parent category use Honda, for the child category use Accord. Do the same for the other vehicles. Honestly, you can create some other cars too, like Ford Escort or Ford Explorer and you shouldn't have to touch any code.

It's just important to use the default post type, and the default category taxonomy WP gives you. It's also important that there are no grandchildren categories. Only parent -> child categories (make -> model).

If you wanted to add more features like year, color, coupe or sedan, I would recommend using custom taxonomies, and that would require some additional code.

Kevin Korte
Kevin Korte
28,148 Points

Okay,

Download and install this theme in your local WP installation:

https://github.com/kevinkorte/treehouse-automotive

I kept it very barebones, hopefully it's clear enough. I hope it's enough to inspire you to create a theme for yourself that will really be modular and extendable. Not sure of the exact functionality you wanted, but try it out and see what you think.

If you want my database file to try to import into you WP, let me know. But like I said, the posts are very basic to just recreate; it only took me a minute or two to make all the posts and categories.

As far as my jQuery fade effect. I'm ajaxing a new WP loop, and filtering results based on what the user has selected so far. I think what I did is when I get the ajax resonse back, I used jQuery's fadeOut method to fade out the old loop, and fadeIn to fade in the new loop.

http://api.jquery.com/fadeout/ http://api.jquery.com/fadein/

Some things I need to work on the theme are with the ajaxing and using get variables or the history.pushState method to change the URL so that the results of the loop or bookmark-able, or likable. That should dramatically improve the UX. I also need to work on my SEO with ajaxing the data, and just ensure I'm doing the best I can there.

I'll just upload the whole theme as it sits now to Github in a separate repo. It's ugly and a mess, but I'll do it as is soon. I haven't had much time to work on it but I'm getting back to it.

Lucas Santos
Lucas Santos
19,315 Points

There seems to be a bug with the theme. Every time I try to create a new category or post and publish it, the screen just turns blank white. And sometimes when I create a category it wont go white but the category which I am creating wont load and it will for some reason appear on top of the WP- admin page with a red left border next to it with an array value of 0 next to the category as so Accord[0]. And im sure it's the theme because when I switched to the wordpress themes it worked fine. Any idea whats wrong?

Lucas Santos
Lucas Santos
19,315 Points

And just to add on when I go to http://localhost/categories_test/wp-admin/ to log in the screen is white. I don't get the login option. Weird because I can see the front end of the theme.

Kevin Korte
Kevin Korte
28,148 Points

Yeah, kinda weird. It's an ajax issue. For some reason WP is struggling to make ajax calls with that theme. Didn't notice it at first, but I am getting the same errors.

Not sure how much time I want to spend troubleshooting it since it was only a demo. The front end still seems to be fully functional if you set up your posts and categories with a different theme, and than flip over to the beta theme you should be able to see that it only uses three view templates, home.php, category.php, and single.php.

The issue seems to live in the functions.php file. When I remove it from the theme, the back end works just fine.

If anything, I think the important part to take away from it is is how you can use WP functions to manipulate the data without having to hardcode values into loops or other functions. The actual code as in example is probably more valuable.

Liam Herbert
Liam Herbert
15,140 Points

I think it could be good to show how to develop an existing wordpress.org site locally as available courses are on local development with a site that you set up specially for local development.

Kevin Korte
Kevin Korte
28,148 Points

Hey Lucas Santos,

I'm late to deliver, but I'm currently re-working my theme. All of the code that makes the chainable selects work are now on Github.

You'll want to look in the dev/partials/ folder and dev/js folder for the Ajax part of it. Hope it still makes sense. I'll still be working on it and committing new code, but have a look for yourself if you're still interested.

https://github.com/kevinkorte/mcs

Lucas Santos
Lucas Santos
19,315 Points

Wow thanks looks great. I'll try to use some of the codes you used on my little category project. Thanks a lot

Kevin Korte
Kevin Korte
28,148 Points

Thanks. Feel free to cherry pick whatever code might help you.