By Neil on January 20, 2014

Creating custom post templates using the Views plugin

The video walk through follows on from the Custom Post Types set up video and guide that you can find here! I have already created the custom post type Turbo Trainers and set up a load of custom fields. These custom fields are where I add the content for the turbo trainer product pages. The video and the walk through below show you how I use the Views plugin the create content templates to style my turbo trainer custom posts and get the layout exactly how I want it.

The end styling and layout we are aiming to achieve can be seen on the live TurboBikeTrainer.com website here! The information in the right sidebar and at the bottom of the product page may differ slightly as this may change over time.

Firstly, fill out the custom fields in the custom post type. Here I have used the Elite Qubo Wireless Digital turbo trainer as an example. If you publish this post and then view it you’ll notice that only the title shows but none of the custom fields that you just filled in (see Figure 1).

Figure 1 Without a specified content template only the post title shows when using custom fields.

You’ll need to have the Views plugin installed to do this next stage. I installed this plugin in my Custom Post Types guide. In your website dashboard you’ll see a Views tab in the left hand column. Hover over this tab to reveal a list of options, and select Content Template. A new window will show in the dashboard, and from this window select ‘Add new Content Template’. A pop-up window will appear that lets you assign this content template to a specific post type (click the single pages title). I assigned this new content template to my Turbo Trainer custom post type. Name this new content template anything you want (I called mine ‘Turbo Trainer Product Layout’). Click ‘Create a template’ and a blank edit screen will appear ready for you to format your content template. Click update in the right hand sidebar to save all current progress.

This ‘Edit Content Template’ screen in your website (WordPress) dashboard is where all the magic happens. There are two main areas to focus on, the first is the standard looking content area, and the second is the CSS editor that can be found beneath this standard content area. This CSS area lets you style your content template directly without the need to edit your websites style.css stylesheet, which is very handy. By default this CSS area won’t be expanded, but just click on the CSS editor title to expand.

To add custom fields to your template click on the V (or Views icon) at the top of the content area. This opens up all shortcodes, so navigate down to the Turbo Trainer Parameters shortcodes (or what every you called your custom fields), and click on the ‘Image 2’ shortcode. From now on I will just state which shortcodes etc. I setup while making the TurboBikeTrainer.com website. A pop-up window appears asking for more info, so simply put in some holder text for the Image title and Alternative text (I used ‘image title here’ and ‘alt text here’). We will add special shortcodes to these areas later so that it sets/displays the name of the turbo trainer automatically. Leave the Alignment as ‘Left’ and use custom Pre-defined sizes of width 320 and Height 320. However, we will be styling these images using the CSS editor so these values are not vital. Click ‘Insert shortcode’ and this will paste some code into your content editor window.

We want two images to show (i.e. custom fields Image 2 & Image 3), so simply copy the code that you just create and paste it directly below so you have two identical code snippets. Now in the second pasted code change the field=”image-2″ to field=”image-3″. This just saves us going through the whole process again when adding the shortcode because all other parts of this image custom field code are the same.

We now want to style these two image areas, so we begin by adding a DIV around the shortcodes (i.e. div id=”extra_images”). Both image field shortcodes used the same DIV ID because both images are going to be styled the same. See Figure 2. Notice the closing /div tags that are essential to show what is enclosed within this particular DIV.

Figure 2 Editing Content Templates with the Views plugin, and styling the custom fields using HTML DIVs.

We now go to the CSS area below and add the styling for this ‘extra_images’ DIV. The styling code is shown below:

#extra_images
{
float: left;
max-width: 320px;
padding: 2%;
}

To target a particular DIV you start your styling with #(id name), for this I used #extra_images, and then you enclose any styling code between an open and closed curly brackets. Here I floated the DIV left and constrained the maximum width to 320 pixels. Finally I added some padding, and using a % means that the padding around the DIV will visually change depending on the size of the screen the website is being viewed on. This just makes things a little nicer when the website is being viewed on a smaller screen, like a mobile, because instead of having a pre-set constant gap around the images, this gap becomes smaller when the screen size is smaller. Remember to click update to save any changes.

The results of this styling can be seen in Figure 3 below.

Figure 3 Styled images using the Views plugin to create a content template.

I need to add a green line above the images, and to do this I will create a new DIV and give it an ID of “extra_images_holder”. As the name suggests this DIV will hold both images, and thus it is positioned before the first image shortcode and the closing /div is placed after the 2nd shortcode. This new “extra_images_holder” DIV will have a solid green border along its top edge. The styling for this new DIV is shown below.

#extra_images_holder
{
width: 100%;
border-top: solid 1px #66CC66;
padding-top: 5px;
}

The width is set to 100% so that the green line is across the whole page, and the extra padding-top is just to push the green line a little further away from the images. See Figure 4.

Figure Adding a green line above the images using a DIV with CSS styling.

As a reminder, visit the TurboBikeTrainer.com website here to see what layout we are working towards.

Next we are going to style the top part of the product page where the trainer specifications go along with the main image. The image along with all the individual specifications are unique custom fields, and thus we simply need to paste the shortcodes into the content template and style them as we did before.

