Move Featured Posts to the Top of your Blog


Note: The API is currently in beta. Some things in the post may change as Ghost solidifies how the API will function.

If, when you feature a post, you want it to move from any position to be at the top of your blog, below is how you can do that using Ghost's {{get}} helper.

Note: One caveat is that there isn't any way to keep the pagination the same, so, if your pagination is 5, and you have 5 featured posts, the home page will have 10 posts and the rest will have 5. If we find a way to change this, then we will update the article, but as of right now, this is the only way we can figure out how to do it.

  1. Go to up your theme files and open up either your home.hbs file or create a home.hbs file at the root of your Ghost theme. Copy and paste what is in your index.hbs file and paste it into the new home.hbs file.

    The reason we are using home.hbs is that we only want it to do this on the very first page.

  2. Right above the {{#foreach posts}}, we are going to add in the get helper code to grab all featured posts. Your get helper code should be this:

    {{#get "posts" filter="featured:true" limit="all" as |featured|}}
    
    
    {{/get}}
    

    Inside that get code is where all your html output should be. Whatever stylings and stuff you would like. Here is what the full code looks like using the Casper theme:

  3. Now, inside the regular loop in the home.hbs and the index.hbs files (or partial file if thats what is looping through your posts), we need it to ignore all featured posts as they are already on top using {{^if featured}}.

  4. Restart Ghost and you should see your featured posts on top!

Click on the github link at the top of the page to see the full code we used using the default Casper theme.

3. Now, inside the regular loop in the `home.hbs` and the `index.hbs` files (or partial file if thats what is looping through your posts), we need it to ignore all featured posts as they are already on top using `{{^if featured}}`. 4. Restart Ghost and you should see your featured posts on top! ![](/content/images/2015/11/featured.jpg) > Click on the github link at the top of the page to see the full code we used using the default Casper theme.