NOTE: If you are using Artisteer 4, it already comes with a Header Widget area. However, it doesn’t include styling, so you can just take a glance through the styling elements of this post for adding your desired styling to the widget area. Also, you may want to reference how to create a new block style for use specifically in the header as well. Content below is related specifically to Artisteer 3.

The newest version of Artisteer already comes with a lot of widget spaces, but sometimes you want even a little more flexibility. This post is designed to show you how you can easily add a sidebar area within your header although the same principles can be applied to add a sidebar anywhere within your site. It’s a great place to ad social icons, advertisements, or a slider that you can easily edit and adjust in the future through the use of simple widgets. You can also just simply use it to place a different header image into the header space whenever you want to. Tip: use a plugin like Widget Logic to be able to choose which which widgets display on which pages, posts, or categories and you can easily have your own image or slider per page! Ok, on to the steps.

What you’ll need:

An exported Artisteer WordPress Theme

A testing platform

A text editor (like Notepad which comes as standard on most computers. I recommend downloading Notepad ++ which is also free but helps with alignment and catching missing elements.)

Steps1.) Look in your exported themes folder to find the sidebar-secondary.php file. Using a text editor, change the code to what is shown below, then save it as sidebar-banner.php. Notice that you replace the word “secondary” with the word “banner” in both the first and second line. Make sure that your original sidebar-secondary.php file stays in tact because you will still need that file if you are using more than one column on your page.

2.) Now, look in the library folder of our theme and open up the sidebars.php. Copy all of the code related to the secondary sidebar and paste it directly above the default sidebar code. Make sure that the spacing and style is identical to those below it. It should begin with a single quotation mark and end with a comma with space above and below. Now change that newly pasted code to look like the following:

Notice that there are three places to replace the word “secondary” with “banner.” Also make sure to change the description text to match where your sidebar is located.

3.) Add your new sidebar into your header.

Open up your header.php file, and add the following code within the header wrapper. You may have a few more or less lines of code depending upon your header’s design and width. It’s usually best to add it directly above the logo code.

<div class="banner-wrapper">
<?php get_sidebar('banner'); ?>
</div>

Notice: You add middle line is what calls the sidebar to the header, and the class wraps it. This class is designed so you can style how the sidebar displays which is in the next step.

4.) Add the dimensions of your sidebar to the stylesheet.

Go into your style.css file, and just above the styling for the logo (usually just underneath the Header Object styling or header.jpg styling), add the following code. Your code will be different depending upon the width and height of your header as well as if you want the header to span the entire width and height of the header area or not. The following code is for a sidebar that covers the entire header area.

Note: There are a ton of different options for the sidebars position. You’ll need to specific the exact width and height in pixels instead of percentages if you want to add padding or a margin, and you’ll also have to add the exact pixel amount from the top and right or left if you want a smaller sidebar area in a very specific spot.

5.) Finally, open up your options.php file found in the library folder of your theme, and make the following additions.

That’s it, you are all finished and able to enjoy your new header widget! Note, if you plan to use a slider or image within the widget space, and you don’t want a margin or you want a style completely different from your other widget styles, it’s suggested that you create a new block style specifically for this new widget area. See my post on adding widget styles to learn how to do this.

Ok I edited my code as stated and the banner widget area did show up but it seems to only show the default widget and will not show the Next Gen slide show. Here is the site. http://liveview.uniqueonlineconsulting.com. Did maybe i not do it right?

I apologize if you were subscribed to comments and got several for this post. WordPress was not allowing my code to show up unfortunately.

In looking at the source code, I didn’t see the call to the php and I also noticed an additional sidebar id below it with a complimentary “role” that I wasn’t sure what the purpose was for. That is probably what is messing you up.

Hi Sarah,
I have the exact same problem and you’re right, I do have an extra sidebar div saying complimentary and I agree that this seems to be the problem. However, I can only see all this in Firebug and I have no idea which part of the code (which file) needs to be changed to delete this div…
Please help!
Many thanks,Ildi

If you’ve inserted the code into your header, you’ll need to look inside the header.php file to correct the divs. Make sure that your code matches the code I’ve listed above. Also, be sure that you’ve titled your new sidebar the same in every step (the new sidebar.php file name, the name within that file, and the class names throughout.)

