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:

add_action('brandnav_after_nav', 'brandnav_icons');
function brandnav_icons() { ?>
<ul>
<li><a href="http://www.facebook.com/mysite" target="blank"><img src="http://www.mysite.com/wp-content/themes/pagelines/sections/branding/facebook.png"></a></li>
<li><a href="#"><img src="http://www.mysite.com/wp-content/themes/pagelines/sections/branding/twitter.png"></a></li>
</ul>
<?php }

Next, we’ll add the search field by using the ‘pagelines_inside_bottom_brandnav’ hook and create the function ‘new_search’ to call our search field:

add_action('pagelines_inside_bottom_brandnav', 'new_search');
function new_search(){
get_search_form();
}

The completed code should now look like this:

add_action('brandnav_after_nav', 'brandnav_icons');
function brandnav_icons() { ?>
<ul>
<li><a href="http://www.facebook.com/mysite" target="blank"><img src="http://www.mysite.com/wp-content/themes/pagelines/sections/branding/facebook.png"></a></li>
<li><a href="#"><img src="http://www.mysite.com/wp-content/themes/pagelines/sections/branding/twitter.png"></a></li>
</ul>
<?php }
add_action('pagelines_inside_bottom_brandnav', 'new_search');
function new_search(){
get_search_form();
}
<?php }

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.

Share →

33 Responses to Using Hooks to Customize Your Pagelines Framework BrandNav

  1. Jeevanandam says:

    Thanks for explaining in detail. I’m using pagelines theme; this information is useful for me.

  2. carmen says:

    hi, i need to change the color of navigation menu, default ones don’t match with my template color, how can i change for another one that aren’t by default ??

    thanks

    • Joel says:

      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

  3. Thanks for the information this is exactly what we have been looking for.

    Also we have a question regarding adding additional divs around a certain area or a wrapper to the templates, any more info would be really well appreciated.

    Thanks

    • Joel says:

      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

  4. Quintin says:

    Hi there, this is great, thanks so much.

    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.

    Any help would be appreciated.

    • Joel says:

      Hi Quentin,

      Sorry for my late reply. I’m currently on break but will be back at it the first week of January. If you still need assistance, please let me know.

  5. BestSeo says:

    Great article… exactly what i was looking for…hope you will come up with new tutorials .
    thanks

  6. 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;}

  7. carlos says:

    hi there! im trying to build a site, and need to use some basic html code, for example change tags in the html…is that possible? i know i can use css but how can i edit some html?
    thank you in advance

  8. meg says:

    Is there a way to add an image/email sign up form into the brand nav under the navigation? thanks for your help!!

    • Joel says:

      Hi Meg, sorry for the late reply. Yes it can be done, just create a new function using the steps above and add your custom code to it.

  9. Daniel says:

    Joel, thanks for the info, it’s definitely helpful. I’m working on a site and am trying to get text in the header. Is there any easy way to do this using the Custom CSS option on Pagelines Framework?

    • Joel says:

      Hi Daniel, text is simple to add. Do you have a specific example of what you want to do? Let me know and I can steer you in the right direction. – J

  10. Krishna says:

    Hi Joel

    Thanks for this explanation, it was a very good insight into the hooks that the framework offers.

    I am trying to choose “menu” on some specific pages (or areas)

    for e.g. I want to show one menu on pages (and children) in
    “www.mysite.com/cms” and a different menu on “www.mysite.com/blog”

    is that possible using hooks?

    thanks for the help

    Regards
    Krishna

    • Joel says:

      Hi Krishna,

      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

  11. inkobl says:

    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.

    • Joel Carlo says:

      Hi inkobl,

      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:

      body.page-id-204 #header {background: url (‘yourbackgroundimage’) no-repeat!important;}

      Just change the pageid # to reflect what ever page id class is listed for your page (this can be found in your body tag). Hope that helps.

      • inkobl says:

        Thanks for your message, I was thinking doing like you said background CSS but unfortunately it’s not a responsive solution :(

        I was trying to find “contentbox” to make it work but unfortunately I don’t have it because I haven’t already payed for PAGELINES… As I’m just trying to make it work, I will see later if I like it to pay for it. (by the way I’ve to said that I’m not very pleased with this template, who looks like simple but it’s really complicate in reality…) http://www.pagelines.com/forum/topic/25745-adding-thrid-party-slider-to-header-sections-plugin/

        I’ve tried “custom-headers-and-footers” but it’s not responsive also.

        Here it’s look like there’s no solutions :
        http://www.pagelines.com/forum/topic/26994-changing-branding-on-specific-page/#entry157397

        Here a dirty alternative maybe, but it’s only for having an animated header no mention about specific header for specific page :
        http://computeralchemist.com/vietnamzen/2012/08/two-pagelines-solutions-for-random-header-images/

        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…

        Thanks again, I love your website style by the way…

        • inkobl says:

          Here also there was an interesting solution but I doesn’t really know if it works : http://www.wpbeginner.com/wp-themes/easily-add-custom-header-footer-or-sidebar-for-each-category/

          Someone told me that the page ID was a different generated number… I’m not sure with this information by the way.

        • Joel Carlo says:

          Hi inkobl,

          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.

  12. Brent says:

    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.

    Thanks!
    - Brent

  13. sakkthi says:

    Hi,
    Nice article.
    How can i place meta widget next (opposite) to branding.
    Thanks,
    sakkthi

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>