Wordpress: Astra Pro & Elementor - Hooks Tutorial

WordPress: Astra Pro & Elementor – Hooks Tutorial

Views:7536|Rating:4.93|View Time:12:9Minutes|Likes:150|Dislikes:2
Learn how to harness the power of Astra Pro’s Hooks function to add unique content to your WordPress pages without the need to get your hands dirty with code.

A simple but powerful method of setting up simple hooked content or get more advanced with applying some simple conditions to manage and where your content can be seen.

Tie on the power of Elementor Page Builder to get even more creative with your hooked content.

Astra Pro:

Free tutorials for WordPress, Slider Revolution and Visual Composer. New tutorials added every Wednesday.

Take your WordPress website and skills to the next level!

If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.









SUPPORT: Our website offers additional information and perks. Please check it out!

Speed Up Your WordPress Website in 30 Seconds or Less!!


hi and welcome to another episode of piece Meg TV in today's video for WordPress we're going to be jumping into the Astro Pro theme and take a look at what are the specific features now the Astro Pro theme has been gaining a huge amount of traction recently due to the fact that it's a very versatile theme it's also incredibly quick to load we're gonna take a look today at how we can work with hooks now a cupboard hooks in the ocean WP theme recently and founded an incredibly powerful way of being able to inject content or code into your theme now Astra does it in a very similar fashion and today I'm going to take you through and show you how you can use the same kind of functionality inside your theme if you use Astra as opposed to ocean WP so let's just jump in the WordPress and take a look at how we can do all of this right now so created a basic page and we're gonna use this as the basis for creating our hook so as you can see it's a normal page you've got titled the top header some call-to-action information a couple of columns typical kind of layout what I wanted to do is inject this particular design into the area between the Astra theme header and the actual content itself now we could obviously do this on a page-by-page basis but that can kind of go a little bit long-winded and also becomes a lot more complicated if you want to start using the loop inside WordPress so if you want to put this at the top of all your blog posts for example it's not quite so easy unless you custom make each blog post so the use of hooks really does open up a great range of different things we can do to inject content into our designs so to do this we jump back into the dashboard of WordPress and the way that Astra works in this is we need to come down and choose the Astra option so we can do appearance I'm gonna come down to Astra and what's the open eye laughter you because you've got a couple of tabs at the top that allows you to various different things now yours may differ slightly depending upon the plugins that you've got added in or whether using the free theme you're going to see different options at the top of this section what we want to do is we look at a custom layouts so gonna jump out of that and that gives us the option now to create some custom layouts and apply those through each individual page so we do is when I click on add new and you can see this now opens up an editor that allows us to go to start creating content now I've got element or an elemental Pro installed and that really does help create more rich engaging content because you can use the elemental editor to create the different sections you want to inject into the actual design itself using hooks and that's what we're going to do in this one now you're not limited to only dealing with sort of static HTML content or content that you use through the elemental editor you can actually call up PHP code and inject that into the design itself now that goes beyond what I want to cover today but just be aware that this is something you can do I recommend check on the documentation on the hooks and the Astra website that will give you a lot more information about how you can start using PHP as well as HTML code so let's create a simple banner a call to action section at the top to say for example it's a Black Friday sale or something like that so we're going to call this sale header we're going to do is gonna set some basic parameters that we knew we're just gonna come down we're gonna say we've got the option for custom layout settings now before we do that let's go and create the content so let's just quickly publish this so we can save any changes including the title you can see we've got enable code edit if we want to start working with code we can do that and as part of the Astra theme what we're gonna do though is we're going to come into the edit with element or option open that up and we're gonna start creating some basic content so before we do anything more let's save this out and let's do a couple of other things before we save it i jus want to change the template from with the default template that we're gonna change that to elemental canvas now the reason we're doing this I don't need the header or the footer or anything else this part of the template I just want a blank plain template obviously I've got elementary store so this is part the elementary store you may not have this if you're not using elemental however I would recommend using the element or free version just to give you so much more functionality a much more visual way of working to create these hook up or content areas so let's set the element of canvas and let's just click on update that will now update it make sure we save all the changes and we can now go in and start working with elemental so let's click on that and let's just jump in and start taking a look at created our basic sort of layout now I am gonna keep this really really simple all we're going to do is gonna click and add a section in there we're for one row section in and we're just gonna simply create a sort of call to action kind of thing so in there we're just going to come over and we're going to drop in a simple title I will just come back and we'll specify just some text underneath that so we're gonna do is simply set some information here and we'll call this Black Friday big sale I will leave the text and leave that's that's fine I'm not too worried about what's going on in there let's just quickly style that a little bit just we can make it a bit more interesting so we'll just set this to be a dark gray will set the typography in there we'll just go in and we'll say we're going to use Monserrat we'll just put that to be uppercase we'll just simply come over and we'll set to be center-aligned and finally we're just gonna bump the weight up on that to make it stand out okay so we've now created our simple sort of header let's just send to this as well just so it looks all nice and neat and tidy so I'll send that and finally we're gonna cut to this row now we're gonna do is we're gonna give this a background color so let's just create something that just stands out a little bit it doesn't matter too much we're gonna do one there so let's just go for a really pale green so that'll look really quite horrible but it gives you an idea so it hit save on this we've now created what we want to be our little banner pop-up let's do one more thing as well let's come in ours just specify let's just animate this just so we can make it really pop off the page let's jump to advanced I'm going to do is we do an entrance animation and we'll just say let's just bounce down so that'll kind of draw attention to what's going on so we'll hit save what we've done that we're gonna jump back out of this so we just go back to the dashboard and let's just update that page to make sure thing is saved nice and neat so now we've created the layout for our hook but we haven't actually hooked it into anything so the next thing we need to do is hook this into our design specify where we want it so this is where the custom layout settings comes into play at the moment you can see it's got the option for select so we click on there we can now select various different areas we want to hook this into it might look quite basic and until you choose something it is kind of basic so we're gonna do is we want to say we want to use the hooks so click on hooks and that expand it out and give us quite a lot of functionality we can do things like we can set up exactly what action is gonna happen the priority of it what user roles can see this what page to display it on we've got a real huge amount of control of exactly where it's displayed and we keep it simple but I'm going to give you some explanations of what each of these different things do so first of all we got action so in other words where do we kind of want this to appear on our page now you can see we've got areas like the head the header the content if we scroll down through this we've got comments sidebar footer and underneath each one of those sections you can see we've got a range of different places we can position it inside that particular parent element so for example in the header area we can do body top header before masthead top and so on if you're not sure what the terminology is being used here is I would recommend just trying it to get yourself familiar what about each one of these different content area sections actually refers to that look at you a good idea but women24 this is we're gonna keep this simple I'm gonna say body top and you can see we've got priority so if we you'll it use in various different hooks we can set a priority to specify which ones are gonna have a higher priority and a lower priority how they display and so on next up we've got spacing for top and bottom so we can assign some spacing elements in there and you can see with various different options on here we've got a little question mark that tells us exactly what this function does so if you're unsure take a look at that little pop up tip and it'll tell you what that particular functional option does next up we've got where the real power of this starts to come into play that's to display on section so you can see if we click and expand that out we've got a range of different options on this we can specify do we want this to be on the entire website on singulars on archive pages on the 404 page and so on so again you can see we've got a ton of different options available to us in there and you're not limited to just one action you can build at multiple different actions so you could say you want this in the 404 page and you want it in the search page and you wanted the data archive and so on well you can just build those up so we could say for this example go for entire website but you can see we've got add display rule and add exclusion rules so if we wanted to we can add additional rule so we can add a second and a third and so on sometimes it makes my much easier to add the exclusion than try to add all the variations where you want something to display so you could easily use the add exclusion rule so let's just get rid of that first one and say add an exclusion rule you can see it now says do not display on in other words which pages do you not want to display on so you can use whichever logic kind of works true for you whatever makes it the easiest so again let's just delete that from there we've also then got the user roles so again you can see we can open that up and you can see we can go in and we can choose to have basic so that's for everybody for only log didn't people or only logged out people so you can have different kinds of messages you know sign up today for example for a 20% discount well if someone's already signed up and logged in you don't really want to display that information to them well you can choose logged in and logged out and you can see you can choose to display it administrator editor contributor and so on and if you've set up your own custom rules in there your own custom roles for example for different people then that will pop up and then lay the choose what what option is available and what people can see the different sections that you put in through the hooks again you can see we've got add user rules so we can easily come in there and we can set multiple different rules just by clicking on add user rule so we can really get down and fine-tune exactly who can see what we put on them and that's really all there is to it so what we've done is we've gone through and specify we won't use the hooks option we want to tie this into the body top we've got a priority of 10 we haven't applied any space in we want to display this on the entire websites that every single page we create will have this information on it and we can have the user roles so we can go in there and we can say for example we want everybody everybody can see this so let's just update the page and that's now completed what we need to do so we jump over to the front end of the site refresh the page we'll take a look at what this looks like ok so let's refresh the page and you can see now our banner pops in right at the top now if you find that not in the position you want you put in the wrong place it's easy to update just simply come back in come back to the action section and we're gonna do is we're gonna scroll down and we gonna say content before which is where I wanted to be click on update jump back over to the site and reef fresh and you've seen now that sits in between what will be our navigation and header bar at the top and the actual content itself so very easy to move it around if we wanted that to go right down the bottom for example about the footer or we can easily come back in and we can choose footer before footer update our page scroll to the bottom and refresh and there's our animated section placed exactly we want to be without them to go in and actually edit any of the theme or any of the pages we can simply hook that into exactly what we want so it really is incredibly powerful brought up very very easy well that's all I wanted to show you I want to show you exactly how these hooks work inside Astra as opposed to working with the ocean WP I hope you found the video useful if you did please give it a thumbs up and smash that subscribe button to be kept up to date with all the new content we add every single week any comments questions or feedback on this video or anything else cap on the channel please pop those in the comment section below and until next time take care

11 thoughts on “WordPress: Astra Pro & Elementor – Hooks Tutorial

  1. Paul, is there a way to have a section display the first name of logged in user? For example a separate block with “Hello” followed by the first name of logged in user,

    Looking to create a custom page for registered users for special adds and things of that nature!

  2. Hello Paul, To create hookable content can we use Elementor free version or is mandatory to use the PRO version? I am asking because I noticed that you are using the canvass template provided by Elementor and not sure if that is the free version or not.

Leave a Reply

Your email address will not be published. Required fields are marked *