Custom page templates are the easiest way to make a whole new web design – inside of Thesis. Imagine, all of this space could be yours to code however YOU want…INSIDE of Thesis.
In this tutorial, I’ll show you how to create a custom homepage template, while using a conditional tag and a little custom PHP code.
Step 1. Create a new PHP page and name it home.php. Upload it to: /wp-content/themes/thesis/custom/
Step 2. Open custom-functions.php and paste this at the bottom of the file.
// Remove Default Page Template
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
// Custom Page Template
function custom_homepage() {
if ( is_front_page() ) {
include (TEMPLATEPATH . '/custom/home.php');
}
}
add_action('thesis_hook_custom_template', 'custom_homepage');Step 3. Log-in to your WP Dashboard and click on Pages –> Add New
Step 4. Type “Homepage”, leave the content area blank, select “Custom Template”, and then click “Publish”
Step 5. Go to Settings –> Reading and check “A static page”, then select “Homepage”. Click Save.
Step 6. The Result:
The possibilities are endless here. If you’ve ever seen a Thesis design that DIDN’T look like Thesis, chances are they are using custom page templates.
Here is a real-world working example of home.php below
<?php echo thesis_sidebars(); ?>
<div>
<a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box.jpg" /></a>
<a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box1.jpg" /></a>
<a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box2.jpg" /></a>
</div>
<div id="news">
<img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/bar-1.jpg" /><br />
<?php
$category_box_1 = new WP_Query("cat=1&showposts=2");
while ($category_box_1->have_posts()) : $category_box_1->the_post();
$category_link = get_category_link('1');
?>
<div class="news">
<div id="headline">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div id="thumb">
<?php the_post_thumbnail( array(100,100) ); ?>
</div>
<div id="excerpt">
<p><?php the_excerpt(); ?>...<br />
<a href="<?php echo $category_link; ?>"><?php $category = get_the_category(); echo $category[0]->cat_name; ?><?php $category = get_the_category(); echo $category[1]->cat_name; ?></a> | <a href="<?php the_permalink(); ?>"><?php echo thesis_teaser_link_text(); ?></a> | <a href="<?php the_permalink(); ?>#respond">Comments {<?php comments_number('0','1','%'); ?>}</a>
</p>
</div>
</div>
<?php endwhile; ?>
<h3><a href="<?php echo $category_link; ?>">Read More <?php $category = get_the_category(); echo $category[0]->cat_name; ?>...</a></h3>
</div>
<div id="flickr">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ){ ?><?php } ?>
</ul>
</div>It’s calling for the Thesis Sidebars, creating a jQuery slide-show, and a sub-loop for the news box.
Excellent tutorial, thanks Greg. And very easy to follow.
I always wondered though, how do you create different custom templates if you don't want to change the home page?
I'd like to save a few different pages in the custom folder to choose in the template drop down menu.
I used to do that with Revolution but I've never known how to do it with Thesis.
Many thanks
That tutorial is next! :)
Thank Greg
Never thought about making custom templates that way
I only thought about making the template and ALL the code for the template was put into the custom functions file
Just what I was looking for – thanks
Any ideas how I’d remove the sociables from the bottom of the custom template? I want to leave them on for the blog.
Conditional tags in custom_functions.php. http://gregrickaby.com/2009/06/use-conditional-tags-in-thesis.html
Excellent tutorial and easy tutorial. Thanks!
I did this and it works. Sorry about the newbie question but…since edits are done via the newly created home.php for a static home page:
1. I read in the Thesis forums that in order to set meta descriptions/titles for a static home page, I’d have to use the “Edit Page” option within WordPress to insert them rather than use the “Thesis Options” panel.
But since I’m using the home.php file to insert my html (rather than using the wordpress “edit page” to do that), where would I/how would I insert the meta descriptions and titles?
Thanks again!
The HTML that you’ve created for home.php, only goes in-between the header and footer. To change your SEO options, go and edit them in the WP Dashboard as normal. All home.php is doing is canceling out what you would put in the content box.
Thanks Greg! That was fast and so helpful! *One less thing for me to stress about*
Greg,
Beautiful! I really like it. I have one specific question, and a general inquiry.
Once the new homepage template is in place and selected as the one to control front-page, when I go back to the Thesis design options panel and change the site layout options (specifically column widths for a 3-column scheme) to these changes affect the newly created template or only (as I very much hope…) the remaining pages?
Here’s what I’m trying to do: Create a different layout for a) homepage and b) all other pages, where the differences between the two classes of pages are limited to:
1. Different column widths – “a” is one and all b pages is another fixes set of widths.
2. Content: Back pages perform their traditional functions (i.e., post, page, archive, search), all taking place in the respective content columns. However, the material that goes into the 2 sidebars of all “b” pages is different than the material that goes into the homepage sidebars.
Based on my limited knowledge of php and WP, if your solution above separates the newly created homepage template from the controls of the Thesis design options panel, then I have a way of creating the two layouts I’m looking for:
1. Thesis design options for all back pages
2. The new homepage template, w/ css code for columns and area design.
Is this how you’d suggest going about this task? Would you have some coding suggestions on aspects of this that might not be fully covered in your excellent tutorial?
I know that this is a rather long discussion… I hope you get a change to respond, however briefly.
Many Thanks!
Jordan
See above, I added some real-world working code. This should answer all your questions!
Greg,
Thanks for replying and you got my vote on the Montana website :-) It’s very well organized and the message comes across nicely!
I’m afraid I’m not quite there with php to see the ‘big picture’ applicability to what I’m trying to do – I understand some of the individual pieces, but not how I can apply the logic to my task.
Could you tell me please whether the *column-structure* of the product of your custom page template (the subject of this tutorial) ends up being controlled by the Thesis design options panel, meaning the default site layout, or does it become an independent page with its own layout settings?
I’m still not sure how to create 2 different page structures. Yes – I saw that the Montana candidate’s news page consists of 3-col while all other pages have two only. But I’m not following the code well enough to see where it’s done…
And, if you can take the time to address the overall question – how would you go about (“big picture”) addressing what I’m looking to do?
Thanks again!
Jordan
Greg,
I am a first time visitor to your site and based on your tutorial I have not only bookmarked your page, but took a HTML/CSS book for Dummies back to Barnes and Noble. Your instructions were fantastic. I am a newbie to the webdesign world so thanks again for such great instructions
So now I have a blank homepage. I have uploaded a file that I would like to use on my homepage. It is a file to create an ask campaign what I don’t know what to do is where I should actually put this file. I currently have it in my customs file, but I think I am supposed to put it somewhere else so that it actually executes something.
Tim,
Your newly created custom coded file, should go inside of /custom/.
Don’t forget Step 2…you have to call for it inside of custom_functions.php.
Been through a dozen of these tutorials, yours was the first to work. I created a custom blog page, just switched out every instance of ‘home’ with ‘blog’ and it worked! Now just have to figure out how to feed the content, make custom sidebars and switch the header graphic. Baby steps :) THANK YOU!
You’re welcome!!
Got it! Great! Thanks a bunch. This was so clear and easy.
Hi Greg, great tutorial. I followed it to a tee and it works, EXCEPT when I have my Feature Box custom code active. I placed a featured content gallery inside the Thesis Feature Box and when I display this the custom template won’t show up on the home page. When I comment out the add_action to place the content gallery in the Feature Box hook, then the custom page will show up. Is there some sort of conflict?
This is the code for the custom feature box:
function custom_featurebox(){
if (!is_page(array(1150,1268, 1259, 1264, 1260))) {
global $post;
include (ABSPATH . ‘/wp-content/plugins/featured-content-gallery/gallery.php’);
}
else { ?>
<?php
}
}
add_action('thesis_hook_feature_box','custom_featurebox');
Any help would be appreciated! Thanks.
Great comment, have you tried placing it in thesis_hook_before_content instead?
You mean the featured content gallery? I actually used to have it in thesis_hook_before_comment (before I tried making custom templates) but I had a need to move it to the Feature Box…because I need to swap the FCG with smaller, static images on different pages…and by putting it in the Feature Box it resized automatically to the size of the image…whereas this wasn’t happening in the before_content hook…also I was having a problem positioning the smaller images for some reason.
I will try switching the hook, just to see if that makes the difference. If it does, any tips on how to make it do what I want it to do outside the feature box?
Thanks for your time!
Hi Greg,
I just tried switching hooks and it made no difference. After switching to before_html I again commented out the code and the template then shows up. So it looks like it’s definitely something in the FCG code.
FCG is a hunk-o-shit. It’s still only WordPress 2.7 compatible. Did you try my other tutorial on how to make your own Featured Slider? http://gregrickaby.com/2010/04/how-to-create-a-featured-content-slider.html
Really? I’m running 2.92 and it seems to be running fine. I might give your tutorial a try though if I run into problems with it. Since it’s working OK now I have so many other things I need to dedicate time to.
By the way, I got the template working! I changed the function in custom_functions.php a little…replaced “else” with an “else if” statement and just specified each page. Also changed the !is_page and went with is_page() || is_front_page().
Seems to like this now. Thanks for your replies! Great site.
God Bless conditional tags, good work…this is what being a Thesis “Pro” is all about.
I love the tutorial. I have a question though. I want to use a background image that is 10px x 500px called bghome.png for the home page, and a different 10 x 500 images for the internal pages, called bgother.png. How do I put it into the CSS that the home page should used use bghome.png, and the internal pages use bgother.png as the background? Could I used an if then statement? This is a bit past my level of expertise. I don’t know how to code it. If you could help me out I would be forever appreciative!
Thanks,
Nadav
Use conditional tags! :) Copy & paste the code below into custom_functions.php
The code below says, “IF this is Page ID 2, then print home.css, ELSEIF this is Page ID 3, print about.css”. This will put a .css file in the WP_HEAD hook.
Hi, i can’t get your header script to work. It doesn’t appear in the head section. I’m on Thesis 1.8.
I changed the if statement to
if (is_home() || is_front_page()) { ?>
because i want an other background image in home.
Here’s the rest of the code:
<link rel="stylesheet" href="/custom/home.css” type=”text/css” media=”screen, projection” />
<link rel="stylesheet" href="/custom/custom.css” type=”text/css” media=”screen, projection” />
What have i done wrong?
Kindly Lillan
It should be like this (code fell off) – Sorry!
elseif ( is_page() ) { ?>
<link rel="stylesheet" href="/custom/custom.css” type=”text/css” media=”screen, projection” />
Ok, this worked for me UNTIL I set the site as a whole to have a 2-column format. I want to have two different formats: the home page is my custom design (a specialized 3 column format) and then the post pages are a 2-column format. What do I need to change? My home page (http://www.justinlong.org) is shoving the third column on the bottom of the 2nd, trying to put the sidebar in.
Hey Justin – It won’t matter how many columns you make Thesis. The custom_template will always override and fill the entire width of the Content Box.
Nice post, i use it to custom my site
My Site:
D?ch v? SEO, Qu?ng bá Web
Thanks for this technique, I’ve used it three time so far with no problems. I have one question though – My clients would like to edit their home page content inside the WordPress admin and NOT by having to edit home.php. Is there anyway to apply this same technique but make the home page content editable from the WP administration panel (e.g. edit the “home” page)?
I wish it were, but it’s not possible using this technique.
don’t lose your hope @O.C. Search Consulting there’s a way to do it ;)
create a simple page (e.g called homepage)
then in Settings select Reading->A static page (select below) and in Front page: option box select the homepage page you’ve create a while ago ;)
hope that helps
http://www.sutanaryan.com/ provides free wordpress online tutorials and freebies
Hi Greg, great work putting these tutorials together for all us noobs!
My question is about creating multiple templates. I want to be able to create upto a dozen individual templates to act as ‘home’ pages for various categories. I’m getting my head around how to use hooks & conditionals slowly, but am trying to work out how to make these templates more easily edited. Especially in regard to editing widget areas for each template – it would be great if this could be done from the widgets dashboard rather than having to write conditional hooks if you know what I mean! Some sort of select template when in widget edit to select which widget is being edited.
You know of anyway of doing this you could point me at?
Thanks,
Roo
Conditional Tags my friend
// Custom Page Templates function custom_page_templates() { if ( is_page('homepage') ) { include (TEMPLATEPATH . '/custom/pages/homepage.php'); } elseif ( is_page('food') ) { include (TEMPLATEPATH . '/custom/pages/food.php'); } elseif ( is_page('entertainment') ) { include (TEMPLATEPATH . '/custom/pages/entertainment.php'); } elseif ( is_page('tunes') ) { include (TEMPLATEPATH . '/custom/pages/tunes.php'); } elseif ( is_page('health') ) { include (TEMPLATEPATH . '/custom/pages/health.php'); } elseif ( is_page('business-directory') ) { include (TEMPLATEPATH . '/custom/pages/business-directory.php'); } elseif ( is_page('election') ) { include (TEMPLATEPATH . '/custom/pages/election.php'); } elseif ( is_page('news') ) { include (TEMPLATEPATH . '/custom/pages/news.php'); } elseif ( is_page('national') ) { include (TEMPLATEPATH . '/custom/pages/national.php'); } elseif ( is_page('world') ) { include (TEMPLATEPATH . '/custom/pages/world.php'); } elseif ( is_page('politics') ) { include (TEMPLATEPATH . '/custom/pages/politics.php'); } elseif ( is_page('business') ) { include (TEMPLATEPATH . '/custom/pages/business.php'); } elseif ( is_page('health') ) { include (TEMPLATEPATH . '/custom/pages/health.php'); } elseif ( is_page('science') ) { include (TEMPLATEPATH . '/custom/pages/science.php'); } elseif ( is_page('sports') ) { include (TEMPLATEPATH . '/custom/pages/sports.php'); } elseif ( is_page('technology') ) { include (TEMPLATEPATH . '/custom/pages/technology.php'); } elseif ( is_page('opinion') ) { include (TEMPLATEPATH . '/custom/pages/opinion.php'); } elseif ( is_page('photos') ) { include (TEMPLATEPATH . '/custom/pages/photos.php'); } elseif ( is_page('concerts') ) { include (TEMPLATEPATH . '/custom/pages/concerts.php'); } } add_action('thesis_hook_custom_template', 'custom_page_templates');http://codex.wordpress.org/Conditional_Tags
I think this conditional tags is not a good practice in dynamic wordpress pages ^_^
Can anyone please tell me how to add an image to the bottom of the pages like for example this site has?
http://candlewoodretreat.com/
I do not know a lot of CSS and have tried everything. I am able to get my background situated properly similar to the site above, have attempted widgitized footers, but there is still a blank white space at the end of my background at the bottom of the page. I am so hopelessly lost.
Working on localhost.
I’m completely redesigning my business website using Thesis before May 1st and I’m trying to create a completely custom Front Home Page and I’ve managed to get your code working, THANK YOU SO MUCH!!
My next challenge is how to get it to not use the #content_box but instead allow me to hide that and instead display my loops on a custom made 960 grid design. I’m cobbling code together and editing once I’ve learned to understand what it does! Can’t seem to get the .custom.home #content_box {background:none; } to work instead of displaying a background I just want it to see the pages background, not the content box.
Thanks Greg .. <3
Great tutorial! How would I go about removing the header as well? I’m trying to create a purely static HMTL page that will have a link to continue to the “home page” in WordPress.
Hello,
Thanks for the tutorial. I followed your directions and received the following error: ” failed to open stream: No such file or directory in”
Thanks
(Please forgive me if this is already asked and answered, but I didn’t see it.)
Wonderful tutorial! And once I figure out if I can use it, I’m gonna have at it!
I’m way down the road on my site, been up for many months now, and I didn’t realize about the Default Template vs. Custom Template issue. I am quite a newbie, so your patience is deeply appreciated!
Here’s my question:
My Home Page is set up exactly the way I’d like it (for now) and I’d like to create some additional templates. I am presently using these templates:
Default (which appears to be exactly the same as Custom)
Custom Template
No Sidebars
I would like to add a template that has a sidebar that does not include any of my present widgets, but instead has a Poll on it. (In addition to creating a new template, I also need to learn how to create the items on the template, such as the sidebar, for example. Any tips on that would be greatly appreciated!)
How do I keep my current home page template and create a new one? Right now it seems that the tutorial removes the existing Custom Template, which I assume will kill my home page?
Thanks Much!