Docking Boxes with WordPress StudioPress/Revolution Themes
Published: 1 year, 2 months ago (Jun 19, 2009) in How To's/ReviewsTags: wordpress · Print This Post · Leave a Comment
If you look at the sidebar on RK.md, you can rearrange the fields (Posts, Comments, etc.) in whatever order you want. Furthermore, you can open/close the boxes as you see fit. The best thing about these features is that the user options are stored in a cookie, so the website remembers how you like the sidebar arranged as you browse from page to page (and the next time you visit). 
This is made possible by brothercake’s docking boxes JavaScript. I’ll show you how to port this feature to your StudioPress/Revolution WordPress theme.
First, you need to download the script package here. Upload dbx.css, dbx.js, dbx-key.js, and the images folder to your theme’s directory (where header.php, footer.php, comments.php, etc. are located).
Next, in your theme’s header.php file, place the following code after the <body> tag:
<script type="text/javascript" src="dbx.js"></script>
<link rel="stylesheet" type="text/css" href="dbx.css" media="screen, projection" />
Then in your footer.php file, add this code before the <body> tag:
<script type="text/javascript" src="dbx-key.js"></script>
The code additions above load the necessary docking box files (two JavaScript files and one CSS) into your theme. Now navigate to your Widgets manager and add a new text widget. This widget will contain all your docking box code. At this point, I should note that it’s a good idea to have a plugin like Exec-PHP installed so you can call the PHP functions which will generate your recent comments, recent posts, blogroll, etc.
In your newly created text widget, you will need to follow the code format below to generate your boxes. It’s pivotal that you retain the “dbx-group”, “dbx-handle”, “dbx-box” and “dbx-content” classes as these are tied to both the stylesheet and JavaScript. The code below is a sample which will display my blogroll (links).
<div class="dbx-group" id="purple">
<div class="dbx-box">
<h2 class="dbx-handle" title="Blogroll">Blogroll</h2>
<ul class="dbx-content">
<?php wp_list_bookmarks('categorize=0&title_li='); ?>
</ul>
</div>
</div>
The “dbx-group” class will encompass all your boxes. To generate additional boxes, create more “dbx-box” calls. For example:
<div class=”dbx-group” id=”purple”>
<div class=”dbx-box”>
<h2 class=”dbx-handle” title=”">BOX 1</h2>
<ul class=”dbx-content”>
<?php SOME_PHP_FUNCTION FOR BOX 1 ?>
</ul>
</div>
<div class=”dbx-box”> <h2 class=”dbx-handle” title=”">BOX 2</h2> <ul class=”dbx-content”> <?php SOME_PHP_FUNCTION FOR BOX 2?> </ul> </div>
<div class=”dbx-box”>
<h2 class=”dbx-handle” title=”">BOX 3</h2>
<ul class=”dbx-content”>
<?php SOME_PHP_FUNCTION FOR BOX 3 ?>
</ul>
</div>
</div>
Leave a comment if you have any questions!
Similar Posts:
Share This Post:
