I recently built a site using WordPress as a CMS but needed to customise the sidebar because the widget method didn’t offer the layout/features that were required. The site is TheatreLondon.org.uk [I have now changed this site since posting].
TheatreLondon.org.uk is very similar to other theatre sites that I have built using WordPress such as BookTheatreTickets.co.uk [I have now changed this site since posting] however we felt that some improvements could be made to make the new site more user friendly.
All of the shows on both sites have their own pages that are WordPress “pages” not “posts”. We have a Musicals page and a Plays page with the shows being sub-pages of these. Using the “Pages” widget to list these pages in the sidebar just lists all of the pages under one heading with musicals and plays just running on with no seperation (as you can see on BookTheatreTickets.co.uk). In addition to seperating the Musicals pages and the Plays pages in the sidebar we also wanted a different colour box in the sidebar for the “Quick Ticket Search” in order to keep the styling as close as possible to the Local Nights Out site that handles the booking transactions.
To achieve both of these objectives I decided to hard-code these two elements in to the sidebar as described below.
Quick Ticket Search
The ticket search box is called by a script. Here’s how I added it to the sidebar in a box with a red border.
In sidebar.php (Appearance -> Editor) after
<div class="navigation">
before
<div id="sidebar">
add
<div style="border: solid 2px #ff0000;"> <h2 style="background-color:#ff0000;font-size:1.4em;">Quick Ticket Search</h2> <div class="textwidget"> <p>script goes here</p> </div> </div> <br />
Separating pages in sidebar
To separate the pages in to two lists I made use of the wp_list_pages function as detailed below.
After
<div id="sidebar">
Before
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
add
<ul>
<?php wp_list_pages('child_of=57&title_li=<h2>' . __('Musicals') . '</h2>' ); ?>
</ul>
<ul>
<?php wp_list_pages('child_of=59&title_li=<h2>' . __('Plays') . '</h2>' ); ?>
</ul>
The Musicals page has a page id of 57 and the pages for each musical have the Musicals page as their “Page Parent”. The
wp_list_pages('child_of=57
part tells WordPress to list all the pages that are a child of the page with an id of 57. The
&title_li=<h2>' . __('Musicals') . '</h2>' )
part gives this list a h2 heading of Musicals. Then obviously I just repeated this for page id 59 with a title of Plays.
The beauty of using widgets for the sidebar is that nothing needs manually updating when you add new posts or pages. The good thing about using the built in wp_list_pages function in this way is that although it’s “hard-coded” in to the sidebar as long as new pages are added as a sub-page of the Musicals page or the Plays page they will automatically show up in the sidebar without any further modfication.
