I decided to split sidebar into two divisions. So that I can use the primary sidebar as widgets and secondary sidebar as customize lists. Here is the original sidebar.php.
7
8
9
10
11
12
13
| <!-- begin sidebar -->
<div id="sidebar">
<ul>
<!-- sidebar lists -->
</ul>
</div><!-- #sidebar -->
<!-- end sidebar -->
|
The new sidebar.php will look like this. We remove the sidebar id and replace with primary-side and secondary-side ids. Both elements will have sidebar class.
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- begin sidebar -->
<div id="primary-side" class="sidebar">
<ul>
<!-- primary lists -->
</ul>
</div><!-- #primary-side .sidebar -->
<div id="secondary-side" class="sidebar">
<ul>
<!-- secondary lists -->
</ul>
</div><!-- #secondary-side .sidebar -->
<!-- end sidebar -->
|
In order to activate the widget sidebar, we need to register both primary and secondary sidebar in theme functions file, functions.php, as below.
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| if ( function_exists('register_sidebar') ) { // Primary Sidebar register_sidebar(array( 'name' => 'Primary Sidebar', 'id' => 'primary-sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '', 'after_title' => '', )); // Secondary Sidebar register_sidebar(array( 'name' => 'Secondary Sidebar', 'id' => 'secondary-sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '', 'after_title' => '', )); }
|
Lastly, we need to change the WordPress theme layout, layout.css. Both sidebar elements are right floated. Secondary-side element is cleared to right. So that it can drop below right floated primary-side element.
30
31
32
33
34
35
36
37
38
39
| div.sidebar { float: right; width: 210px; margin-left: -250px; padding: 20px; } div#secondary-side { clear: right; }
|
Related Posts
No Comments
No comments yet.