Add content below slider


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


Add this function in your child theme’s functions.php

Your HTML code goes inside the $after_slider var, in between the single quotes. Please note that the HTML you input must have all single quotes (‘) escaped with a backslash (example: hell\’s kitchen).

Note that your HTML will be displayed after each slider in your website, not just the one from first page. If you only want to display it on the front page, you might want to hook it above the featured pages block, using this snippet.

Note that functions.php is not supposed to be a modified copy of its parent theme counterpart. If unsure, please read about how to create a child theme.


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.



30 thoughts on “Add content below slider

  • Nikola

    Hello, I need some help with a home page. On this blog skolskidnevnik.net I need to put between main menu and the first post a few (for or five) images in the horizontal line ( to each other, without space) that will be a links to certain categories. Is that possible? It needs to be shown only on the home page. I think this is good sample http://draganadjermanovic.com/, but this sample is not responsive. If possible, can somebody help me? Thanks in advance. Nikola

  • Lance Rubin

    I am trying to modify the following snipit so that I can add the metaslider just below the customizr slider instead of just above the customizr slider What do I need to change? Thanks in advance and thanks for your great theme.

    / Add metaslider after the header in the front page of site
    add_action (‘__after_header’ , ‘add_metaslider_to_front_page’);
    function add_metaslider_to_front_page() {
    if ( is_front_page() ) {
    echo do_shortcode(‘[metaslider id=201]’);
    }
    }

    • Nicolas

      Hi Lance,
      Just change the priority parameter of add_action() and you should be done :

  • froz

    hi guys, i’m new at this. i’ve spent a few days on this but i’ve finally given up cos i totally can’t understand or figure out how to do this. i need to put text in between my slider and the featured images. i am aware that i’m suppose to put the coding that u guys gave above into the functions.php but i’ve no idea where in my functions.php in order for this to work.. Please please please help me out. i;m really really stumped now..

  • Kevin Standley

    Ok. I got it to work. Just want to be sure I don’t cause problems elsewhere.

    Anyone see a problem with this?

  • Kevin Standley

    I’m really enjoying getting this new site up. Customizr has been great. I’m using this code snippet in two places on my site, above and below the slider. Now I’m trying to use the slider on another page but without the added html. Forgive my ignorance of PHP, I’m trying to add a if __is_home.

    But what that did was make the slider not work on any page but home. So I tried adding an else statement to this and a remove_filter

    I know this is where I messed up.
    I also tried creating a new function to see if it is not home and if the content_after_slider exists and then remove the filter.

    I wasn’t sure if it was !is_home or !__is_home but I tried both.

    Any help would be appreciated,
    Kevin

  • William

    Hello

    I have tried using this snippet to add some text on my homepage in-between the slider and the featured page block. The trouble I am having is my text is to long and is not moving down a line its over laying on the first line of text. Does that make sense?

    Many thanks

    Will

  • Jase

    Hi Andrei and Nicolas,

    Is there an easy way for me to insert some shortcode after the slider? I believe this is what I need to use:

    Thanks!

    • Nicolas

      Hi Jase,
      you can use the same hook of the featured pages to do so, like in the following example.
      Note that in this example, the shortcode will only be displayed on home page. You can add other conditions (page, posts….) with the WordPress conditional tags : http://codex.wordpress.org/Conditional_Tags

      Share the result once done!

  • Argyle

    Hi Andrei and Nicolas,

    First of all, very nice theme, I like it a lot.

    How can I use this snippet with qTranslate so I can display the correct text with the correct language?

    Thanks a lot,
    Argyle

  • Simon

    Hi – I have used the advice in this thread to create a block beneath the slider and insert some basic text, which has been really great as I would have had no idea what to do otherwise. The code that I have in my site is for this is pasted below:

    #customizr-slider:after {
    content: “PIKARTO LAUNCHES IN GEELONG”;
    color: #777;
    display: block;
    background-color: #ccc;
    text-shadow: 0 1px 2px rgba(255,255,255,.5);
    font-size: 32px;
    height: 400px;
    font-family: futura;
    line-height: 14em;
    text-align:center;
    }

    What I would now like to do is put in some more complex text – mixture of font sizes and over several lines, I would also like to know how I might add an image into this section. Is this possible and if so how do I do it?

    Thanks in advance for your help.

    • Nicolas

      Hi Simon, the filter proposed by Andrei would do what you want : insert HTML content beneath the slider.
      Then you can easily style it with some custom CSS code.
      Hope this will help you, cheers.

      • Rahman

        Hi Nicholas, your coding experience is fabolous. Thanks for this post. The slide image in my site’s slider expands. I maintained the normal dimension of 1170 by 500 pixel for full width. What is the likely cause of this. Thanks.

  • Emeka

    Hello Andrei, Thanks for the wonderful work you are doing.
    How can i add a content before the slider…. on my homepage…?

    • Andrei Post author

      Technically all you need is to change the last line into:

      But if you want to be “programatically” correct, you should also change the name of the var holding the content from $after_slider to $before_slider, right? Or, you could name it… $whatever 🙂

      • Cedric

        Dear Andrei,

        thanks for your help and to Nicolas for this free amazing theme ! I am new in coding and I must I could quickly do things (change my theme colors) with no issues…yet 🙂

        Now I would like to add a bar (like the top one) under the slider, just to have a break between. Is it possible and how to do it ?

        Thanks !

        Cédric

        • Andrei Post author

          You have a lot of options. If all you need is some distance from the slider, all you need to do is add this code to your custom CSS panel, in Customizr options:

          Of course, you may change the margin value to whatever you want. If you want some content after the slider, the way you put it there depends on the content. If it’s a fixed content, that you’re not likely to ever change (like a warning, or a call to action, or a mission statement) that can all have the same style (so it’s only text, not html), a shortcut can be achieved with CSS only:

          This is only an example. You may style the :after div to your liking. Set its’ width, height, margins, borders, color, box-shadow… whatever you like. From DOM’s point of view it’s a child of #customizr-slider and it’s rendered after its parent.
          If you need to input complex content, you may use the function above. Also, you may generate dynamic content with it. Just change line 3 to

          your_custom_function can be any plugin function or, if you want to use a shortcode just replace your_custom_function() with do_shortcode(‘[your-shortcode]’);
          These are, roughly, all your options.

  • Carlisle

    Many thanks, that seemed to work.

    Another question that may just be an obvious solution to, but one that evades my level of expertise and that is on the main body ( with slider) I am using photographs with text to the right of each photo. I have a sequence of 4 photos and try as I might I am unable to get the spacing right. It seems like there are too many spaces in between photos and text doesn’t seem to align properly.

    Do you have any advice? Appreciate your time.
    Carlisle

    • Andrei Post author

      That has nothing to do with the snippet above, so if I answer here very few will benefit from the answer.
      Take it to the theme’s WP support forum, give it a suggestive name (custom layout or what you think describes the request best) and provide a link to your website. Someone will look at it.

  • Carlisle

    Hey Andrei,

    Thanks for making the coding seem so simple. I am currently redesigning my site in WordPress and using customizr as my template.

    I have a question and that is when using the ‘add contents below slider’ snippet, I want to be able to add video to a page that is not my front page and one that does not have a slider. Using the snippets code I am able to embed video, but it appears way below the header menu and try as I can, I am unable to make this video sit under the menu. Any suggestions?

    Many thanks
    Carlisle

    • Andrei Post author

      If it’s not your front page and does not have a slider, it will never be executed, as the tc_slider_display() will never be run on that page. You need to hook your custom content to another trigger, present in your desired page. I understand you want your video before the page content. If that’s the case, you need to use this function, hooking the display of your html to __loop:
      add_action('__loop', 'html_before_loop', 1);
      function html_before_loop() {
      // if (is_page($page))
      echo 'Replace this with your own html. (Don\'t forget to escape apostrophes! :)';
      }

      Please note the commented condition. If you leave it like this, the function will output your html before the content of every page of your website, (homepage, posts, pages, search results… everything). In order to only display it on a specific page, you need to: un-comment the if and replace $page with the Page ID, Page Title or Page Slug of the page you want this displayed on. More about WP conditional tags here.

Comments are closed.