Adding a Widget to Header Right

[sharonq]

Hey Jason – thanks for pointing out this forum on the codecanyon comments – this is a much better way to offer support. I am new to php – I have always used a framework in the past that allowed me to add widgets anywhere there was a hook simply by using their widget generator.

I’d like to have a widget in the header right area.

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

The first example ask me to :

Let’s say you want to add a new collapsible widget area up above the entire layout of the site. We’d have to first setup the widget area location.
1 themeblvd_add_sidebar_location( ‘my_new_location’, ‘My New Location’,

umm – which file do I add this line to? I know that must be obvious to those familiar with WP but I want to be sure not to edit the wrong php – that could result in nasty surprises (and yes I do lots of backtups…)

If I want this in the header right would if read:
themeblvd_add_sidebar_location( ‘header_widget’, ‘Header Right’, ‘collapsible’, ‘Widget for header’ );

the next step is to add:
—————-
function display_my_new_location() {
echo ”;
themeblvd_display_sidebar( ‘my_new_location’ );
echo ”;
}
add_action( ‘themeblvd_before’, ‘display_my_new_location’ );
——
does this go in the same file? a different file? does it matter where in the file I put it?

I do realize that customizations are not part of the support – but need a bit of a nudge in the right direction. Your documentation is excellent and I’m sure once I get the first few customizations done it will be easier – so far all the changes I’ve made are CSS within a child theme.

Topic

[Jason Bobich]

Awesome, I’m glad to see you’re reading the tutorials and trying to take an initiative to figure out this stuff.

If you’re wanting to make PHP customizations, you are going to have to learn the basics of PHP — how to create a function, what variables are, what arrays are, etc — and how a WordPress functions.php file works. There’s just no way around this. All of your PHP customizations — your new widget area, your action hook modifications, everything — are going to be placed within the functions.php of your Child theme below where the themeblvd.php framework file is included.

So, 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 first question 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 Swagger specifically, you’re going to have to unhook what’s already there. So an example of just outputting some text 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' );

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.” This is what you were reading about in that tutorial. 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/

Expanding on the example I gave above to go with the code you were originally asking about, it would go 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() {
	themeblvd_display_sidebar( 'my_header_widget_area' );
}
remove_all_actions( 'themeblvd_header_addon' );
add_action( 'themeblvd_header_addon', 'my_header_content' );

[sharonq]

Thank you so much Jason – this helps a lot.

I added the code to functions php and got a widget (yay) on the left below my logo (boo) .

When I look at the hooks map header_addon is to the right of header_logo – is there additional code I would add to tell the theme how big each of those areas is? Is the header-addon below header-logo because logo is taking up the full width? My logo is only 325 px wide so there should be lots of space.

I love how the widget showed up in the admin area – very nice and well thought out. The further I dig into your themes the more I like them. I may even get brave enough to try Jujmpstart soon.

[sharonq]

Figured out that I use CSS to style the widget and now have a lovely widget to the right of my header 🙂

I tried to add a second widget above the header and almost got it – the widget is there but when I look at it with Firebug the div seems to have a generic name “widget area” rather than a specific one – which makes styling complicated. Did I miss something in the php?

This is what I added:

/**
 * My header before
 */
function my_header_before() {
	themeblvd_display_sidebar( 'my_header_before_widget_area' );
}
remove_all_actions( 'themeblvd_header_before' );
add_action( 'themeblvd_header_before', 'my_header_before' );

This is what I see in Firebug

Login, Logout, Facebook, Twitter, Linked In

• This reply was modified 10 years, 2 months ago by sharonq.
• This reply was modified 10 years, 2 months ago by sharonq.

[Jason Bobich]

When I look at the hooks map header_addon is to the right of header_logo – is there additional code I would add to tell the theme how big each of those areas is?

When you use the hook you’re just putting the HTML markup where it needs to be. Now, as I said in the original response, you need to position it. So with CSS, you’d float it to the right or position it absolute to the right of the header div, however you want to do it.

#branding .widget-area { float: right; }
#branding .widget-area { position: absolute; top: 0; right: 0; }

[edit] I see you figured this out already!

… when I look at it with Firebug the div seems to have a generic name “widget area” rather than a specific one – which makes styling complicated.

It’s not complicated. Just pick a unique selector around it like:

.header-above .widget-area { ... }

Or if you want a div around it with some unique class, it’s your function; so do that if you want.

function my_header_before() {
	echo '
';
	themeblvd_display_sidebar( 'my_header_before_widget_area' );
	echo '
';
}

[sharonq]

I am getting close! The piece I am missing is assigning a div id to the new “header above” widget.
I can see both widgets

If I use: #branding .widget-area .header-above{…
nothing changes

If I use #branding .widget-area…
both widgets are formatted the same

In firebug I do see the div id for my_header_widget area but not for my_header_above and yet I ddn’t put it there wiath a in functions .php. I did add a dive for the header-above widget – but is does not show up 🙁

I’m wondering if I missed something – both widgets are in my_header_content – just two different spots within it. Should the functions be grouped together or in separate sections?

This is my functions php:

* My header content
 */
function my_header_content() {
	themeblvd_display_sidebar( 'my_header_widget_area' );
}
remove_all_actions( 'themeblvd_header_addon' );
add_action( 'themeblvd_header_addon', 'my_header_content' );
/**
 * Add new sidebar location. Header above 
 */
themeblvd_add_sidebar_location( 'my_header_above_widget_area', 'My Header Above', 'collapsible' );

/**
 * My header above
 */
function my_header_above() {
	themeblvd_display_sidebar( 'my_header_above_widget_area' );
}
remove_all_actions( 'themeblvd_header_above' );
add_action( 'themeblvd_header_above', 'my_header_above' );
function my_header_above() {
	echo '';
	themeblvd_display_sidebar( 'my_header_above_widget_area' );
	echo '';
}

this is what firebug shows:

[raw]Login, Logout, Facebook, Twitter, Linked In[/raw]

#branding .widget-area .header-above{
    float: right;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 100%;
    margin: 0px 0px 0px 0px;
background: #bbbbbb;
}

[Jason Bobich]

I just saw your site. So, this whole time you’ve been asking about Jump Start and not Alyeska? This has made things a little confusing for me. If this is the case you don’t need any of the remove_all_actions calls in your code because there’s no actions to remove.

With CSS, if we look at the divs that surrounds the widget areas, here’s how we could target them uniquely:

.header-above .widget-area { ... }

#header_content .widget-area { ... }

[Jason Bobich]

What username did you use/create when you purchased Jump Start with over at WPjumpStart.com? I’m asking so I can merge your accounts. Life will be easier on you if you can post in both the Alyeska and Jump Start forums.

This topic needs to be moved to the Jump Start forum, as it’s obviously in the wrong place and will be confusing for others.

[sharonq]

I was using Alyska when we first started – mostly because I wasn’t sure I could handle Jumpstart – but ran into a few challenges with 2.15 and thought I would give JumpStart a try – since you were making trying .php easier. I thought that since the dev docs were the same it wouldn’t make a difference and didn’t want to complicate things – so sure we can moved to JumpStart at this point.

This is where we started: http://testdrive.teamsfirst.ca/

This is my actual site: http://www.teamsfirst.ca

The test sites change a lot – so didn’t want to confuse you – I’m struggling with getting the Types and Views plugin to work properly and have had to restore from backup a few times and ended up wiping out the changes on the Alyska site because of that but since I had copied the changes to the new JS testssite kept going from there.

The Alyska theme has been lovely to work with but I did find that customizing was easier from Jumpstart and would encourage anyone else who is thinking of customizing a fair bit to make the switch. Jumpstart has many of the familiar features and benefits of Alyska and then adds in more all within a framework that is set up to easily allow you to make it your own.

[Author]

Replies