Hey there from Themeisle.com.
My name is Robert and in this video, you are
going to learn how to add a custom section
to your Hestia lite WordPress theme.
See this video and the button below?
I've just added these between the Features
and About sections of Hestia.
Let me show you how it works.
First, you need to upload, install and activate
the child theme of Hesia.
It should be a zip file named hestia-child.zip
which you can download by accessing the link
in the description box.
Once you are done with this step, move to
the next one which will be to create a site-specific plugin.
Don't worry if know nothing about how to create
plugins, just follow what I do step by step.
Even a beginner can do it.
If you are using a Windows PC, right click
on your screen and then create a new folder.
Name it my-plugin, for example, and then open
the notepad app.
When creating the plugin file, the only text
really required is this, and you can copy
it from our theme documentation.
Link in the description box.
Just remember that the name of your plugin
after installation will be "Hestia Custom
Sections", as you can see in the PHP file.
What you need to do next is to save that file
as .php in the folder created earlier.
You should end up with something like this.
If you don't see the .php at the end of your
file name, rename it and type .php right after its name.
Close the file, right click on the my-plugin
folder and then click on Send to / Compressed folder.
Now you can see a zip file on your desktop
named my-plugin.
This is what you need to upload, install and
activate.
If everything went well and you were able
to activate that plugin, you need to install
another one named Shortcode Ultimate.
This is the plugin I will use to create the
sections.
Shortcodes Ultimate provides an array of great
shortcodes to use throughout your theme.
In this tutorial, I'll be using the Youtube
Shortcode and the button shortcode, obviously.
Some other shortcodes might require different
CSS to get them centered and would require
you getting aid from a freelancer.
One more thing left to do is to edit the plugin.
To do that, go to the plugin editor, choose
Hestia Custom Sections in the drop-down and
then click on Select.
Right below the line that says "Start Adding
Functions", paste the code provided in the
documentation.
You will notice that it already has some CSS
added to it so it will center the video and
format the text to suit the theme.
From the code above you can change the name
" new_section_1" to any name you like, but
make sure you change it in both locations.
After saving the changes, you can see a youtube
video before the about section in Hestia.
You can change that video by replacing the
youtube link in the code.
To change the location of the video on the
front page, change the hook.
All available hooks can be seen in the documentation
below this video.
The hook I used was "hestia_before_about_section_hook"
but if you want to add this custom section
before the features section, use "hestia_before_features_section_hook"
So, in the end, we will see something like
this on the front end.
If you want two different videos in two different
sections then you can add two similar blocks
of code by changing the hook and function
name.
Let's say you want a different video before
the testimonials section.
To do that, copy and paste the whole code
below the one added already and just change
the function name along with its hook.
Update the file and check how it looks on
the front-end.
We can see a video before the About section
and then another one before testimonials.
Cool, right?
Now let's add a button right below each video.
The steps are the same as seen earlier, 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.
Of course, you can add different types of
button designs as supported by Shortcodes Ultimate.
To see the different button features go to
the WordPress Dashboard
and navigate to Shortcodes / Examples.
Now, after saving the changes you can see
that everything we've done so far is live
on our website.
That's it for today.
If you have questions, please leave a comment
below and I will do my best to answer it.
Let me know exactly what you want to learn about Hestia
then check out other videos we publish weekly.
Make sure you are subscribed to our channel
and then click the bell to get notified when
we publish future tutorials for our products
and about WordPress in general.
See you in the next video.
