Customising Oxygen Theme to show new posts and the Image Slider
I recently upgraded WordPress to 3.9 and my theme (called Neptumiumize) seemed to be conflicting with it: even though the front end of the site worked, the Wordpress back end started to fail in lots of little ways.
So I decided to upgrade to a new theme, called Oxygen. It’s nice and clean, and it’s also responsive.
The problem is that although Oxygen works really well once you install it, it’s a bit clunky when it comes to setting up the front end. Oxygen offers a choice between two layouts for the front page.
- The first offers a lovely featured posts slider, but requires each and every post appearing underneath the slider to be curated in some way. This involves going back through historical posts and setting them to appear. This is an overhead I don’t want to manage with every post.
- The second option shows blog posts newest-oldest as is typical for a blog, but doesn’t include the slider.
I’m not very good with PHP, so after trying to pick apart the code, I turned to Reddit for advice (the wordpress support forums were very quiet). A user called “Woket” pointed me at the answer.
The trick is to pull the Featured Content template into the index.php, right after the header.php is included and before the aside. Here’s a fragment of the code to illustrate this (I’ve also highlighted the part you’ll need to paste in):
<?php
/**
* Index Template
*
* This is the default template. It is used when a more specific template can’t be found to display
* posts. It is unlikely that this template will ever be used, but there may be rare cases.
*
* @package Oxygen
* @subpackage Template
*/get_header(); // Loads the header.php template. ?>
<?php get_template_part( ‘featured-content’ ); // Loads the featured-content.php template. ?><div class=”aside”>
<?php get_template_part( ‘menu’, ‘secondary’ ); // Loads the menu-secondary.php template. ?>
<?php get_sidebar( ‘primary’ ); // Loads the sidebar-primary.php template. ?>
</div>
I’m actually trying to do this exact thing but am having trouble understanding your instructions. Could you give me a step by step on how to put all of my recent posts on my home/front page rather than manually adding them? Having some serious difficulties understanding how to go about adding this code.
Thanks!
Hi Sara,
Thanks for your comment. I guess my post wasn’t very clear.
1] Go to your Admin panel.
2] Click Appearance
3] Click “Editor”
4] You’ll be in a screen called “Edit Themes”. On the right hand side of the screen click on “Main Index Template”
5] You’ll notice in the code looks a bit like what’s in my actual post.
6] About 10 lines down, you’ll see: “get_header(); // Loads the header.php template. ?>”
7] Just after that, paste in: “”
8] Your code should now look a bit like the code in my post.
9] Click “Update File”
10] Still in the Admin Panel, click “Settings” in the main left nav.
11] Click “Reading”
12] In the “Reading Settings” screen, make sure that the “Your Latest Posts” radio button for “Front Page Displays” is selected.
13] Click “Save Changes”
14 Refresh your site. As long as your posts have a featured image (which I think they do, from looking at your site) you should be set!
Please let me know if this works or I can help further. Good luck!
Ciaran
Hi,
I was so excited when I saw that you’d managed to fix this in the CSS as I don’t have that Location box in my Dashboard’s Screen options.
I’ve added in the line to index.php and changed the settings in Reading back to “Your Latest Posts” but I cannot get the slider to come up.
If I have a static home page, I can get the slider with old posts but none of my new ones. I moved from .com to .org with the Oxygen theme, briefly switch to another theme and then switched back to Oxygen and it no longer works. (Also I don’t know why those latest few posts have such small images as they are more then 750 px wide when I look at them under “Featured image”…)
I was wondering if you had any tips?
(I just tested with a new post and that worked okay with the image size, so it seems it’s something with those few posts that I did using the other theme.)
Hi there,
Your images are the wrong size most likely because the image thumbnails have been generated for a previous theme.
What you need to do is:
1] Login to your Admin Panel
2] Go to Plugins
3] Search for a plugin called “Regenerate Thumbnails”
4] Install it and activate it.
5] Click “Tools” on the left hand nav.
6] Click “Regen. Thumbnails”
7] On the page that appears, called “Regenerate Thumbnails”, click the button labeled “Regenerate all thumbnails”
As for your question about the slider, have you followed my instructions to Sara?
Thanks for your quick reply. I actually just got so frustrated with those three “wrong” posts that I deleted them! (Talk about cutting my nose off to spite my face…)
Yep, I followed those instructions in the comments above, adding the extra code and then changing the settings in Reading. Maybe it could have something to do with not having “Location” as an option in Screen Options?
Hi Kat,
I don’t really understand the point you’re making about “Location”. What are you looking for exactly? If you can’t find “Main Index template”, try looking for a template that refers to index.php.
Happy to help you over IM if you need a hand.
Hey Ciaran, does this require a premium version of WordPress to do? I just have the free version and I can’t seem to activate the sliding picture posts or highlight my categories in black you have. Thanks!
There is no premium version of wordpress that I’m aware of. I see from your URL that you’re not self-hosting (i.e. your blog is [blogname].wordpress.com. My site is self-hosted right here at hanway.co.uk
I think the Oxygen theme that works on your version of WordPress is slightly differently built, so my instructions here don’t apply to you.
Extermely helpful article, please write more.