Howdy Customizr developer!
A clean and simple solution to display a block of content right below the header is to add an action to the ‘__after_header’ hook (located in the header.php template of the Customizr theme).
In the functions.php file of your child theme, you can write this kind of code that will display a block right after header in your home page.
//we add the action with priority set to 5 => it will be displayed in first position (before the slider if any) add_action ('__after_header' , 'add_content_after_header', 20); function add_content_after_header() { //checks if we are displaying the home page if ( !tc__f( '__is_home' ) ) return; ?> <div id="my-content-header"> <div class="row-fluid"> <div class="span8 text-center"> <?php printf('<h2>%1$s</h2>', __('My header message!') ) ?> </div> <div class="span4 text-center"> <?php printf('<a class="btn btn-large btn-warning">%1$s</a>', __('Call to action') ) ?> </div> </div> </div> <?php }
This code uses the Bootstrap base CSS syntax. Find out more here.
59 thoughts on “Adding a block of content below the header”
So, I was trying to add the code above, and it didn’t work so I deleted it, and now when I try to save the functions.php file all I get is this: Parse error: syntax error, unexpected ‘}’ in /home/content/p3pnexwpnas05_data03/16/2325416/html/wp-content/themes/customizr/functions.php on line 30
Please help!!!!
Hi how do I put in the page content (pic and text) below the header and above the featured page widgets?
thanks 🙂
Oops, the code above is all messed up. If the moderator can just delete the whole post above, I will re-post later when I figure out how to properly wrap the code in the correct tags. Thanks.
Thanks very much for this.
Was much easier than deleting hooks and so forth
Thank You for the customizr theme (3.2.3). Great work- congratulations.
I want to have a small textblock just after the header. Therefore I have added the code-smipplet from above in the functions.php of my childtheme. Principally it works… but I do have no menue anymore, as long as the code is active.
Thank You for Your hint.
Hi Gordian,
You’ll want to play with the action priority parameter and see if it solves this problem.
Hope this helps!
Hi Nicolas!
First off, great theme! It’s elegant, beautiful and full of nice looking features. I specially like the last update, it gives a more lively feel to it without it getting too much.
That being said, I cant get this snippet to work anymore after the changes with the header, if I put the header on the dynamic scroll setting (you’ll have to excuse my translation, I use a Dutch version of WP) it simply doesnt show. If I make the header static again it does work. I just want some text above my slider with the dynamic header because that is amazing!
Keep up the great work!
PS. I am aware that it “may not work” in the new version I was just wondering if there might be a known workaround or fix for it.
Hi Bert, I just updated the snippet and change the priority of the action from 0 to 20.
It should work now.
Thanks!
Hi Nicolas,
Thanks for the swift reply, you rock!
The adjustment however does not work as I expected. If I make the adjustment the text does show up, but below the Slider instead of above it. I fiddled with it and put it on 10, that seems to do the trick, it now shows up above slider and below header. Is there any reason I should not keep it on 10? I am guessing no, but some verification can’t hurt 🙂
Thanks!
I have been looking for some details on how to insert text snippets in some of my posts to make them more entertaining. This has been very confusing and I do appreciate all of the comments and suggestions.
Yours,
Nina
Hi Nicolas,
can You please tell us what is the best way to actually add content (background image) to this newly added block of content.
Through css or php? Example would be very usefull to newbies like me 🙂
Best regards
Hi Zach, if you need to add content with a background, I would recommend to use this snippet.
Hope this will help you
Hi Nicolas,
Thanks for taking the time to help out with Customizr issues. However, some of us are finding it challenging to make your suggestions and advice work!
My questions is how is the functions.php called and executed when placed in Customize Child Theme? Mine is to do with slider sizes and using your suggested snippet, I placed functions.php in:
..\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-content\themes\customizr-child\parts\functions.php
No changes was noticed at all! No errors or warnings whatsoever! I have trouble shooted for days and exhausted! Please advice.
Many thanks,
Johnson
Hi Johnson,
The path for functions.php must be customizr-child\functions.php instead of customizr-child\parts\functions.php.
Some resources for you :
http://www.presscustomizr.com/snippet/creating-child-theme-customizr/
http://code.tutsplus.com/tutorials/how-to-modify-the-parent-theme-behavior-within-the-child-theme–wp-31006
Best
hi Nicolas, first of all, I want to really that you for your theme and for all the hooks and snippets. For the moment I’m not to much into php programmation, only into html and css, but you help a lot with your explanations and I’m improving 🙂
I would use your code above, not for home, but for some specific category, that one: http://www.tererico.es/blog/category/encuentros/
so I need to change
if ( !tc__f( '__is_home' ) )
for the id of the “encuentros” category, but I don’t know how to know that id 🙁
I’ve write that
if ( !tc__f( '__is_category-encuentros' ) )
, but doesn’t run¿could anyone help me, please?
I’m spanish, so I expect you understand my bad english 😀
Hi Xanina,
you can make use of the is_category() wordpress function and specify the id or slug of your cateogry, in your case, it would be :
Hope this helps!
Hi Nicolas,
First of all It’s a great theme!
Well, this snipper is helpful, but I am looking for a change that maybe you can help me.
I want to add content between the header and the page title (the featured image of each page and blog). But this content it has to be shown at all pages but not at the homepage. Is there a way to do that? and taking the feature image of each page?
Thank you very much!
Steff
Hi Steff, here are some directions on how to do it.
=> Not home/front conditions : ! is_home() || !is_front_page()
=> Adding content before the page/post heading : add_action ( ‘__before_content’ , ‘my_content’);
=> Adding the post/page thumbnail : use the_post_thumbnail()
More about conditional tags : http://codex.wordpress.org/Conditional_Tags
More about hooks http://codex.wordpress.org/Plugin_API
Hope this will help!
Hi Nicolas,
Love this theme but still a newbie and have too many ideas for my own good…
I would like to add a block of text below the slider is there code to do this?
Also, Is it possible to add page content that would look like the featured pages (expanding bubbles/images) on a page other than my home page?
thank you for this and all of your help,
Lynne
Thanks for such a great theme!
Is there any way to modify this code to insert an image instead of text? I’m fairly new to php.
Cheers!
Hi
When inserting this code, it shows at the below my slider rather than above it on the home page. Not sure why the positioning is wrong? Also, it possible to place this on other pages and not on the header?
Thanks,Trisha
Hi @trisha, the position of your added block is determined by the priority of the action (set to 0 in the example).
Of course you can place this block on other pages, in the example it is displayed only on home/front page because of the following line of code :
Just remove it and add any conditional tags you need.
More about conditional tags : https://codex.wordpress.org/Conditional_Tags
More about WordPress hooks API : http://codex.wordpress.org/Plugin_API
Hi Friends, thank you all for your input and thank you Nicolas for the great theme.
I have a 3 language website and I would like to use this snippet according the language for each of the three home pages. I am using Polylang plugin (don’t know if it is relevant) but the text that I write doesn’t show in the translation strings.
Is there a way to do this?
Thank you for any help you can give me!
Cheers
Hello Nicolas.
Thanks a lot for the template it’s really great!!!
Just one question: is there a way to put another logo at the right of the navbar?
Thanks
Ayeglie
Hello Nicolas,
Thanks so much for this theme! I love it! I used the above code to place text below my header and it works fine. My question is, could you tell me how and where to add the code to change the color and if possible the font for the text? Thanks again so much for all your work!
Mike
Hi Mike, I am glad you appreciate the theme and the snippet!
To style anything in Customizr, you might want to check this page on how to customize the Customizr WordPress theme.
About font styling in CSS, here are some interesting ressources for you : Font CSS Properties
Hope this will help you!
Thanks for the reply Nicolas! Unfortunately the links you directed me to were not able to help me with my problem of changing the color of the text I added above the slider/below the header. But after some trial and error I figured out the solution. If anyone else is having the same problem, how to change the font color of the text you have added under the header in Customizr theme, here is how I did it.
If you use the code Nicolas provided above in your child theme functions.php file, you will see a portion of the code that looks like this
printf(‘%1$s’,
I simply added this code for color right between the first and the % sign, so the code now looks like this
printf(‘%1$s’,
Then just click the update file button in the Wordpress editor and you should be good to go. The #ff0000 I used changed the color of the text to red. If you are looking to change to a different color you will need to find the correct code for whichever color you want to change your text to. Hope this helps anyone who ran into the same problem I did, and Thanks again to Nicolas for all the great work on this theme and everyone who is helping out in this forum with all the questions we have.
Mike
So I guess I should read instructions more carefully before I go and paste code in my posts. After I went back and read my previous post I noticed that all the code did not show up, then I saw the notation about adding the special tags before including code in my post. So I will try again.
The code that you need to look for is this
The code I added to change the color of my text was this
The way the code should look when you are done is this
printf('%1$s',
Hopefully this will come out ok in this post.
Mike
So apparently it stll didn’t work correctly so I am going to just try and type in the information here
the line of code you are looking for starts with printf( then the h1 starting and ending tags with this in between the tags, %1$s
the code you need to add right after the first h1 tag and the % sign is the html span=color code, followed by the hexidecimal code for whichever color you want to change the text to, in my case I wanted to change the text to red so I used #ff0000.
Sorry for the multiple posts and problems and I hope if you need this information you can make sense out of all this.
Mike
Hey Mike, thanks for sharing your code and no problem about multiple posts!This will surely help many people.
Best
Nicolas.
Sorry. The code pasting functionality via comments is hopeless. to fix errors, just add a open php tag on top and corresponding close tag at the bottom
Thanks for sharing your solution.
(I have made the necessary fixes for the code pasting)
The code posted above has missing tags causing errors. I guess that’s what others have been complaining about. Here is the proper code with correct tags.
it will be displayed in first position (before the slider if any)
Dear Nicolas
Thank you for your reply. The moderator from WPML wrote a code for me but he told me to ask you what is the [name of your text domain]. Please see below.
<?php
$line_break = "”;
sprintf( __(‘Yellow Bridge is an international knowledge center that inspires %s and supports small and medium organizations
to improve their performance through sustainability.’, [name of your text domain] ), $line_break );
?>
Thank you very much!
Dear Nicolas
First of all thank you for the amazing theme.
I have a website with multiple languages. How do I make the text to show up in different languages when a different language is chosen= I am using WPML plug in.
Thank you for your help
Hi, did you take a look to the great WPML documentation about this : http://wpml.org/documentation/getting-started-guide/language-setup/
This should provide all answers
Hope this will help!
Hello,
My website gave this error
Parse error: syntax error, unexpected ‘/’ in /var/www/verbeterforum/web/wp-content/themes/customizr/functions.php on line 318
what can i do?
Hi this is a common php error : http://www.phpreferencebook.com/misc/php-errors-common-mistakes/
Hard to say what to do in your case but try to use a child theme to do any customizations in functions.php
Hope this helps, cheers
hi sir,
how will give link to “Call to action” ?
Hi ilker,
If you didn’t find solution till now, I can help you. This is my code:
//checks if we are displaying the home page
if ( !tc__f( ‘__is_home’ ) )
return;
?>
<?php
printf('%1$s’,
__(‘My header message!’)
)
?>
<?php
printf('Button title‘
)
?>
<?php
}
Ooops, I messed up the code, here it is again
Thanks for sharing @billy!
This piece of customization is pretty useful. Can you kindly detail a little bit on the next step? I mean, once you have added this functions.php to the child theme directory, an little basic example on how to insert a
right at bottom of the slider, would be great. Thank you
hi
i insert to code.. be superr…but how will I insert the link to Call to action ?
Is it possiblo add qtranslate widget in this block? How?
Thanks for answer!
Hello Joanna,
I would like too to get the solution, for replacing the social box in the heather social-block.
If you have found the solution, you can share ?
Thanks,
hi nicolas
I add the code into functions.php child theme, then after that there is internal database error showing (when I preview the site). but after I delete the code, it going back to normal. How does it happend?
Hi Yosi, Hard to say there could be multiple reasons for that.
The code should work as it is…
Hi
It’s me again,
I found this error on the server error log, it said : PHP Parse error: syntax error, unexpected ‘}’ in ………. on line 30. What does it means? I’m sorry but I can find anything like this in the forum. thanks in advance
Hi, this means that there’s an error in your code but again, this could have many sources. The most common is to forget a comma or a closing point “;”.
I tried this and found a parse error in line 30 ‘}’ and could not get it to run. Ideas?
The snippet has been tested and should work.
Check this post about common errors in php : http://www.phpreferencebook.com/misc/php-errors-common-mistakes/
Hope this will help
hello Nicolas. Many thanks for this great theme. i just have a question about this snipset. I am not yet good in php. do you just paste the code in the child theme, in your functions.php? or something different i have to do, as i can see the ” after header, hook stuff” which i don’t understand properly. May u help me with a simple guide. coz i have tried pasting the code in child theme and its not working.
Hi Frank, yes this code has to be copied in the functions.php file of your child theme.
It will basically excute the piece of code where the hook is located.
Hope this will help you
Thanks, I referred to your list of mistakes to check but also I simply copy and pasted your code into an empty functions.php file and it returned:
Parse error: syntax error, unexpected ‘}’ in /home/content/32/9587932/html/wp-content/themes/ChildCSS1/functions.php on line 29
Any idea what the problem could be? Sorry, very new at this.
The error, and this might be true for other novices here, was that I did not have an opening <?php tag in the beginning (since I/we are just copying and pasting this code into an otherwise empty functions.php file).
I hope this helps others struggling to get this to work.
Nicolas, since it now displays for me I'd like to use this space under the header to add an image instead of the 'call to action' button. Is there a simple way to replace whats there to do this?
Hello,
I’m trying to add a font to the site, and I need to add some code to the header, …
and
…
but I’m not sure how to do that. Could you please help?
Hello Robert,
Check this snippet to add a Google Font to Customizr.
Hope this will help, cheers.