I was out of it when responding earlier. If you only want a smaller widget area on the right side, just add another div wrapper within the header that you can put the sidebar code within. This way, you can align the wrapper css to the right by the usual top: 0; right: 0; method, and you can determine the exact dimensions of your sidebar. Hope that helps.

Hi, thanks for your knowledge, i found this site so useful, i try to place the widgets and since is already viewable in the widgets page it does not shows in the actual template, if you can help me to know what is wrong i’ll appreciate it.

Hi, Thanks for knowledge way beyond mine! I´ve tried to follow your instructions with some exeptions – I´m tweaking a friends artisteer theme and the code referred to in the header.php was in the page.php, so I put it there. No secondary-sidebar.php existed so I made one with just you code. No options.php existed either so I made one with just your code as well (is it absolutely needed?). Anyway, I get a widget-area at the right place but whatever I put there (meteor-slides thanks for tip!) I just get a standard sidebar list on the jpg header… I´ve doublechecked code a thousand times… Any ideas??? Thanks!

It sounds like you have 2.5. If so, the code is totally different, so the steps will be different as well. You need to make sure that the new sidebar is registered correctly. I don’t know the code for 2.5 off the top of my head, though, to tell you how to add it appropriately.

Ah…So it is. The template is made in artisteer 2.6 – Is the code generated by 3.xx sort of cleaner or easier to read? I´m no php guru, but it is very difficult to see where and what the code does. As for this example, where the page.php seems to manage the stuff header.php does. Thanks for your answer anyway. If I upgrade, will 3.x be able to read the 2.6 artisteer file and make a new wp-template? (And my apologies for bothering you on a sunday:))

I read all your notes with jealousy because I am often so lost, I’d love it if this all came a bit easier. I want to have the ability to change a header for just a couple of pages and it seems to be so complicated. I tried your instructions, but I don’t have a page that is just sidebars.php, I seem to have sidebars-top, sidebars-bottom etc. But none that is just plain sidebars.php. I have upgraded to version 3, is there a particular one of those that I should be changing?

Try looking again for sidebars.php because it will be there from a V3 export. That general sidebars.php is where all of the individual sidebars are registered. So you will have the plain, sidebar.php file as well as the secondary, top, and bottom files.

I was referring to the exported files within your WordPress Dashboard. But, if you are just editing the files within the folder, you’ll need to look in the “Libraries” folder to find that sidebar.php file.

I can’t seem to find the code you have in your secondary-sidebar.php in any of my files. Also, your header.php is much different than mine. My header.php contains all the metadata, etc.–everything up to the tag. The actual content for the “header” is located in a file called templates/page.php.

There is no secondary-sidebar.php there is however sidebar-secondary.php. 2.) In sidebars.php, copy the secondary sidebar code and in your text editor, change it to look like the following: what file is supposed to be sidebars.php? Is this the file that you said to name banner-sidebar.php?

You should have your main sidebar.php file which pulls information relating to all of the different sidebars, and you should also have a variety of the individual sidebar files such as top, bottom, footer, and secondary. The first thing you have to do is to create a brand new individual sidebar file. The easiest way to do that is to take the sidebar-secondary.php one, make the changes I suggested and save it as sidebar-banner.php. (Sorry about the name confusion.)

In your main sidebar.php file, you just need to make sure that you call to that new file you created. You’ll see that it already calls to the other files, so if you just copy code from one of those (again, the secondary sidebar works best), make your small edits, than copy it back into that file and save.

I can’t claim to be a programmer, and I’ve been having trouble getting a working sidebar. I’m running the released Artisteer 3 bits, and finding that many of the “art-someting” are “theme-something” in my theme. I’ve tried it both ways, copy/paste from your test doc, or edited to match existing.

I also tried both “banner-sidebar.php” and “sidebar-banner.php”. No change, which leads me to wonder what else I might be doing wrong…

What I get is a default sidebar, that changing the banner widget in the widget screen has no effect on. I’m testing on an internal-only system, so I can’t give you a url to look at it.

