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

How to structure Wordpress site

Hi there,

I'm doing a website for a friend for his trailer business (riveting I know!), and was looking for some advice on how to build it out.

Basically there are a few major types of trailers, then each main type has a few variations in size. So it's something like:

Single Axels - 6x4 - 8x4 - 9x5

Tandems - 6x4 - 8x4 - 9x5

So basically each variations would have its own product page. This would consist of a description, some headings and a few image galleries.

All of the pages would have a very similar structure, as they're basically the same thing, just with different heading and pictures. I've made a quick and ugly wireframe to illustrate more clearly what I mean: https://www.dropbox.com/s/6my6r6vgkdb5h33/Screen%20Shot%202013-09-24%20at%203.09.29%20AM.png

I'm just unsure of the best way to build this out. My first instinct (Which I think may be wrong), was to create a custom post type, say for Single Axels, and attach all the various custom fields needed. Then there would be a post for each variation (6x4, 8x4 etc). Now i'm just a bit confused as to how I display these posts as their own seperate page?

Any help would be greatly appreciated!

Thanks in advance,

Jack

10 Answers

Kevin Korte
Kevin Korte
28,149 Points

I think that would be fine, having a custom post type for single and tandem axle trailers. That sounds a good common denominator to cover all of the trailers with only two post types.

If you haven't you should watch the "Build a Custom Wordpress Theme" series here. You can probably get through it in a day or two if you're intense about it. Zac explains how to do all of this.

But the short answer is you'll probably have a single-singleaxle.php file, and a single-tandemaxle.php file, and you than code each single file to query the correct custom post type. Than use the custom fields to populate the data you need for the single view of each trailer, and you're golden. And that's how you will get those posts to show as their own separate page.

This will help you:

http://teamtreehouse.com/library/websites/how-to-build-a-wordpress-theme

John Locke
John Locke
15,479 Points

If your users are on one page for each type of axle, and all that is changing is the size (perhaps the picture and the price), perhaps the links on the top left take them to a place on that same page with that specific information. One page for each product, so that they don't have to redownload a brand new page.

Awesome thanks Kevin Korte ! So then on the main menu i'd just create a link with the direct url - which would be something like www.galvanisedtrailers.com/singeaxel/6x4 ?

Cheers John Locke ! I did think about that, although the individual pages are massive (there are heaps of optional extras etc to include on each) so thought it would be best to break them out separately. Greatly appreciate your advice though!

Kevin Korte
Kevin Korte
28,149 Points

Basically, yes. What I think I would do is crate a custom menu on the admin dashboard, and than from your posts and pages, you can easily add them to the customer menu, and with drag and drop simplicity you can change their order, hierarchy, etc. That would allow you or even the owner of the site to very simply add or remove items from the menu if the size of trailers ever changes.

I'd than use the

<?php wp_nav_menu( $args ); ?>

To output whatever is reflected in the menu section of the admin dashboard. There are tons of arguments to pass through it. Read about it here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

Than just use CSS to structure and style the menu, and you should have a pretty robust menu that can handle changes to the products being sold later down the road. It will also be nice because none of the html will be hard-coded.

That wordpress function will automatically add the permalinks to each post or page you put into the menu, which is beautiful.

One final thought, I am still a noob on SEO, but I think it would be better to have the URL read "6x4trailer" rather than just "6x4". There may even bee a better SEO solution, but I think adding the word trailer will certainly help the search engines know that this is a page about trailers, and not lumber, or some other thing.

Or..another thought, maybe go. www.galvanisedtrailers.com/trailers/singleaxel/6x4. I would try not to go more than 3 sub layers deep like that though. You could do that with some rewrite rules, categories, and permalink settings . Just a thought.

Amazing thanks again! Yeah I was thinking of taking a similar approach. One more thing I might run by you while you're being so helpful:

I have to set up the image slider at the top of each page for the respective trailers photos. Using flexslider and taking a leaf out of Zac Gordon's videos, I was going to do this:

  • Use Adavanced custom fields to create image field with name 'singleaxel-slideshow-image'

  • Then on the single-singleaxel.php, query the images with:

    <div id="featured" class="clearfix flexslider">

    <ul class="slides">
    <?php 
    
        $args = array(
            'post_type' => 'single-axel'
        );
    
        $the_query = new WP_Query( $args );
    
     ?>
    
    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    
        <li >
            <div class="container">
                <div class="grid_8">
                    <img src="<?php the_field( 'singleaxel-slideshow-image' ); ?>" alt="<?php the_title(); ?>">
                </div>
            </div>
        </li>
    <?php endwhile; endif; ?>   
    </ul>
    

    </div>

The bit that confuses me though is, will it know to display just the images from that post, or will it start pulling in images from all the other single-axel posts with the field 'singleaxel-slideshow-image'?

Kevin Korte
Kevin Korte
28,149 Points

It should pull the images only from that post, thanks to this part of the loop:

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

It's querying only "the_post()", which is the post we are on. So it should only pull in images associated with that post. That magic is happening in the database, with images associated to only that post. Just like the title, description, or other text custom fields.

You just have to write your code so the information that singleaxel-slideshow-image puts out matches what the flexslider needs. Certainly follow what Zac did in the video, which is basically what you need.

Brilliant, can't tell you how much I appreciate all your help! Saved me many many grey hairs.

Don't mean to push my luck, but would you have any advice on how to deal with attaching multiple images to the slideshow? In Zac's tutorial he uses the 'image' field type, which only lets you upload one. Would you just create more of them with the same field name?

I had a brief look into ACF repeater fields, do you think that'd be something suitable for this situation?

Edit: Just found this http://www.advancedcustomfields.com/add-ons/gallery-field/ which looks like exactly what I need!

Kevin Korte
Kevin Korte
28,149 Points

No problem so far!

It looks like either solution would work. The gallery field plug in is a paid plugin, although not much expense, so you just have to decided if you or your client wants to pay for that. It's probably worth it if you do.

However I don't see why the repeater field won't work. I've not used it personally before, but looking through the docs on the ACF site it seems like it would do just what you need.

Zac just used a WYSIWYG box to allow multiple image uploads for a post. Granted, he did not code those images to go into a slideshow, taking that extra step wouldn't be impossible to do as well, so there is a third option. What Zac did can be seen here. http://teamtreehouse.com/library/websites/how-to-build-a-wordpress-theme/converting-static-code-into-wordpress-templates/convert-custom-post-type-details-template

I think any of these options are fine. Pick the one you are most comfortable with, or you think your client will be able to use the best.

Yeah they look like they are pretty good plugins, you're right it's not much, and I'm all for supporting the developer - especially they'll come in handy on future projects.

The repeater field looks like it will answer a few of the upcoming challenges I had with the site as well. On each page there's a series of options like this:

https://www.dropbox.com/s/oh2oyz0wzocum1u/Screen%20Shot%202013-09-25%20at%203.29.33%20AM.png

It should be perfect for creating a group of repeatable fields that can be used to add blocks of 'optional extras' as the client sees fit. The ACF Gallery plugin would also be great to nest within these, so looks like I might be getting them both.

I'll give them a spin tomorrow (it's very late right now in Australia!) and let you know how I go. Thanks again for all the help!

Kevin Korte
Kevin Korte
28,149 Points

Good deal bud. I think the repeater fields will be perfect for the screen shot of options available. You can just decided if you want to buy the gallery plugin. I agree thought, I don't have a problem paying a reasonable price for a plugin that solves a big problem like that one does.

I think you're on your way, good luck. Curious to see the final project and as you progress. It's mid-morning where I am at in the US, still have 6 hours of work left from now before I go home. Cheers