How to Add Custom Sidebars

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
 
(One intermediate revision by one user not shown)
Line 46: Line 46:
  
 
# PrimarySidebar should be changed to something more appropriate, we'll use MyCustomSidebar for this tutorial.
 
# PrimarySidebar should be changed to something more appropriate, we'll use MyCustomSidebar for this tutorial.
# The value set in [[pagelines_register_sidebar]] should be set to something greater than 10, we'll use 100 in this example
+
# The value set in [[pagelines_register_sidebar]] should be set to something greater than 10, we'll use 100 in this example. Although a value of 11 would work just as well, I would recommend something higher rather than lower to better allow for possible expansions.
 
# The [[pagelines_draw_sidebar]] default can be set to an empty string as we intend to have our own custom content used in this widget area.
 
# The [[pagelines_draw_sidebar]] default can be set to an empty string as we intend to have our own custom content used in this widget area.
  
Line 74: Line 74:
 
* 'Not' enabling Sidebar Prioritization may cause unexpected results. For example: newly registered sidebars will by default be placed at the beginning of the sidebar / widget areas and will contain those widgets that were previously in the "first" position.
 
* 'Not' enabling Sidebar Prioritization may cause unexpected results. For example: newly registered sidebars will by default be placed at the beginning of the sidebar / widget areas and will contain those widgets that were previously in the "first" position.
 
* Using a priority value equal to another sidebar will cause the custom sidebar to "replace" the existing sidebar. The existing sidebar will be pushed to the "bottom" of the sidebar / widget areas list.
 
* Using a priority value equal to another sidebar will cause the custom sidebar to "replace" the existing sidebar. The existing sidebar will be pushed to the "bottom" of the sidebar / widget areas list.
 +
* Adding this to a theme may require the theme be re-activated for the code to take effect.
  
 
=== Related ===
 
=== Related ===

Latest revision as of 01:56, 3 April 2012

So you like the idea of having a new special sidebar as it suits the approach you want to take on a particular project. It's actually rather quick and easy to accomplish, although there are several items you should take note of to make your developing life a bit easier.

PageLines-Settings-Advanced.png
First off, I strongly recommend you turn on sidebar prioritization. This feature can be found under the main PageLines menu: Settings > Advanced. Once there just scroll down to the Sidebar Priority option and check the box for "Enable sidebar priorities?" Remember to click the "Save Options" button.

Please note, this is a PRO feature; you will need to be using a Professional License version of the framework, or Developer License version. See this page for more details regarding these licenses. Sidebar-Priority.png

Now that we have set the Sidebar Priorities, lets have a look at widgets in the WordPress Administration Panels. Go to Appearance > Widgets and you should see something similar to the image below.

Priority-Widgets-Default.png

The priority sequence for the default registered sidebar widget areas follows this order:

  1. Primary Sidebar
  2. Secondary Sidebar
  3. Tertiary Sidebar
  4. Universal Sidebar
  5. Full Width Sidebar
  6. Content Sidebar
  7. MoreFoot Left
  8. MoreFoot Middle
  9. MoreFoot Right
  10. Footer Columns Sidebar

Now that we know what we have and where they fit into the scheme of things, lets look at adding our custom sidebar to the mix.

To keep things simple, we will simply start with the Primary Sidebar. All of the default sidebars are actually sections, so if we break out our text editor of choice we can locate the following file in the PageLines framework installation folder:

..\sections\sb_primary\section.php

Also, for the purposes of this tutorial I will only be using a portion of the code found in the file that is directly associated with this exercise.

class PrimarySidebar extends PageLinesSection {
  /** PHP that always loads no matter if section is added or not. */
  function section_persistent() {
    $setup = pagelines_standard_sidebar($this->name, $this->settings['description']);
    pagelines_register_sidebar($setup, 1);
  }

  /** Section template. */
  function section_template() {
    pagelines_draw_sidebar($this->id, $this->name, 'includes/widgets.default');
  }
}

Of course we need to make some basic changes to this code in order to use it for our custom sidebar so let's look at what needs to be changed:

  1. PrimarySidebar should be changed to something more appropriate, we'll use MyCustomSidebar for this tutorial.
  2. The value set in pagelines_register_sidebar should be set to something greater than 10, we'll use 100 in this example. Although a value of 11 would work just as well, I would recommend something higher rather than lower to better allow for possible expansions.
  3. The pagelines_draw_sidebar default can be set to an empty string as we intend to have our own custom content used in this widget area.

Let's look at the MyCustomSidebar code now:

class MyCustomSidebar extends PageLinesSection {
  /** PHP that always loads no matter if section is added or not. */
  function section_persistent() {
    $setup = pagelines_standard_sidebar($this->name, $this->settings['description']);
    pagelines_register_sidebar($setup, 100);
  }

  /** Section template. */
  function section_template() {
    pagelines_draw_sidebar($this->id, $this->name, '');
  }
}


My-Custom-Sidebar.png
A few details to note with this code:
  • The Section name will be used in this case as the name of the Sidebar
  • The Description will be used for the text for the context of the sidebar area
  • The new sidebar will be located at the bottom of the list of the existing sidebar / widget areas.

To override this output see the related functions.

[edit] Additional Notes

  • 'Not' enabling Sidebar Prioritization may cause unexpected results. For example: newly registered sidebars will by default be placed at the beginning of the sidebar / widget areas and will contain those widgets that were previously in the "first" position.
  • Using a priority value equal to another sidebar will cause the custom sidebar to "replace" the existing sidebar. The existing sidebar will be pushed to the "bottom" of the sidebar / widget areas list.
  • Adding this to a theme may require the theme be re-activated for the code to take effect.

[edit] Related