How Do I Add a Featured Post Widget to the Homepage?

Hi There -

On our website alaina.8pecks.com we are looking to add a Featured Post area. We would like it to be on the homepage directly under the blue "email newsletter signup" bar (the first one at the top right below the slider). We had thought the theme we are using would have included such a widget, but unfortunately it does not.

We want it to be a fairly standard Featured Post area, with a large rectangular area for the Post's Featured Image and with text over on the right side of the Featured Image. Also, we'd like a title above the Featured Post area that reads, "Latest Blog Post".

Is there a plugin for this type of thing? A piece of code I can put into the functions file? Any advice would be greatly appreciated. Thanks so much!

  • Vaughan
    • Support/SLS MockingJay

    hiya

    1st you'll need to make sure your theme supports widgets and sidebars.

    there's thousands of articles on google regarding this. here's some

    http://codex.wordpress.org/Widgetizing_Themes

    http://codex.wordpress.org/WordPress_Widgets

    http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-adding-a-widget-area-to-your-theme-files/

    http://www.wpreads.com/2013/03/creating-custom-widget-area-in-wordpress-theme.html

    wordpress comes with many widgets to begin with, some of these will do what you want, you just need to add them to a sidebar, or widget area.

    for featured posts, checkout this plugin.

    http://wordpress.org/plugins/advanced-featured-post-widget/

    hope this helps.

  • Adrian
    • The Crimson Coder

    Hey thanks for the quick response. Before I dig into adding a widgetized area, I was hoping you could answer another question for me? I just installed SlideDeck 2 and was thinking of using it as a Featured Posts solution. There is a code they give you:

    <?php echo do_shortcode( "[SlideDeck2 id=XXXX]" ); ?>

    Which I could add to a "page template" and manually embed the Featured Posts SlideDeck anywhere. Problem is, I can't find the homepage "page template" in my theme files. Do you know the best way to use this embed code to put the Slidedeck on the homepage only and in the area specified in the initial support post above? Thanks so much!

  • Vaughan
    • Support/SLS MockingJay

    hiya

    sorry about the delay, the homepage could be a number of files, this depends on your theme.

    some use home.php, home-index.php

    what theme are you using?

    it's possible to also create your own.

    you would copt page.php (if you want a static homepage) then rename the copy home.php. change the template comments up top.

    <?php
    /*
    Template Name: Home Page
    */
    ?>

    that will then appear in the templates list when you create a page. you can then either use the shortcode above in your page, or by editing the template and using do_shortcode.

    if you let me know what theme you are using, if it's a free theme, i could download it and tell you which file is the homepage.

    thanks

  • Vaughan
    • Support/SLS MockingJay

    Hi @Adrian

    this wasn't as simple as i first thought with this theme. the way it builds the pages was different.

    But i have managed to work a solution if you want to test.

    I have actually created a new stack in the page builder called shortcode

    i have added this to the Home Page in pages.

    so if you go to home page in your dashboard > pages

    then edit the page

    look at the stacks, you will now see a stack called shortcode.

    open that stack up & you'll see a textbox where you can place your shortcode.

    just enter the shortcode as is

    [SlideDeck2 id=XXXX]

    then save the page.

    hopefully that should then display on the homepage in the position of the stack.

    you'll probably need to custom work the CSS.

    the default parent CSS for that stack block is

    .stack.stack-shortcode {
    }

    and the child CSS for that would be

    .stack.stack-shortcode .shortcode-pane {
    }

    let me know if this works for you ok. i have done some testing on my site, but i haven't tested every shortcode combination.

    hope this helps

  • Vaughan
    • Support/SLS MockingJay

    also note. because i modified the theme itself, if you update the theme these changes will be lost.

    the changes i made

    i added a new file to stack-theme/stacks

    stack-shortcode.php

    then i edited the file

    stack-theme/base/custom/types/page-builder/content.php

    just search for // shortcode in that file and you'll see the addition i made.

    i would suggest making a copy of these files, so next time you update the theme, you can re-apply the changes.

    hope this helps

  • Vaughan
    • Support/SLS MockingJay

    hiya

    just thought i'd mention.

    the CSS i gave you in chat. you can't use auto when using a percentage. you have to give it a fixed width

    so

    .stack.stack-shortcode {
          margin: 0 auto;
          width: 900px;
    }

    i think you can use text-align: center; if using a % width.

    cheers

  • Adrian
    • The Crimson Coder

    Hey thanks so much! The set width CSS worked perfectly. I ended up making it 858px instead of 900px just to match up with the SlideDeck width (just for future reference in case anyone visits this post). Thanks again for all your help I know this turned out to be a bigger pain in the A than initially thought, but you got it down perfectly!

    Best,

    AD

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.