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.)
Steps 1.) 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:
'banner' => array(
'name' => __('Banner Widget Area',THEME_NS),
'id' => 'banner-widget-area',
'description' => __("This sidebar is active within the header.", THEME_NS)
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.
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.
/* begin Banner */
/* end Banner */
If you want the sidebar to be only on the right side of the header, you could use the following code:
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.
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