Adding sections to any pages or posts in Customizr


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

  • presscustomizr

    Thanks for this feedback. Yes this code is not complete for mobile devices, you need to add some @media rules in your css code.

  • Pferde Termine

    Thanks for the code snippet – works great on desktop. Do you also have a solution that this works the same on mobile? On the ipad the “parallax” effect of the thumb-image as background is gone and the images are so “large” that you cannot see any useful part…. I would love to use this on one live-site but since most of the users are on mobile devices, this doesn’t look good.

  • Darren Jae

    Just applied this to my site and tested some of the ‘context’ to create some multipage/post.. pages?.. Anyway working well and looks great with some CSS tweaks for text/colours.
    Any plans to add this to Customizr/pro with a selectable menu? Can see it working nicely in the place of category pages on some sites.

    • presscustomizr

      Hi Darren,
      Yes this is currently being added to Customizr. Still under development but close!

      Thanks

    • Pferde Termine

      Hi Darren,
      did you manage to modify the CSS so that it displays thumbs as background correctly on mobiles? Or was your CSS tweak only related to text and colour?

  • Milan Dostal

    Hi I’ve got this warning massage

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘_display_my_custom_sections’ not found or invalid function name in /data/web/virtuals/127360/virtual/www/wp-includes/plugin.php on line 503

  • Lab Lover

    Nicolas, I would very much like to implement the sectional structure capability in Customizr, unfortunately, I am having great difficulty using the code above.

    I have entered “the code” in my child theme’s functions.php. Should the “setting your sections” code be entered somewhere else? If so, where? I have attempted setting the arguments in functions.php but I simply end up with an empty page, showing the header and footer, but nothing in the main wrapper.

    What settings in front page customize should I be using?

    I have put several hours into this, any guidance from anyone would be appreciated!

  • Andrew

    I am currently trying to figure out a way to customize and setup sections that are different for each page. I have tried to re-copy the custom array snippet but it will only register the one array. Is there a way to code this properly?

  • Andrew

    Hi,

    My name is Andrew Macht I am new to coding within wordpress .php files. I would love to be able to create sections for a few of my pages. How would you be able to utilize this code properly as I have copied, “The Code” section into my functions.php however I am seeing no results anywhere even in the default “home” of the code. How do I go about customizing the content within the sections?

    Thanks,

    Andrew Macht

  • Dominic

    Also I found that embedded YouTube-Videos won’t work (link shown instead of video wrapper). If I look at the single page it works. Any ideas?

  • Dominic

    Works perfectly for me!

    I want to add menu items to smoothly jump to a section. Do you have any suggestion how to do this?

    Best Regards

  • Rohit

    sorry this is what you see in Firebug, somehow I don’t get this pasting the code part correct.

  • Rohit

    @Vijay

    Looks like the text you were trying to style is no longer there. If you try looking at the code using firebug (it’s an add-in in Mozilla) you would see something like this for “Affiliations, Recognitions & Clients” section.

    Take a look at the two below, the first one should not change the font size for this text “Affiliations, Recognitions & Clients” since the style for it is defined inline and you can override that with “!important”. I guess that should work, but pardon me if it doesn’t since I’m just a beginner.

  • Vijay Mitra

    Dear Nicolas
    I’m using the Customizr theme and I’ve used this piece of code to create the sections on front page. Although all sections are showing fine. The issue is that the Font headings and text are not using the default setting that has been set under Customizr Fonts.
    see the link http://www.positiveshift.in
    the header “Industry Recognitions” will always show in White normal Font and not use the Font setting setup under Customizr Fonts. Under Customizr Fonts the Headings of Page/ post is Fjalla and not this. Even the Font color is not changing even if I change on the section html. For instance if I put the background color a while the Font is not visible as that is also in White.
    Whats the problem here ? Need help.

    • Vijay Mitra

      Let me know if I can email the functions.php file someway please. I’m unable to paste here, gives an error.

      • Rohit

        Vijay,

        I think it’s happening since the style property inside

        I saw this using firebug Industry Recognitions
        You can change it to color of your choice from css in child theme but use something like this {color: #e10707 !important;} and this should do it.

        Thanks,
        Rohit

      • Vijay Mitra

        @Rohit
        Thank you for the response. I’m afraid your comments have gone over my head. I’m not sure I understood what you said here. I’ve not used any “Firebug”. Already as part of the Nicholas’s code above the background coloring is happening. I’m not sure if this code is overriding the default Font setting done thru Font Customizr.

        Kindly explain again.

    • Isidro M

      Dear Vijay, I’m new in Customizr and I’m using this code to create a section on my fron page like you. But I don’t now why it doesn’t work. I’ve put the code in my functions.php, and then I’ve put the calling to the function in my home.php.
      Can you help me about this? Can you send me the code in your page?

  • Rohit

    Hi,

    Nicholas this is an excellent snippet. Gives you immense amount of control over the sections, really amazing. I could build my landing page with this very easily.

    http://www.dev.tryspecials.com
    user: guest
    pass: guest

    Now I am trying to have hyperlinks in menu to these sections, how do I do that? When I try doing it using custom text it takes the user to actual page instead of taking to custom section container.

    thanks,
    Rohit

  • Colin Johnson

    Hey, does this only work with the Customizr theme? I am trying it on a different theme and am getting this error returned

    Fatal error: Call to undefined function tc__f() in /home/content/95/10628095/html/tohimfromher/wp-content/themes/northshore/functions/theme-functions.php on line 51

  • Hennie

    thank you so much

    Please tell me how you show and place the page title ,, and the adding the click box ?

    I’m looking at your demo and love to do the same type of thing

    Kind regards

  • Michael

    Great theme – great function

    I found that if I changed the $layout to ‘full’, it expanded the entire post contents to ‘full’ .

    I preferred a full background with a ‘boxed’ post content… and found that changing line 67 in your function to the styles below accomplished this.

    line: 67

    (I realize I can write a class to do the same and get rid of the inline css)

    Thanks again. It’s a great theme I’ll use a lot and and will contribute $ to.

  • sky_lord

    Hello
    This snippit is exactly what I need but I just dont know how to make it show up in my xampp test. So far what I did was insert unmodified “The Code” into my functions.php childs theme and then I created a page where I text encoded with my page id’s and set that as my static page, but when I visit the url it shows the php code after the featured pages 🙁 what am I missing? Thanks in advance!

  • sky_lord

    Hello
    This snippit is exactly what I need but I just dont know how to make it show up in my xampp test. So far what I did was insert unmodified “The Code” into my functions.php childs theme and then I created a page where I text encoded with my page id’s and set that as my static page, but when I visit the url it shows the php code after the featured pages 🙁 what am I missing? Thanks in advance!

  • Barry

    I inserted the code above in function.php in my child theme and get the error: Parse error: syntax error, unexpected ‘}’ in D:\Hosting\10113743\html\test\wp-content\themes\perfection1\functions.php on line 93
    Any help would be appreciated, love the theme!

    • Rocco Aliberti

      Hi Barry,
      please paste your functions.php in pastebin.com, open a new topic here and put the pastebin link there.
      Cheers

  • Alexander Geisler

    Hi,

    Thank you very much for this snippet, just what I have been looking for!

    However I can’t figure out how to use this snippet simultaneously on two different pages – maybe it is not possible?
    I have added the below code to my child themes functions.php, but it will only show the sections on one page.
    Do you know how to solve this problem?

    In advance thank you for your help!

    • Nicolas Post author

      Hi,
      you could try to hook the following example function on the template_redirect :

      add_action('template_redirect' , 'apply_contextual_sections' );
      function apply_contextual_sections() {
      if ( is_page(1) ) {
      //do something
      } else if ( is_page(2) ) {
      //do something else
      }
      }

      Cheers

  • Subalaris

    Hi Nicholas,
    This is awesome snippet!
    I was wondering is it possible to use two different hooks?
    e.g. to put one post/page at the top of the page (__before_header), and one below slider (__before_main_container)
    Thanks

    • Nicolas Post author

      Hi, yes it is possible. I did not try it but if you run the function twice with a different hook name in your arguments, that should work.
      I hope this helps !

      • Subalaris

        Hi, thanks for the reply. I tried to add another variable “$my_sections_args” with a different hook, but it didn’t work, it only reads the last one. Am I missing something? ..my knowledge of PHP isn’t very extensive.

        • Brittney

          I am trying to do the same thing and the same problem occurs, have you figured it out Subalaris?

  • Mengxia Wang

    Hi Nicolas,

    Is it possible to just display a partial content of each page/post to the combined single page? For example I just want to display the first five columns of my post as well as the first image to the section.

    Thanks

  • Olivia

    Hi Nikeo!
    I’ve been playing and discovering all the possibilities of Customizr for the last few days and it’s just brilliant! So big thanks for all the work you’ve done! 🙂
    I love the sections idea, and I have some questions. First, how do I put a title on the section (like in the demo -> This is a section with a random color background and This is a title). Also, is it possible to a) define the height of the sections and b) put a button on a particular section that links to that section’s page (similar to the buttons on slider, for example). I was thinking that maybe I could use CSS to hide the text from the section, so I would only have the title (and maybe subtitle) and a button that links to full page. Hope I explained it well!
    Cheers!

    • Nicolas Post author

      Hi Olivia,
      In this snippet, the content of the sections is set in the WP WYSIWYG editor for each pages.
      The title has to be put in your page content. You can add any content you need in the page like button or whatever you need (use the text tab to add HTML in your WP pages).
      The height of the section can be defined easily in the CSS part of the snippet.
      Hope this helps,
      Thanks

  • Rafal

    Hi, it works nearly perfect for me, except, it doesn’t show content of the page, just background (featured page), what am I doing wrong?

    BTW: you are doing great job with the theme, thanks for the whole effort!

  • David Ayotte

    Hi Nicolas,

    Is it possible to used a category to select the content to display instead of manualy defining the ids?
    If the client add a new post (category#1), can it automaticaly be displayed in the page #1?

    • Nicolas Post author

      Hi David, it is possible.
      The simpliest way to do it whitout modifying too much the current code would be to define the post ids with a function (instead of static array right now).
      This function would grab the post of the the wanted category (use get_posts()to do it), and return an array of all post ids of this category.
      Hope this helps 🙂

  • Karan

    Hi Nikeo,

    Thanks a lot for developing this snippet. I’ve added this snippet in my child theme functions.php. Acc. to the snippet, it adds a section in any page, but, where do i add the content to display in the section(that i’ve added using this snippet).

    I mean, right now, nothing happened after adding the snippet to functions.php. May be something i’m missing, so, could you tell me what could be wrong.

    Thanks

    • Nicolas Post author

      Hi Karan,
      Once you have pasted the whole code to your functions.php file, then use the

      function with your custom arguments.
      Read the description of the arguments, you’ll see that you can set up a page or post id and a hook to insert your section.
      Hope this will help!

      • Isidro

        Sorry I’m new in WordPress. In the same way that Karan, I’ve put the code in the functions.php, and I’ve put:

        at the end of my page template, but it doesn’t work.
        Help. I want to put customized sections in some kind of pages.

Comments are closed.