WordPress – Adding Teaser in Static Front Page of Thesis Theme

One of the great feature in WordPress Thesis theme is the teaser box. It is very configurable using the Thesis Design Option in WordPress administration page. However you cannot easily add it in any part of the blog, like in the static home page.

This was just what my client requested to have in his blog. He ask me to add the teaser box below the content in static page of his blog. I Googled for tips in the web on how to integrate it in Thesis OpenHook or in the custom_functions.php file, but there are not much helpful information about it. I am surprised how rare it is to find in the web, or maybe I am not just searching deep enough.

Luckily I found some tips that is very helpful. I wanted to share it to you here.

1. Make sure that the teaser will only appear in the static page.
First thing to do, using Thesis hook, I need to be sure to display it only in the static page. I will use the WordPress is_front_page(). The is_home() will somehow not work in static page. The is_front_page() will check whether the page that are being viewed is the front page.

<?php
if (is_front_page())  {

}
?>

2. Use the teaser_box CSS style.
Second I would like to use the usual stylesheet of the teasers used by Thesis theme. So it means putting the whole teaser post inside the teaser box. In this example I will add the DIV tag with teaser_box css class inside the is_front_page() condition.

<?php
if (is_front_page())  { ?>
    <div class="teasers_box">

    </div>
    <?php
}
?>

3. Create an instance of the WP_Query().
The next thing to do is to create an instance of the class WP_Query(). This class will allow me to query the blog posts.

<?php
if (is_front_page())  { ?>
    <div class="teasers_box">
        <?php
        $posts = new WP_Query();

        ?>
    </div>
    <?php
}
?>

4. Specify the posts to query.
Next is to specify the posts that I only need for my teaser. There are many ways to achieve this. Note that in my example I used three variables.

The $paged is make the query adhere to paging rules, the $sticky is for exclusion of the sticky posts and the $args is to consolidate this two properties.

This is not the only options you can get. To learn more about query posts visit this link.

<?php
if (is_front_page())  { ?>
    <div class="teasers_box">
        <?php
        $posts = new WP_Query();
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $sticky = get_option('sticky_posts');
        $args = array('ignore_sticky_posts'=>1,
              'post__not_in' => $sticky,
              'paged'=>$paged
          );
        ?>
    </div>
    <?php
}
?>

5. Query the posts.
Now I have to use my arguments to query the post. Using the while loop of PHP we can extract all the posts one by one.

<?php
if (is_front_page())  { ?>
    <div class="teasers_box">
        <?php
        $posts = new WP_Query();
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $sticky = get_option('sticky_posts');
        $args = array('ignore_sticky_posts'=>1,
              'post__not_in' => $sticky,
              'paged'=>$paged
          );
        $posts->query($args);
        while ($posts->have_posts()) : $posts->the_post();

        endwhile;
        ?>
    </div>
    <?php
}
?>

6. Query the posts.
Last but not the least, we can finally use the thesis_teaser() function of the Thesis theme to show the teasers.

<?php
if (is_front_page())  { ?>
    <div class="teasers_box">
        <?php
        $posts = new WP_Query();
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $sticky = get_option('sticky_posts');
        $args = array('ignore_sticky_posts'=>1,
              'post__not_in' => $sticky,
              'paged'=>$paged
          );
        $posts->query($args);
        while ($posts->have_posts()) : $posts->the_post();
            thesis_teaser('teaser', 'false', 'true');
        endwhile;
        ?>
    </div>
    <?php
}
?>

All I need to do now is to add it to the proper Thesis hook.

Just message me if you have questions, comments or suggestions.

Source 1, Source 2, Source 3

You can leave a response, or trackback from your own site.

