In this post, I'll modify the Twenty Twelve theme as an example by adding a Widget area and a search bar.
To follow this post, you do not need to know PHP well, but you need to know how to modify php files using a text editor or directly in the WordPresss Dashboard. Also, you might need basic understanding of CSS.
First, the following is a screen showing a website with the Twenty Twelve theme installed.
It's very simple because no special setting was done. If a header background image is added, it will look better than now. I will show you how to do the following:
- Adding a new Widget area under the header section
- Placing a slider widget in the newly created Widget area
- Creating another Widget area in the right side of the header section to insert a search box
It might seem to be complex, but it's not so difficult.
The WordPress Codex site (http://codex.wordpress.org/) is a good resource to get information on WordPress. First, please visit the Widgetizing Themes page (http://codex.wordpress.org/Widgetizing_Themes) to understand how to add a custom Widget area. In this page, you need to copy and past two code snippets into functions.php file and header.php(or page.php) respectively. Of course, please change the function name and the ID element name as you wish.
(I added the code immediately under the position where the header section ends in the file "header.php")
Now you can see the Widget area you just added at the Dashboard page under Appearance > Widgets.
Please install a slider plugin (if you did not install it) and place a slider in the new Widget area. Then, you might see the layout will not be good. You need to adjust the appearance of the slider using CSS.
An example of CSS code:
#custom_header_widget {
float: right;
margin-top: -50px;
}I installed a free slider plugin named "Meta Slider" and added a slideshow as a test. If you use a paid-in slider plugin, it'll look better.
The above figure shows a slider placed under the header section. You can also add other widget such as movie instead of a image slider.
Next, I will add a search box in the right side of the header section. Now you will know how to do, won't you? You can just repeat the above steps.
Please create a widget area by referring to the WordPress Codex page (http://codex.wordpress.org/Widgetizing_Themes) and copy and paste the appropriate code snippets into functions.php and header.php (for example, above </hgroup> tags). And then add the Search Widget to the newly created Widget area and adjust the position of the search box using CSS.
In this way, you can easily add a custom Widget area to any place you want to customize your WordPress theme.