GetSimple tutorial for integrating page-specific sidebars on your site.

getsimple-tutorial-sidebars.md

GetSimple Tutorial: Sidebars

A common request people have when it comes to having a dynamic site is the ability to create content displayed adjacently to the main content: a “side-bar” if you will. Sometimes it will be content that should be displayed universally, regardless of the page that you're viewing, such as a 'Latest News/Blog/Tweet' block, or a calendar widget. Other times it is a very page-specific piece of content, like an extra menu to a set of relevant links to the main content, or the latest comments made on the current page. The biggest problem that people tend to have is the difficulty of maintenance of such sidebar content – often you have to hard-wire the code into your layout and continually have to edit the content from the template file or as a component, which can be very grating when you have page-specific sidebars and a lot of pages to boot.

This article will outline a way that I think is a pretty efficient way of providing yourself either universal sidebar widgets, page-specific sidebar-widgets or even both!

Plugins you'll need

• I18N Special Pages

Setting up the Homepage

Install I18N Special Pages to your installation of GetSimple. Go to Plugins → Configure I18N Special Pages → Create new special page type and create a new special page type called 'Home'. This will allow you to create new fields and blocks of content (widgets) that will exist for your main page. Particularly, (most of) the widgets that you define on the main page will be the ones that are universal, so that is why we are creating a particular structure for your home page.

Under FIELDS, add a field for every particular widget you want. If you want to have a WYSIWYG editor for that widget instead of just editing pure HTML/PHP, choose 'WYSIWYG editor' from the field type; otherwise choose 'Multi line text field'. Also, define these particular fields:

Name	Label	Type	Default Value	Index
showsidebar	Disable sidebar	Check box
showuniwidgets	Disable universal widgets	Check box

Because these will allow you to turn off the universal widgets and the sidebar entirely for a particular page. When you've finished creating a field for each of your global widgets, click 'save page type'.

Now edit the xml file of your home page by going to your file manager (from your web provider/FTP service, not GetSimple) and going to /data/pages/index.xml. Paste the following line somewhere in the text between the main tags:

<special>home</special>

Then save the page. If you go to edit your page in GetSimple now, it should have the extra fields that you defined through Special Pages.

Structuring the Widgets

Go to Theme → Edit Theme and find the file wherein your you will define the sidebars (usually the normal template 'Default Template'). Where you want the sidebar to be displayed, have some markup that will allow you to display the widgets. For example:

<div id="sidebar">
  ...
</div>

Note: You'll need to use CSS to align the bar to the left or right.

Then within the '…' content, paste the following to universally display a widget within the sidebar:

<?php
  $slug = return_page_slug();
  $showSidebar = returnPageField($slug, 'showsidebar') == '';
  $showUniversalWidgets = returnPageField($slug, 'showuniwidgets') == '';

  if ($showSidebar && $showUniversalWidgets) {
    ?>
    <div><?php getPageField('index', 'widget1'); ?></div>
    <div><?php getPageField('index', 'widget2'); ?></div>
    <div><?php getPageField('index', 'widget3'); ?></div>
    <?php
  }
?>

Of course, putting them in the order that you want them to be shown and replacing widget# with your widget name(s). Click “save” and you will now be able to define your universal widgets from your homepage!

Page-specific widgets

If you now want to have page-specific widgets, you'll need to create the appropriate Special Page types for these widgets. If you're fine with having one main 'page-specific' widget which is easily edited per page and with as little hassle as possible, then you're best off using the following method.

Paste this code within the sidebar that you've previously defined:

<div><?php if(returnPageField(return_page_slug(), 'customwidget')!=='') { getPageField(return_page_slug(), 'customwidget'); } else { echo ''; } ?></div>

This will allow us to add any one main page-specific widget to the sidebar without needing to edit the template file again. Save it, then create a new page type for general pages that will have the sidebar. Give it the name of the page you are creating (e.g. “General sidebar page”), then under FIELD, define the following fields and save:

Name	Label	Type	Default Value	Index
customwidget	Widget for this page	WYSIWYG editor **OR Multi line text field
showsidebar	Disable sidebar	Check box
showuniwidgets	Disable universal widgets	Check box

Create your page by going to Pages → Create New Special Page → [name of your special page type] and create the page, defining the page-specific widget that you want and tick/leave any boxes that you need.

You now have the option to:

• Show ONLY the universal widgets
• Show the universal widgets AND your custom widget(s)
• Show ONLY your custom widget(s)
• Disable the sidebar completely

For any sidebar-engineered special page that you've created, so long as the special page has the above 3 fields defined!