Do you mean you don’t currently have any sidebar and you are trying to add one? If so, my tutorial won’t work because you’ll need a lot more code. My tutorial is only for adding an additional sidebar area. Without seeing what you are doing it’s difficult to know where you are going wrong. Can you give me a little more details or steps you are taking?

Sarah, I think the commenter above is confused because (at least on my Art3 themes) the sidebars.php is inside the “Library” folder. If someone is looking to find it among all the other sidebar-x php files it won’t be found.

Yes I did follow all steps. There are 2 versions of Step 3, one in the document from the link and the other is on this page and I tried them both.

Also your instruction: “Open up your header.php file, and add the following code within the header wrapper (if you are using a page wide header) just below the header-object div and on top of the logo code.”

…I don’t have the header-object div but I do have the logo code. So I put the above code above the logo code. I still got the fatal error of Call to undefined function art_dynamic_sidebar()….

Your welcome. Just remember that the bottom widget area won’t look quite right extending the entire bottom when you have a two column layout. You can always use my same tutorial to easily add another widget area anywhere on the page. If you want it in the footer, simply edit the footer.php file instead of the header.php file. Or, you can also add a new sidebar area to the page.php file. You’ll just need to also add it to the one-column page file as well so it will appear on both one column and two column pages.

I just picked up artisteer 3 days ago and started to familiarize myself with it. I noticed that there were differences between certain coding examples you gave and what I had in my theme. I have a demo site online that I added the widgit to the header and documented what I did in case it is helpful to anyone.

Artisteer gives you the option of adding your own extra css, but I’m not sure that there is an easy way of editing Artisteer itself so that it puts out what you want. Your test site looks like it has the same code as mine, although the css will of course be different for every site. My css is always a little different as well for the page wide header because I don’t like the way that Artisteer spits out a huge image rather than making use of a repeating graphic. It adds in all sorts of extra divs that are completely unnecessary and fails to make use of repeated small graphics that speed up load times.

The code is pretty close to what you originally had listed. Some of it is different and there are some extra lines of code here and there also the file I created was saved as sidebar-banner.php. Not sure why the other way did not work.

I agree that Artisteer adds some extra coding here or there complicating fine tuning with css. I am not sure why using the Additional CSS Options to add custom css to some items does not work the way it should and the site retains what you configured in the program itself. In all fairness to Artisteer, I have noticed with many different CMS and PHP platforms including the wordpress frameworks that there are issues and workarounds that have to be applied to get things to work right and with every update that brings major changes things break. Makes life interesting : )

BTW, would love to see a How To for building Page Templates for Artisteer if you ever have the time to do one.

I have inserted the sidebar to the header so far everything is fine
problems are first that sidebar displays search engine, a list of all my pages, archives, categories, blogroll etc. and second doesn’t shoes the widgets that I insert (like vertical menu)

I can’t figure out how to solve this! I’m using latest Artisteer and WP

Have you tried hard refreshing your browser? Also, be sure that you didn’t remove or replace the old sidebar.php but simply used it as a starting point to create a new sidebar php file for your header. How you title things is pretty important and one tiny mistake can really screw things up. I can’t really be of more help without seeing your actual code.

As a note, I’ve corrected a couple of the original mistakes I found in this post. For example, I had listed the sidebar php file incorrectly. It should be sidebar-secondary.php and the new file you create would be sidebar-banner.php. Also, I found an error in the options code suggestions. So, if you were having trouble getting things to work, please revisit the post. The instructions and the code are much clearer now and you shouldn’t have any trouble. I apologize for any confusion.

banner-sidebar.php caused troubles, now when file name is changed everything is in order…
You still keep errors in post, but guess this is deliberately to make people read all and contact for support when having headaches like I did
Finally scrolled down to the last comment and Voila!

BTW, used text block before to set html in header, but widget is much better solution. Tnx Sarah!

I did make some edits to this post already but must have missed renaming the sidebar. I’d actually much prefer people to get it right the first time than having any issues. Thanks for pointing that out.