The order the different custom fields show is related to their order in the content template, so push the image custom field shortcodes down in the content template editor, and with the cursor positioned at the top of the list of code click on the ‘V’ icon and add the RRP, Brand, Model name, Braking mechanism, Maximum resistance level, Control mechanism, and Image 1 custom fields shortcodes. With the Image 1 shortcode replace the title and Alt tags with the post title shortcode so that the name of the turbo trainer is specified for these tags. I specified a width and height of 350 and an alignment of none, but this will be styled using CSS later anyway so it is not vital.

To get all of the specification custom fields and the main image styled correctly requires a fair amount of CSS code, but nothing more complicated than has already been covered here. First create a new DIV with an ID of “top_left_area” and put this above all of the specification custom fields, with a closing DIV after the final specification custom field (i.e. Control mechanism). Next create another new DIV with an ID of “top_right_area”, and place this around the Image 1 shortcode.

Within the “top_left_area” DIV we’ll create a new DIV which will be placed around each of the individual specification custom field shortcodes, so that a light grey line can be placed beneath each specification. The new DIV has an ID of “specholder”. Finally, a new DIV was created to hold all of the individual specification fields along with the Image 1 field. This DIV has an ID of “main_top_holder”. See Figure 5 for the HTML layout with all the new DIVs.

Figure 5 Styling HTML DIVs for the top section of the turbo trainer product pages.

I won’t go over each individual styling aspect but Figure 6 shows a screenshot of the CSS code to style the top section of the turbo trainer product page. The main points to pull out of this is the border-bottom of the #spechoder styling, which adds a light grey line below each individual specification, and the border-top of the #main_top_holder that adds the top green line. Also in this styling the green line is pushed away from the image and specification using the padding-top attribute, and pulled closer to the page title using the margin-top attribute with a minus value.

Figure 6 CSS styling of the top section of the turbo trainer product page.

One final thing that needs doing with this top section is to add names to the individual specification custom fields. To do this simply type in the titles we need directly in front of the corresponding shortcode. For example type RRP: £ in front of the RRP shortcode, Brand: in front of the Brand shortcode and so on. I placed these titles inside bold tags (e.g. < b >Brand< / b>) to make them stand out. See Figure 7 for current progress.

Figure 7 Completed styling of the top section of the turbo trainer product page.

By default there are a few bits of meta and post information such as the date, author name, category filing etc. that we want to remove from the page. There are a few ways of doing this, but a super simple way I did this was to use the Genesis Plugin called Simple Edits. Once installed a new selection appears under the Genesis tab in your WordPress dashboard, and all you do is simply delete the shortcodes that are in the ‘Post Info’ and ‘Post Meta’ fields and push ‘Save Settings’. Now this extra info on the turbo trainer pages has gone.

There are now just a couple of things to do to get the turbo trainer product page formatted correctly. We need to add the Price comparison and Description custom fields and then style them correctly. Note that the actual price comparison functionality will not be covered in this article, but I will cover it in a special article later.

Click on the ‘V’ again in the Edit Content Template screen and choose the Price comparison and the Description fields. Add a new DIV around the Price comparison shortcode (I gave mine an ID of “price_comparison”), and another around the Description shortcode (mine had an ID of “description”). To ensure that the top section remains completely separate from the Price comparison and Description areas I will create a new DIV with an ID of “clearall”. This DIV has the sole purpose of dividing the DIV directly above it and the DIV directly below it (or more correctly the DIV to its left and to its right). All you do is style this DIV with the attribute clear: both. i.e.:

#clearall
{
clear: both;
}

This clearall DIV is placed above the price_comparison DIV. The styling of the Price comparison and Description DIVs are pretty similar to the other DIVs we have created, and simply create a green line that is spaced out correctly. The CSS styling is as follows:

#price_comparison
{
padding-top: 15px;
margin-top: 15px;
border-top: solid 1px #66CC66;
}

#description
{
padding-top: 20px;
margin-top: -20px;
border-top: solid 1px #66CC66;
}

Getting the correct margins and padding was simply a bit of trial and error, tweaking values until it looked right.

There is one tiny addition and then this content template guide is finished. I mentioned that the functionality of the price comparison area is coming in a future tutorial, but we just need to add the bold text ‘Buy in now at:’ ready for our list of best prices. So just go and add these words directly in front of the Price comparison short code and place them inside bold tags (e.g. < b >Buy it now at:< /b>).

See the final HTML and CSS code below in Figure 8 (click on the image to see a larger size).

Figure 8 Click image to see larger size. Complete styling of the turbo trainer product page using content templates with the Views plugin.

The layout is now complete and looks identical to the turbo trainer product page shown here (minus the price comparison bit).

Summary

This guide shows how to style a custom post type that was created via the Types plugin. The fantastic thing now is that all future turbo trainer products that I add will be instantly formatted correctly without having to touch a thing. This is a huge time saver and a great way to add new posts, pages, or custom posts to your website.

Head over to the official Types & Views website to learn more about these plugins, or read my overview here!

If you have not done so, you should definitely watch the video at the top of this page.