So you’ve got Thesis for your WordPress site (and if you haven’t got Thesis yet go and check out Michael’s excellent Thesis review to find out why you should) and you want to use a static homepage to give your visitors a consistent experience when they visit your site. The problem is that you really like the look of Thesis’ teasers for showing updated links to your blog posts but Thesis doesn’t give you an easy way to add teasers to your static homepage.
So what do you do? You are using Thesis after all. One of the most flexible frameworks available for WordPress. There must be an easy way to set up static homepage teasers using Thesis hooks. Right?
Not exactly. If you’re looking for a simple line of code to tell Thesis, “Hey! Stick some blog post teasers over here on my static homepage!” then I’m afraid you’re out of luck. But with a few dozen lines of code and a little bit of know-how, you can do exactly that.
We’ll start by taking the code that Graywolf created for adding a Lifehacker-style carousel of your featured posts above your site’s header. We’re going to break this code down into its constituent parts and make a few simple tweaks so that we can use it to display these featured post teasers on your static homepage.
To start with, we’ll take the first few lines from Michael’s top_carousel function and rename it as home_carousel like so.
function home_carousel(){
global $post;
if (is_front_page ()){
}
}
You’ll notice that we’ve also set it so this function is only activated if the page being displayed is_front_page so that it will only appear on our site’s homepage.
Next we’re going to add in the “wrapper” that will contain our homepage teasers carousel so that we can add some visual styling using CSS once we’re done. Once again, this is simply a case of taking Michael’s original top_carousel code and changing the names to suit our new home_carousel instead. I’ve also added in extra line with a h2 title for the homepage teasers block which you can edit or remove completely as you see fit for your site.
function home_carousel(){
global $post;
if (is_front_page ()){
echo '<div id="homecarousel">';
echo '<h2>Featured Posts From Our Blog</h2>';
echo '</div>';
}
}
Now we can use the exact same query from Michael’s original top_carousel function to find our featured posts to display in our new home_carousel. If you prefer, you can change the query to look for a “featured” tag instead, but if you’re already using the top_carousel to show posts from a “featured” category elsewhere on your site you might as well stick with the category query to find the posts for your homepage teasers as well. One change that we will make here is to only show the 3 most recent “featured” posts because we’re going to put this in our content column and 3 posts will fit quite nicely, whereas 6 would take up too much space on our homepage.
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'3'
));
Next up we’re going to use the same code from the original top_carousel to define how to display the posts that our query just found.
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.YOUR-DOMAIN.com/wp-content/themes/thesis_18/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
Remember to change YOUR-DOMAIN to (you guessed it) your domain name and also check the rest of the path for where Thesis stores thumbnail images for your posts. If you’re using the current version of Thesis, v1.8, and you’ve left it in the default directory then you can leave it with thesis_18 but you will have to remember to come back to your custom function and change it whenever you upgrade to a new version of Thesis.
Last, but not least, we need to remember to clear the div’s that we’ve set for this function so that we can style it with CSS later. To do that we add the following line of code.
echo '<div style="clear:both"></div>';
Now we put it all together and we get.
function home_carousel(){
global $post;
if (is_front_page ()){
echo '<div id="homecarousel">';
echo '<h2>Featured Articles From Our Blog</h2>';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'3'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://YOUR-DOMAIN.COM/wp-content/themes/thesis_18/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
echo '<div style="clear:both"></div>';
echo '</div>';
echo '</br>';
}
}
Now that you’ve put it all together just copy and paste your code into your Thesis custom_functions.php file and then add the following line to activate the function.
add_action('thesis_hook_after_post_box', 'home_carousel');
This tells Thesis to add your new homepage teaser carousel after any post content in your homepage’s body but you can easily change this to move it to other places on your homepage. Check out the ever-useful Thesis Hooks Reference for a visual guide to which hooks go where.
Now that you’re function is in place the only thing left to do is add some styling to it using your custom.css file.
#homecarousel {border:1px solid #efefef; padding: 0px;padding-left:10px;}
#homecarousel h2 { font-size: 14px; font-weight: bold; text-align: center; }
.carouselu {width:150px;float:left;padding:3px;text-align:center;}
.carouselu IMG {border:2px solid #ccc;display:block;}
For the sake of this example we’re going to use the same CSS styling as Graywolf uses for his original top_carousel so that you can get a consistent look if you’ve just taken the sample code and used it on your site. The one addition I’ve made is the line that styles the h2 title element, making the font bold and centring the title within the homepage teasers box. If you’re feeling adventurous it’s very easy to make changes to Thesis’ custom.css to update the look of your homepage teasers.
In the case of the example screenshot here I’m using a 2 column layout with Thesis, which has given me extra room to increase the showposts number from 3 to 4. I’ve also made some changes to the custom CSS to match the overall design of my site. One of the great things about Thesis is how easily you can experiment with design changes using the built in Custom File Editor, which is so much quicker than changing and FTPing updated files over and over until you’re happy with the result.
Ken Jones is an Independent Online Marketing Consultant from Coventry in the UK who freely admits that he knows very little about programming, which is why he’s such a big fan of Thesis because it makes it so easy for people like him to produce great looking websites. You can connect with Ken and follow his stream of consciousness Twitterings @TheKenJones.
Related posts:
- How to Add a Carousel to Your Thesis Blog If you’ve spent any time visiting blogs lately chances are...
- How to Add a Visual Slider to Thesis The following is a tutorial on how to add a...
- Thesis Tutorial – How to Add Adsense Section Targeting Using Adsense on your blog usually isn’t the most profitable...
- Make Thesis Work Better With Digg and Facebook If you’re involved with social media sites like Digg, Facebbok...
- Thesis Tutorial – Adding Date Based Triggers to Your Posts There are a lot of times when you are working...
Advertisers:
- Text Link Ads - New customers can get $100 in free text links.
- BOTW.org - Get a premier listing in the internet's oldest directory.
- Ezilon.com Regional Directory - Check to see if your website is listed!
- Glass Whiteboards - For a professional durable white board with no ghosting, streaking or marker stains, see my Glass Whiteboard Review
- Need an SEO Audit for your website, look at my SEO Consulting Services
- Link Building- Backlink Build offers 45 PR5+ Backlinks for $295
- KnowEm - Protect your brand, product or company name with a continually growing list of social media sites.
- Scribe SEO Review find out how to better optimize your wordpress posts.
- TigerTech - Great Web Hosting service at a great price.
This post originally came from Michael Gray who is an SEO Consultant. Be sure not to miss the Thesis Wordpress Theme review.
How To Add Thesis Teasers To A Static Homepage
Postări
