This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

[PHP Customizations] How to replace header social icons with widget area

  • Creator
    Topic
  • #3675
    Jason Bobich
    Keymaster

    This will only be possible through your own PHP customizations. With the framework’s hook system, this can all be accomplished from your Child theme’s functions.php.

    Part 1: Add your content to the header

    In general, it’s a good idea to start familiarizing yourself with the hook system itself and what a WordPress action hook even is. So, your the question here is basically “How do I put something in the right side of the header?”

    And the answer would be to hook your custom content to “themeblvd_header_addon” and then position it with CSS. You can quickly see that by checking out the actions map:

    http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

    With Alyeska specifically, you’re going to have to also unhook what’s already there (which is the social icons). So an example of removing the social icons and just outputting some text in would be to do something like this:

    /**
     * My header content
     */
    function my_header_content() {
    	echo 'This content will show in the header.';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );

    Part 2: How to create a widget area

    The next question is essentially, “How do I create and display a widget area?” If you’re just trying to do this in WordPress in general, it’s very easy. Register it from your Child theme’s functions.php and display it within whatever function you’re hooking into the header.

    Now if you want to get fancy and use some of the framework’s unique things, you can register a “sidebar location.” Basically this means that now if you wanted, you could use the tools at Appearance > Widget Areas to then create custom widget areas that could then be swapped into that header location depending on different pages and what not.

    The full breakdown on that is here:

    http://dev.themeblvd.com/tutorial/widget-areas-for-the-end-user/#widget-area-locations

    http://dev.themeblvd.com/tutorial/default-widget-area-locations/

    http://dev.themeblvd.com/tutorial/addremove-widget-area-location/

    Part 3: Putting the header content and new widget area together.

    To expand on the original code snippet supplied in Part 1 and incorporate what’s discussed here, it would look something like this:

    /**
     * Add new sidebar location.
     */
    themeblvd_add_sidebar_location( 'my_header_widget_area', 'My Header Widget Area', 'collapsible' );
    
    /**
     * My header content
     */
    function my_header_content() {
    	echo '<div id="header-widget-area">';
    	themeblvd_display_sidebar( 'my_header_widget_area' );
    	echo '</div>';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );

    Part 4: Position your resulting HTML with CSS

    Then, the last step would be just to position your widget area with some CSS. For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits in your child theme‘s custom.css file.

    So, possibly you could do something like this:

    #header-widget-area { float: right; }

The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.