How to add a custom section to Hestia

Hestia is a very flexible theme that allows you to add custom sections to the homepage. This article shows the steps needed for adding a new section, text, image, and content to the Homepage, for both versions of the theme. 

Using Hestia Pro

1

Create the section you want to add to the homepage, using a plugin for this, or writing your own HTML / PHP code.

2

Navigate to Appearance > Hestia Pro Hooks and find the hook you need.

📝 Note: For a better overview of where the hooks are, navigate to Appearance > Customize and click on the Show Hooks button at the top of the page, or you can see the Hestia PRO's hooks here.

3

Add the new section's code into the text field and check the Execute PHP checkbox.

4

Go to the top of the page and click on the Save Hooks button.

🔮Examples

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

Step 1: Create the HTML / PHP code for such a section. The HTML code I would need is

<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>

📝 Note: Make sure to replace https://localhost/shop/ with the link to your shop page.

Step 2: Add it to the After Shop Section Container hook. 

The result would be:

•  Add a FAQs accordion section after the Team section

Step 1: Using a plugin like Shortcodes Ultimate Plugin you can create a new section by going to Shortcodes > Available Shortcodes. 

Step 2: 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:

Another proper and easy way to add  custom front page sections using Hestia Pro is through the hooks.

🔮Examples

• adding a location using Otter Blocks ( Maps ) and the Before Shop Section Hook

📝 Note: Here is a guide that explains how to use the Custom Layouts of Hestia Pro.

Using Hestia Free

📝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.

⚙️Small setup

Step 1: Create a child theme for Hestia.

Step 2: If your site is up and running already, we'd advise you to create a site-specific plugin, see here how to create a site-specific plugin. When creating the plugin file, the only text really required is:

<?php
/*
Plugin Name: Hestia Custom Sections
Description: Adds custom sections to Hestia's front page.
*/

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

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.

📝 Note: All the available hooks of Hestia can be seen here.

1

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="https://www.youtube.com/watch?v=pYOJNOJfJxU"]</div>');
	
}

add_action( 'hestia_before_about_section_hook', 'new_section_1' );

You should have something which looks like this:

2

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:

📝 Note: 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.

The hook used above was:

hestia_before_about_section_hook

🗂Useful Resources

Adding two different videos

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:

📝 Note: 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

The steps are the same as above, we just need to change the CSS a bit and the shortcode. 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="http://google.com"] Click me [/su_button]</div>');

📝 Note: The link the button points to in this case is google.com 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:

The outcome would be this:

🎥 Video - Hestia Custom Section