Using Hooks to Customize Your Pagelines Framework BrandNav

So a few months back I decided to become a Pagelines Developer. I had already been using the framework to build custom themes for myself but soon I realized if I wanted to move past some of its styling limitations, I needed to understand exactly how hooks work. For those that don’t know, hooks are small bits of code which you can use to modify or add to a WordPress CMS without editing its core files. It’s a little like creating a child theme in CSS only with PHP.

Pagelines is a great framework to work with when theme-ing. Not only is it very stable, it also integrates well with many plugins. In addition, it comes bundled with a customization plugin which you can use to extend your theme using separate style.css and functions.php files, just like a child theme. These files are what you would use to add your custom code in.

Let’s say for example you would like to customize the positioning of your branding elements in the header. One of the limitations with the branding area of Pagelines right out of the box is that can not have a custom logo and the navigation set inline. This is because the Branding and Navigation sections are separated by default. In order to do so, you’ll have to remove them from the header area and replace them with the BrandNav section. But you’ll quickly notice that once you do, you lose some of the existing functionality that is built into Pagelines, including the ability to show and hide your search field and social icons using the dashboard interface. In order to re-embed these elements in your branding area, you’ll need to use hooks.

This link contains an updated list of all existing hooks for the Pagelines Framework: http://api.pagelines.com/hooks. What we are looking for are hooks that will allow us to add a search field underneath the navigation section and the social icons underneath the search field. The two hooks we are looking for are ‘pagelines_inside_bottom_brandnav’ and ‘brandnav_after_nav’ (if you would like a visual representation of where these hooks are located on your page, please download and activate the Action Map plugin). You’ll also need to download and activate the Pagelines Customize plugin, then click on the plugin’s edit link and navigate to the pagelines-customize/functions.php section located to the right of the page in order to bring up the functions.php prompt.

We can now use our hooks to create the code needed to embed the social icons and and search field. First, we’ll begin with the social icons by creating an action to add the hook ‘brandnav_after_nav’ and create a function called ‘brandnav_icons’ to call the html code needed to embed the social icons:

So what’s next? Well, once you’ve updated the functions.php file and navigate to the front page of your site, you’ll notice that we have successfully added both the icons and search field, however, we’ll need to add some custom css in order to position things properly as well as ad some additional functionality to the icons for the rollover effect.

Click on the pagelines-customize/style.css link to navigate to the stylesheet prompt. Here we can add the code that will position your search field to the far right of the of the branding area just below the navigation:

Once you’ve updated the styles.css file and navigate to the front page of your site, you should now have something that looks similar to this:

And that’s it. You can add additional social icons by updating the functions.php file accordingly. Hopefully this has helped you understand a little as to how hooks can be used to customize and add more functionality to your Pagelines theme. I’ll be posting similar Pageline customization tutorials in the future so please bookmark this site to stay tuned.

Hi Carmen, if you go to the Pagelines store, you can download a free plugin called “Simple CSS Lite” for Pagelines. Once installed, you’ll be able to see it in the site options panel and you can adjust the colors of your nave menu there. Hope this helps. – J

Any time. I will have a couple of new Pagelines tutorials (along with the site re-design) posted after the new year. If you have questions in the meantime, feel free to post them here and I’ll do my best to answer them. Thanks – Joel

I have been trying to move the icons and search to line up with the top of the brand nav instead of the bottom of it – but cannot see how to do it.
this is the temporary url (http://41.185.8.52/~wwwmnili/)
I have used the brandnav just for the logo and the icons and search with another nav below it for the actual nav.

Thank you so much for this tutorial! I have been searching for this solution for awhile. I made one alteration to the function and it was to the specific hook used, I used “pagelines_branding_icons_start”. This allowed me to used the original “Branding” Section and keep the original navigation bar. For this option you will need to make a few slight changes the CSS to get the icons in the correct and proper location.
Example:
ul {list-style-type:none;}
li {display:inline;}

thanks for the reply!
yes im using wordpress and pagelines framework theme
i´ve basic knowledge of html and css, and i was wondering if i could get to change or edit in html, i know there are plugins for the css
but for example if i just wanted to add a class to a certain tag…
the specific case is i want to change image color when i do hoverhttp://www.designmeme.com/tutorials/cssrollovers/

You can place all of your custom code under Pagelines > Site Options >Custom Code. Keep your css in the CSS/LESS Rules section and you can call your jquery scripts using the Header/Footer sections. Hope that helps. – J

Yes. You can create multiple menus under “Appearance > Menus” and categorize them. You can then choose the menu you would like to use on the corresponding page accordingly by creating a hook. For more information on how to do this, check here. Hope this helps. – J

Hello there, I was trying to find a solution to build something to have some distinct header. I’ve got like 7 different pages I would like a new picture header on each section. How can I manage to do it ? Until know I’ve been trying to see if I can do something with “branding” image in the header part of the pageLines drag&drop section… Maybe I could make something using a “universal bar” ? I don’t care about social icon. I just want a changing header… Any advise will be welcomed, thanks.

Universal bar would work. You can use something like this custom sidebars plugin to create your unique headers then assign them to each individual page. Another way of doing it would be with pageid’s. You can assign a different background image to each page header with some custom css… something like this would work:

I’ve tried your solution custom sidebars plugin it’s interesting but only for sidebar unfortunately… No problem at all with this part for me.

Thanks for your help hope my problem could help someone else. If you have any better ID I’m interested.

I don’t really understand why there’s no simple solution as it is a very must have feature, normally very simple to build.

I know HTML CSS, but I’m not very aware of javascript and PHP. Could you tell me how to make a simple animated javascript header for pageline in case there’s no solution for having a specific header on specific pages…

The only other option I can think of that would make things easier would be to use the pagelines content box plugin for your header instead of the standard branding section (and you would not need to use hooks to do so). You can then customize your html individually in that section for each page. Keep in mind the branding section is typically set up to just display a logo and navigation for most websites so if you need to customize things outside of what it was normally intended for, then youll have to put some work into to it. Either way, its perfectly doable, you’ll just need to get creative with a little css.

Hi Joel,
Thanks for the explanation about hooks. I was trying to do exactly what you were showing in this tutorial – place my brandnav inline with my logo and then add social icons and search. However when I did this using the steps you outlined it did not work. Am I missing something?

I added the hooks to the functions.php section of the pagelines customize plugin. In fact.. I copied the exact code from your site and appended it at the bottom of the functions.php page.

I hope you won’t mind me asking a quick question! I’m trying to get Polylang (multilanguage plugin similar to WPML) to work with PageLines. It works with the standard themes, but in PageLines, the nav acts improperly, linking to the original language even after the alternate language has been selected and the alternate language links are showing. I suspect this is because PageLines has its own nav code, but not sure.

About

I'm a multimedia developer who has specialized in digital media, web design, ui dev, print, copywriting, as well as audio & video editing for over 15 years. I currently reside in Barcelona, Spain and work with both U.S and International clientele.