split neader

[Alejandro Paredes]

Hi Bill!

How I can split the header section? I would like to add a twitter feed or some ads.

[Bill Robbins]

Alejandro,

Are you looking to split the area to the right of the logo, or do you want them to go in the black bar at the top of the site?

Let me know and we’ll go from there.

Enjoy your weekend,
Bill

[Alejandro Paredes]

Can you give both? I was thinking on the right but your idea sounds good too.

[Bill Robbins]

Since they’re rather extensive, I can’t do both. You could always have the people at Tweaky cook the other one up for you.

Here’s what to change:

1. Go to the Appearance section and select Edit.
2. From the list of files on your right, choose functions.php
3. Scroll down to the very bottom and paste this:

   
   function ale_sidebars() {
   
   	register_sidebar( array(
   		'name' => __('Header', 'organizedthemes'),
   		'id'   =>  'header_sidebar',
   		'description' => __('This appears in the header', 'organizedthemes'),
   		'before_widget' => '
   ', 
   		'after_widget' => '
   ', 
   		'before_title' => '
   ', 
   		'after_title' => '
   '
   	) );	
   	
   }
   
   add_action( 'init', 'ale_sidebars' );
   

4. Save your changes.
5. Next edit the header.php file.
6. Replace all the code there with this:

7. Save your changes.
8. Lastly, edit style.css and scroll to the very bottom and paste this:

   
   #logo-area {
   	width: 960px;
   	margin-left: auto;
   	margin-right: auto;
   }
   
   #logo-area #logo,
   #logo-area #text-logo {
   	float: left;
   	max-width: 48%;
   }
   
   #header-sidebar {
   	float: right;
   	max-width: 48%;
   	margin-top: 40px;
   }
   
   #header-sidebar .widget {
   	padding: 10px;
   	margin-bottom: 20px;
   	-ms-word-break: break-all;
   	word-break: break-all;
   	word-break: break-word;
   	background-color: transparent;
   	background-color: rgba(0, 0, 0, 0.84);
   }
   
   @media only screen and (max-width: 767px) {
   	
   	#logo-area #logo,
   	#logo-area #text-logo {
   		float: none;
   		max-width: 100%;
   	}
   	
   	#header-sidebar {
   		float: none;
   		max-width: 100%;
   	}
   	
   }
   

9. Save your changes.

That should give you a header widget area next to the logo. If you run into any trouble, let me know.

[Alejandro Paredes]

Hi Bill!

I’m sending you a link so you can see it

http://www.cedarsfoodmart.com/new/

the wdiget was added, but I can’t click on it and the menu moved.

thanks!

[Alejandro Paredes]

is kind of weird I can click using IE8 – I know- but not with Chrome… I really like how it will look, I can even Add some ads!

[Bill Robbins]

Ale,

There’s not quite enough room in the header for that much content. You could add in a search box or an image or your most recent tweet, but much more than that and I’ll break the layout like that. The other alternative would be to make it all appear above the content, but that would push it down quite a bit.

I’d try to use a bit less there if possible.

Bill

[Rob]

Any luck with whatever the outcome of this mod being responsive? Where do I put my header sidebar image address? Just trying stuff.

[Rob]

I just realized the header sidebar is a widget area.

[Bill Robbins]

Rob,

The bottom part of the extra styling would make it at least nominally responsive. On a smaller screen size, it will make the header sidebar full-width and have it fall in line below the logo.

For adding in an image to that area, you could use the Black Studio TinyMCE text widget which adds a next text widget with the full “visual” editor. You can use it to upload images and add links as well as other rich text options.

You could also use the Image Widget plugin. It adds a widget that only displays an image with an optional link.

See if one of those works for you,
Bill

[Bill Robbins]

Rob,

That’s right. It’s a small widget area that sits to the right of the logo. I probably won’t roll it into the theme ever, but you can add it to your copy of the theme if you’d like to.

There’s just not a lot of room for content there.

[Author]

Posts