Joy, you can certainly add this same code within the page php file. Just note that if you want the sidebar to appear in both the single column and the page template with a sidebar, you’ll need to add the code to both files. If you want the code to be within the loop, you’ll want to add it to the index.php file. If you do this, be sure to realize that the same widget will appear within every single post, so you’ll need to think through how you add it in.

Sarah,
Just a quick note to say thank you for this little write-up on putting a widget up in the banner. I reference this page at least once per website I make. I need to copy it into a text document just in case your server goes down. (haha)

One thing, am I doing something wrong or is the div you use in step 3 does not reference the div you create in step 4. I always have to rename the div in the .css to .banner-wrapper.

Also, what does step 5 do? I’ve forgotten it in the past and everything works. I still do it, just wondering what it does.

Sorry for the late reply, and thanks for noticing the different name for the div. That’s why I always say to make sure that it matches in both the html and the css. I’ve changed the post to match. As to step 5, that’s just giving you the option to choose the default block style within your Theme’s Options page for that new banner area. So, yes, it works fine without that step, you just can’t set a default in the Theme’s Options unless you do it.

Hi again. Updated to Artisteer 3.1 and this time your code works out-of-the-box! Q: do you think I can use the same method to create a small widget area in the top right corner – aligned with the (top) menu? I would like the symbols from the translation-plug-in to show up as they were a part of the top menu and not in the sidebar…

Hi again again
One more Q: Is it possible to put one small widget area on top of another? I would like to put a small text rolling in the bottom right corner of the banner-wrapper. Like this: http://www.teaterslava.org (work in progress)
/all the best from icing-cold Sweden…

I was searching for tutorials and stuffs to modify a theme but none of them has helped me except for yours. Yours didn’t really apply to what I want actually, but it has helped me to find how to modify the theme to the way I want it. So thanks.

Hi,
Thank you for your posts – I was ready to give Artisteer away but I am returning to the software to try and learn how to customise it!

I have followed your steps above and the the new sidebar appears in the header (yey!) and the image I put in the widget appears in the sidebar (souble yey!), but I have image mapped the image using image-maps.com and the map doesn’t work. I have tried it in the body of text to make sure I haven’t make an error with the mapping and it works fine in the body of the text.

If you want to try adding code into the comments you need to add enclose it within pre tags so < pre > (with no spaces) and close with < /pre > (again no spaces.)

You need to look at your actual css styling sheet to see what’s happening. Did you style the wrapper for the new sidebar to the correct width? Did you actually call to the correct divs in your header? Without seeing the code I can’t help you.

One other thing. If you are using a page wide header, that will affect how your styling of the wrapper appears when using the percentages in the css. You may want to use actual pixel dimensions instead.

I tried this tutorial on my artisteer v3 theme. But I got a problem. I’m trying to put flash slideshow on the banner widget, and what i got is the slideshow is on top of header image.
Please help me. And sorry for my bad english

I followed your tutorial step by step and everything has worked perfectly except the positioning. For some reason my banner will not align to the right. I have tried making changes in the .css file but nothing has helped. Could you please look at my site and tell me what I’ve done wrong? Thank you so much in advance.

I finally got my banner to position properly after I read your other article about wrapping the code. I had been searching for weeks to learn how to do this, and then I saw a link to this post in a forum. Thank you so much for this tutorial!

Thanks, Bill. As a note. If you are using Artisteer 4, it now comes with a widgitized sidebar. However, you still may want to take a peek at this tutorial for the styling element as it doesn’t include any styling on it’s own.

Hey Sarah,
Big thanks for the tutorial. worked like a charm
As a coding noob I’m pretty happy with the result, although I need to play with css a bit more to make it look perfect.
Anyway, enjoying the playing and thk you soooo much again!

Having the same problem as Kristen above as far as the positioning. It seems that it is ignoring the css that I added
/* begin Banner */
div.banner
{
position: absolute;
display: block;
width: 50%;
height: 100%;
right: 0;
}
/* end Banner */

it sees the wrapper but I can’t change that because that is where my logo is.

Material design is a concept and practice that marks Google’s entry into the design arena. The search giant is well-known for its interest in user experience and how we use multiple devices to access information. These two concerns lie at the heart of material design. Far from remaining a corporate project, however, material design has something