18 Responses to “WordPress – Adding Teaser in Static Front Page of Thesis Theme”

  1. [...] This post was mentioned on Twitter by Pierre Amparado, Pierre Amparado. Pierre Amparado said: WordPress – Adding Teaser in Static Page of Thesis Theme -http://mindleaks.com/wordpress-adding-teaser-in-static-front-page-of-thesis-theme/ [...]

  2. wyndham says:

    Thank you very much for this very useful tutorial, much appreciated.

  3. Benjamin says:

    THANKKKKS, it’s so difficult to find thesis tips that are up to date ! Luckily this one is working like a charm with thesis 1.8.

    Now I just need to find the args for WP query to do what i want (list all categories, which shouldn’t be difficult and list all post from the current post category, except the one being currently displayed)

    Cheers,

    • MindLeaks says:

      You are welcome!

      Yes you are right. I really had a hard time finding a good tutorial for this one. This is the reason why I posted this to help the others and also for my own reference someday.

      You can find a good information in the WordPress codex.

  4. Benjamin says:

    Hi again,

    In the meantime i’ve used your code and there is a “styling” issue with it :
    - only using the doesn’t render this “custom query” teasers the same way as Thesis would to for a category display (Thesis seems to use a lot of other styles for each boxes)

    I’ve looked at the “loop.php” Thesis function generating the code but it’s too complex for my small skillset ;-)

    Do you know how to make it “100%” Thesis like ?

    Cheers,

    • MindLeaks says:

      For styling issue you need to look the CSS code behind the “teaser_box” div that you are using. Chrome browser has a tool that can help you to look if the DIV you are using has a proper styles, as well as the Firebug plugin in Firefox.

      May I know the url of your site?

  5. Benjamin says:

    Oops, comment issue, the phrase should read :
    - Only using div class = teasers_box doesn’t render the same as Thesis

  6. Denise says:

    Can I select 4 posts instead of a query? I am very knew to this as i developed my website with plugins and widgets. I am trying to add a read more at the bottom of a page (not home page) with 4 posts.

  7. David says:

    I have just setup this code on my website at http://www.salonsuccesswebsite.com

    It is displaying my recent posts. However it is not rendering them on the page quite right. If you look at the home page you will see that it has put empty gaps between some of the teaser posts being displayed.

    Have you any suggestions to fix that?

    • MindLeaks says:

      Hi David,

      Thank you for commenting.

      If you notice, each teaser boxes of your site has different height. This is the reason why it is giving an empty space. I would suggest that you assign fix height of these boxes.

      Right now in the CSS of the teaser boxes you have the following styles.

      .teasers_box .post {
      float: left;
      margin-left: 4%;
      margin-top: 10px;
      width: 45%;
      }

      Add height style in it like below.

      .teasers_box .post {
      float: left;
      margin-left: 4%;
      margin-top: 10px;
      width: 45%;
      height: 250px; /* add this */
      }

      This should fix your problem.

      Let me know if you have questions.

      Thanks,
      MindLeaks

  8. ELowe says:

    This was just what I needed… thanks.

  9. DjPunchnTag says:

    awesome tut! thanks! so much! :D

  10. taylor says:

    Hi!

    Thanks for your post, I’ve been trying really hard to figure out how to do this and while I’m OK with CSS I get pretty lost when it comes to hooks and custom functions. What do you mean when you say “add it to the proper thesis hook?”

    I’ve opened my custom_functions file in NetBeans and added the code above to test it before uploading to my site (I’m petrified of messing something up and crashing the whole thing) but NetBeans seems to be saying there is an error with the code so I’m hesitant to upload it to my FTP.

    Also I have custom formatted my teasers in the css editor, will this script adhere to those changes? or will it default to thesis standard? Thanks in advance for your time!!!

    Taylor

    • MindLeaks says:

      Hi Taylor,

      In Thesis, you can insert or replace the customizations in any part of the site by using hooks. Example is if you want to replace your website header design you will utilize the “thesis_hook_header” hook. Use the remove_action and add_action to remove or add the existing value of the hook. Visit this link to learn more about Thesis hooks, http://diythemes.com/thesis/rtfm/hooks/.

      What I mean about “add it to the proper hook” is that add the code to the proper hook that corresponds to the right section of your webpage where you want it to show.

      It is important to identify first what hook is tied to what section of your website. For the teaser it is usually the tied to “thesis_hook_after_teaser”. Then put the code to a PHP function of your custom_functions file. For applying the function to the thesis hook see this example http://diythemes.com/thesis/rtfm/hooks/thesis_hook_header/.

      In this tutorial I am using “teaser_box” class. Other than that the HTML product should be using default classes and IDs. If your CSS is using the default classes for teaser then it should adhere to your custom CSS. If not you’ll just have to update it with what you have in your CSS.

      Thanks!

  11. Johne428 says:

    It is rare for me to uncover something on the web thats as entertaining and intriguing as what you have got here. Your page is sweet, your graphics are great, and whats much more, you use source that are relevant to what youre saying. That you are undoubtedly one in a million, well done! cddeggfcfeef

  12. If some one needs to be updated with most recent technologies after that he must be pay a quick visit this website and be up to date everyday.

    Look at my blog pest control cost rats

Leave a Reply