How to add a custom section to Hestia

This doc shows the steps needed for adding a new section, text, image, content, etc... to the Homepage. 

Using Hestia Pro

Hestia Pro has a great number of hooks that can be used to easily add new content on the homepage. The hooks are listed in Appearance > Hestia Pro Hooks. See below an example of how you can use them to add a new section on the homepage.

Step1: Create the section

The first step is to create the section you want to add on the homepage. You can either use a plugin for this or write your own HTML/PHP code.

Step2: Hook the section

The final step is to actually hook the section you've just created in Hestia Pro's homepage. To do that, you need to go to  Appearance > Hestia Pro Hooks, find the hook you need, add the new section's code and click on “Save Hooks”.


1. Add a Shop for more products button after the Shop section.

The HTML code I would need is this(make sure to replace https://localhost/shop/ with the link to your shop page):

<div class="container" style="text-align:center;"><a class="btn btn-primary" style="width:100%;" href="https://localhost/shop/">Shop for more products</a></div>

And I would add it in the After Shop Section Container hook. Make sure to also check the Execute PHP toggle.

The result would be like this:

2. Add a FAQs accordion section after the Team section

Using a plugin like Shortcodes Ultimate Plugin you can create a new section by going to Shortcodes > Available Shortcodes. Copy the shortcode you want, and paste it in Appearance > Hestia Pro Hooks, in the hook that best fits your needs. For this example, we've used the After Team Section hook.

This is the result:

Here is where you can see the Hestia PRO's hooks

Using Hestia

Note: Hestia Lite guide assumes you have knowledge of FTP and how to edit your website's files. In the guide, we will only add a few types of sections using the Hestia Hooks and provide the code to get them centered. If you try to add your own shortcodes by following this guide and seeing they are not centered then you would need to add your own CSS/HTML to fix the issue or contact a freelancer if you need assistance.

Step 1.

Install the Shortcodes Ultimate Plugin, this is the plugin we will be using in this guide to create the sections. Shortcodes Ultimate provides an array of great shortcodes to use throughout your theme. In this tutorial, we will be using the Youtube Shortcode and the button shortcode. You can check out the Shortcodes ultimate "Examples" menu to see the shortcodes they provide, as mentioned we are only going to add two section types in this tutorial. Some other shortcodes might require different CSS to get them centered and would require you getting aid from a freelancer.

Step 2.

Create a Child theme for Hestia

Is your site up and running already? In this case, we'd advise you create a site-specific plugin, see here: How to create a site-specific plugin

The video below also shows how to create a site-specific plugin:

When creating the plugin file, the only text really required is:

Plugin Name: Hestia Custom Sections
Description: Adds custom sections to Hestia's front page.

Save your plugin file changes and then activate it. Now we're ready to add some custom sections.

Step 3.

In the functions.php file of your Hestia Child theme OR in the plugin file you just created for your site specific plugin you will need to create a function and then attach that function to the Hestia hook you wish to use.

Paste the following code, in the file, you will notice that it already has some CSS added to it to center the video and format the text to suit the theme:

function new_section_1(){
echo do_shortcode('<h2 style="text-align: center;font-family: roboto slab;font-weight: bold">YouTube Video</h2><div style="width: 60%;margin: 0 auto;">[su_youtube url=""]</div>');

add_action( 'hestia_before_about_section_hook', 'new_section_1' );

You should have something which looks like this:

From the code above you can change the name " new_section_1" to any name you like, but be sure to change it in both locations:

The code above adds a youtube video before the about section in Hestia, you can change the video shown by changing the youtube link in the code. To change the location of the video on the front page, you can change the hook.

All available hooks can be seen here: Hestia available hooks

The hook used above was:


Let's say we wanted to instead add this section below the features section, we'd simply change the hook to:


So, in the end, our code would look like this:

If we wanted two different videos in two different sections then we can add two similar blocks of code by changing the hook and function name. Below we are adding different videos before the about section and before the shop section:

Pay attention to the numbered arrows to identify the changes made, you can repeat this step to add as many video sections you like in different parts of the front page.

Adding buttons

Now that we've shown how to add a video we will add a custom button. The steps are the same as above, we just need to change the CSS a bit and the shortcode. The Shortcodes Ultimate plugin offers a lot of different button designs, 

To add a button and center it, use this code with your function and hook of choice:

do_shortcode('<div style="width: 100%;margin: 0 auto;text-align:center">[su_button radius="square" url=""] Click me [/su_button]</div>');

The link the button points to in this case is but you can change it to anything you like.

If we wanted to add a button below our video in one of our custom sections then we can simply add the new block of code beneath the old one, your code would look like this:

Your outcome would be this:

Of course, you can add different types of button designs as supported by Shortcodes Ultimate. To see the different button features go to WordPress Dashboard->Shortcodes->Examples

The button above was created with this shortcode:

[su_button style="3d" size="18" background="#d50000" url=""] Click me [/su_button]

That's all there is to it. You can test out different shortcodes from Ultimate Shortcodes to add your custom sections. Check out the Shortcodes Ultimate's cheat sheet to see accepted button parameters. We recommend you keep the Material Design flow of the theme if you plan on using buttons you could find all Material Design colors and their hex code here:

Note: This article assumes you have a little knowledge of coding and how to edit your website files. As mentioned before, there might a need to contact a freelancer as we cannot aid in all requests regarding custom coding.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.