Adding sections to any pages or posts in Customizr

Following a user request on the Customizr support forum, I have worked on a simple solution to display your existing content as sections. The whole idea here is to use a selection of the pages and posts already existing in your website, and combine them on a single page.

This allow to easily create the kind of popular web designs we see more and more those lasts months. Those single page websites are really appropriate for landing pages to present a product or a concept. They are also a good solution in responsive design for small viewport devices.

Here are some interesting examples of single page websites :

 

 The live result

 

See the live demo

 

Setting your sections

The sections are added with a function named add_custom_sections( $args), which takes an array of 8 parameters, describing the number, location and design of your sections.

The custom options are merged with the following defaults option array :

Description of the parameters :

  • ids (array) : this is an array of numerical post or page ids
  • hook (string) : this is the name of the hook where you need to display your section
  • priority (integer) : callback priority for the choosen hook. More about this concept here.
  • layout (string) :  can take two values: ‘full’ or ‘boxed’. ‘Full’ will display your section in full width with any viewport.
  • context (string) or (integer)  : to display your section on your home page, select ‘home’. To display your sections in a page or a post, enter its numeric WordPress id (whitout quotes)
  • blur (integer)  or (boolean) this will apply a blur effect on the background image. Works on modern browser only. Can be set to false.
  • apply_shadow (boolean) : if set to true, will apply a shadow effect on the section.
  • background (string) or (array) :  this parameter allow you to choose the type of background you want on each section.
    • ‘none’ => no background
    • ‘thumb’ => the post or page featured image
    • ‘randimages’ => a random placeholder image from http://lorempixel.com/
    • ‘randomcolor’ => a random hex color in this list : “#510300” , “#4D2A33”, “#2B3F38”, “#03A678″ ,”#7A5945” , “#807D77″ ,”#073233”, “#B3858A”,”#F57B3D”, “#449BB5”, “#043D5D”, “#EB5055”, “#68C39F”, “#1A4A72”, “#4B77BE”, “#5C97BF”, “#F5AE30”, “#EDA737”, “#C8C8C8”, “#13181C”, “#248F79”, “#D95448”, “#26B89A” , “#EC6766”, “#E74C3C”
    • ‘#c98’ => you can also simply set an hex color

Important note : You can choose to apply the same type of background to every section with for example background => ‘thumb’, or assign a specific background for every id defined in the ids array, with an associative array looking like : ‘background’  => array(  1128 => ‘thumb’ , 1234 => ‘randcolors’ ,  565 => ‘randimages’, ’26’ => ‘#c98’ ).

 

Exemple of use

The arguments of the function can be defined as a variable that you are going to use as the parameter of add_custom_sections() function. You can set only the parameters that you need to change, those not set will fall back to the defaults (described earlier in the snippet).

 

The code

Paste the following code in the functions.php file of your child theme or your parent theme (learn more about how to customize the Customizr WordPress theme here)

 

Cleaning some hooks

The code below is useful if you want to clean the page that will host your sections before adding them. It removes the content, the comment and the breadcrumb.

 

Ressources and references:

WordPress hooks API

Cross browser image blur effect

Perfect Full Page Background Image

 

59 thoughts on “Adding sections to any pages or posts in Customizr”

Comments are closed.