Custom Featured Post Styling


Ghost has the ability to feature a post built in, but it is up to the theme to actually take advantage of what to do with featured posts. If a user features a post and there is no specific theme markup for it, then nothing happens.

The most common use of a featured post is to sticky it to the top of the lists of post and sometimes style it a little differently to make it more prominent. I am just going to create a very basic example to show how to do this.

Here is my current index.hbs file:

{{!< default}}

{{! The big featured header on the homepage, with the site logo and description }}
<header class="main-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
    <div class="vertical">
        <div class="site-head-content inner">
            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
            <h1 class="blog-title">{{@blog.title}}</h1>
            <h2 class="blog-description">{{@blog.description}}</h2>
        </div>
    </div>
</header>

{{! The main content area on the homepage }}
<main class="content" role="main">
    <div class="index-wrapper">
        <div id="content" class="col-md-9">
            {{#foreach posts}}
            <article class="{{post_class}}">
                <header class="post-header">
                    <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
                </header>
                <section class="post-excerpt">
                    <p class="post-info">{{date published_at format="DD MMMM, YYYY"}} - {{tags separator=", " prefix="Tags: "}}</p>
                    <p class="post-words">{{content}}</p>
                </section>
            </article>

            {{/foreach}}

            {{!! After all the posts, we have the previous/next pagination links }}
            {{pagination}}
        </div>
    </div>
</main>

All of the work we are going to be doing is inside of the main class. Currently the main class loops through each post, and displays the post information and the content. We are going to create a second loop to check first for a featured post. Here is that loop:

{{#foreach posts}}
    {{#if featured}}
        <article class="{{post_class}} featured">
           <header class="post-header">
               <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
            </header>
            <section class="post-excerpt">
                <p class="post-info">{{date published_at format="DD MMMM, YYYY"}} - {{tags separator=", " prefix="Tags: "}}</p>
                <p class="post-words">{{content}}</p>
            </section>
        </article>
    {{/if}}
{{/foreach}}

In the loop above, I am looping through all posts, then checking to see if they are featured, and then adding an extra featured class so I can style it differently than the rest of the posts.

So, in your index.hbs file, you are going to put this loop we just created first, so the featured posts will always be on top, and then the non featured posts below.

There is one final change we have to make. Since we are putting the featured posts on top, we need to remove them from the next loop. We do that by using {{#unless featured}} within the loop.

Here is what the final code would look like for the main section of the index.hbs: