One thing we find coming up time and time again is how to have a page with posts from a specific category, we have created several different template pages for different themes and have learned a little with each revision.
Here we are with the latest WordPress theme Twenty Eleven and being asked the same question, in this post we have created a twenty eleven child theme for registered members to download and this is how we can use this template page.
Our category page has a couple of ways it can display a categories content, the easiest way is if the page slug is the same as a category slug, this is not the title but the slug which is lowercase with no spaces, generated by WordPress.
If you want to add the files to your own child theme then just copy across, page-category.php and content-excerpt.php, the contents of these files can be found at the end of this post in the PasteBin section.
You may download the file here or visit the All Downloads page for other files.
How-To Category Page
Our test website has a category called Tips and we created a page called Tips, and we then applied the template in the Page Attributes, as you can see in the image below, we have the option to see the Page Attributes by going to screen options, when we published the page the slug tips was created by WordPress.
What we now have on out Tips page is the page content, and a number of full posts based on our Admin > Settings > Reading number of posts
In this template we wanted to make it more flexible so we have added in the use of three custom fields, we will look at the first one here, in the child theme we have a file called content-excerpt.php
This content file will display the thumbnail and excerpt instead of the full post, this has a couple of advantages, the page is tidy and shorter, and the visitor has to use the ‘read more’ link to read the posts, which lowers the Google bounce rate.
We selected ‘Add New Field’ in the Custom Fields panel, entered list in the Name and true in the value, the value does not have to be true, yes, ok, true or any value will do, blank will be ‘false’
Now we have our page content with a list of our posts from the tips category underneath, we also have a nice thumbnail, we will look at the thumbnails later in this post.
Changing the Category
If we wanted to use a different category for our page and not the page slug then we can do this with a Custom Field, lets change the posts to the Investica category, this is a category for a tutorial set.
We selected ‘Add New Field’ in the Custom Fields panel, entered category in the Name and Investica in the value, the value is the category Name and not slug, so ‘Twenty Eleven’ and not ‘twenty-eleven’
Now we can see that the post list is now from the category we added in the ‘category’ Custom Field above from Investica.
When we write posts they are by default sorted as the newest first, which is great for a latest new blog style, but what if we are writing a series of posts and we wanted the oldest first, we have built this into our page using a Custom Field.
We selected ‘Add New Field’ in the Custom Fields panel, entered asc in the Name and true in the value, the value does not have to be true, yes, ok, true or any value will do, blank will be ‘false’
We can see all three custom fields in the image above, we have the Investica category, displayed as a list and we are sorting asc, which is oldest to new, starting with Part One.
In the content-excerpt.php file we are using the ‘thumbnail’, this is set in Admin > Settings > Media, we wanted a 4:3 ratio rather than a square, and opted to hard crop the thumbnails.
We already had all the thumbnails at the default size, changing the values in settings does not re-create the thumbnails, we use a WordPress plugin Ajax Thumbnail Rebuild, this works well for us and we use it when we are testing and changing image sizes.
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.