How to add a custom section to Hestia

Hestia Pro now has a built-in area to add content and shortcodes directly between various sections on the homepage under WordPress Dashboard->Appearance->Hestia Hooks

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

<?php
/*
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="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:

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:  

hestia_before_about_section_hook

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

hestia_after_features_section_hook

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="http://google.com"] Click me [/su_button]</div>');

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:

Your outcome would be this:

Of course, you can add different types 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="http://google.com"] Click me [/su_button]

That's all there is to it, you can test out different shortcodes 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:  https://www.materialpalette.com/colors

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