code snippets php Front page Slider Customizr Hooks tc_slider_display add_filter() WordPress functions

Add content below slider

by Andrei|Published 30 September 2013

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

add_filter('tc_slider_display', 'content_after_slider');
function content_after_slider($html) {
$after_slider = ''; //Put your HTML inside this var
return $html.$after_slider;
}

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.

AUTHOR

Andrei

I'm the designer who's been told by coders "It can't be done". So I taught myself coding and did it. Learned CSS, PHP in the process and fell in love with WordPress. Meeting Customizr really meant a lot. Not only have I found an awesome theme, but it also made me want to start giving back, in return for all the times I've been helped myself.

0 posts

30 thoughts on “Add content below slider”

30 comments

Justine
29 September 2015, 5 h 17 min

How to put contents right side of the slider image?
- Nicolas
  29 September 2015, 6 h 23 min
  
  Hi Justine, our team takes care of the support requests in the Customizr theme forum.
  Please open a new thread there about your issue, we’ll be happy to help 🙂
  Cheers.
Dario Orlando Fernandez
8 July 2015, 14 h 44 min

Oops x 2 ! Again. I mus be doing something wrong with the HTML tag. Whatever, the link is http://www.irachaleff.com. Please fix it. Thx and sorry x 2.
Dario Orlando Fernandez
8 July 2015, 14 h 39 min

Oops, please delete the previous comment or remove the ending tag. The correct link should be . Sorry!
Dario Orlando Fernandez
8 July 2015, 14 h 34 min

Hi All: I’m rather new to WP and Customizer. However, I figured out how to design a comprehensive and eye catching site for an american writer that is publishing a new book this week (July 7, 2015) . For sure, these support pages have been of vital importance to me and I appreciate it very much. But today I could not find an aswer to a requirement which I expected popular. How do I play an audio file at certain slide of the front-page slider preserving the slide’s background but displaying the standard player on top? Thank you in advance. Dario.
Nikola
1 July 2015, 22 h 02 min

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
Leonor
18 August 2014, 1 h 15 min

This info is worth everyone’s attention. When can I find out more?
Lance Rubin
11 August 2014, 17 h 24 min

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
  12 August 2014, 11 h 36 min
  Hi Lance,
  Just change the priority parameter of add_action() and you should be done :
  
  // Add metaslider after the header in the front page of site add_action (‘__after_header’ , ‘add_metaslider_to_front_page’, 50); //<= priority set to 50 => will be fired after the Customizr slider (priority 10) function add_metaslider_to_front_page() { if ( is_front_page() ) { echo do_shortcode(‘[metaslider id=201]‘); } }
froz
22 June 2014, 13 h 24 min

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..
- froz
  22 June 2014, 13 h 26 min
  
  my functions.php is as follows:
  [removed : too large piece of code]
  - Nicolas
    22 June 2014, 17 h 23 min
    
    Hi froz
    
    If you are new to Customizr (and WordPress), I strongly recommend to spend a few minutes to read this short guide on how to customize Customizr.
    
    If you still have issues then post a new thread in the the Customizr user’s forum and we’ll do our best to help you.
    
    I really hope this will help you 🙂 !
Rocco Aliberti
17 April 2014, 21 h 05 min

Will work without problems 😉
Kevin Standley
17 April 2014, 18 h 28 min
Ok. I got it to work. Just want to be sure I don’t cause problems elsewhere.
```
add_filter('tc_slider_display', 'content_after_slider');
function content_after_slider($html) {
$after_slider = ''; //Put your HTML inside this var
if ( tc__f( '__is_home' ) ) {
return $html.$after_slider;
}
else {
return $html;
}
}
```
Anyone see a problem with this?
Kevin Standley
17 April 2014, 16 h 55 min
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.
```
add_filter('tc_slider_display', 'content_after_slider');
function content_after_slider($html) {
if ( tc__f( '__is_home' ) ) {
$after_slider = ''; //Put your HTML inside this var
return $html.$after_slider;
}
}
```
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
```
add_filter('tc_slider_display', 'content_after_slider');
function content_after_slider($html) {
if ( tc__f( '__is_home' ) ) {
$after_slider = ''; //Put your HTML inside this var
return $html.$after_slider;
}
} else {
remove_filter('tc_slider_display', 'content_after_slider');
return;
}
```
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.
```
function kill_content_after_slider() {
    if ( tc__f( '!is_home' ) && function_exists( 'content_after_slider' ) ) {
        remove_filter('tc_slider_display', 'content_after_slider');
   }
}
```
I wasn’t sure if it was !is_home or !__is_home but I tried both.

Any help would be appreciated,
Kevin
William
21 March 2014, 16 h 21 min

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
14 February 2014, 3 h 14 min
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:
```
echo do_shortcode('[pluginshortcode]');
```
Thanks!
- Nicolas
  14 February 2014, 9 h 38 min
  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
  
  add_action ('__before_main_container' , 'display_shortcode_after_slider', 0); function display_shortcode_after_slider() { if ( ! tc__f('__is_home') ) return; echo do_shortcode('[pluginshortcode]'); }
  
  Share the result once done!
Argyle
3 February 2014, 20 h 57 min

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
8 January 2014, 6 h 37 min

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
  8 January 2014, 12 h 37 min
  
  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
    28 January 2015, 15 h 24 min
    
    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
16 December 2013, 11 h 27 min

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
  16 December 2013, 23 h 17 min
  Technically all you need is to change the last line into:
  
  return $after_slider.$html;
  
  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
    18 December 2013, 11 h 03 min
    
    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
      18 December 2013, 20 h 35 min
      
      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:
      
      #customizr-slider {margin: 40px; }
      
      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:
      
      #customizr-slider:after { content: "Put your text here!"; color: #777; display: block; background-color: #ccc; text-shadow: 0 1px 2px rgba(255,255,255,.5); }
      
      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
      
      $after_slider = your_custom_function();
      
      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
10 October 2013, 12 h 14 min

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
  10 October 2013, 14 h 07 min
  
  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
6 October 2013, 13 h 22 min

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
  6 October 2013, 22 h 44 min
  
  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.