Adding a block of content below the header 49


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.

This code uses the Bootstrap base CSS syntax. Find out more here.


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


49 thoughts on “Adding a block of content below the header

  • Reply
    Robert Ferrer

    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?

      • Reply
        frank

        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.

        • Reply
          Nicolas Post author

          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

      • Reply
        David

        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.

        • Reply
          David

          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?

  • Reply
    Yosi Firdaus

    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?

      • Reply
        Yosi Firdus

        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

        • Reply
          Nicolas Post author

          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 “;”.

    • Reply
      Michel Girard

      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,

  • Reply
    Robert

    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

    • Reply
      Billy

      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
      }

      • Reply
        Billy

        Ooops, I messed up the code, here it is again

  • Reply
    Aviva

    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?

  • Reply
    Ornela

    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

  • Reply
    Ornela

    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!

  • Reply
    BM

    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)

    add_action ('__after_header' , 'add_content_after_header', 0);
    
    function add_content_after_header() {
    	//checks if we are displaying the home page
    	if ( !tc__f( '__is_home' ) )
    		return;
    	?>
    				
    		< ?php 
    			printf('%1$s',
    			__('My header message!')
    			)
    		?>
    
    	
    
    	
    		< ?php 
    			printf('%1$s',
    			__('View Products')
    			)
    		?>
    }
    ?>
    			
    		
    
  • Reply
    BM

    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

  • Reply
    Mike

    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

      • Reply
        Mike

        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

        • Reply
          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

          Hopefully this will come out ok in this post.

          Mike

          • Reply
            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

            • Nicolas Post author

              Hey Mike, thanks for sharing your code and no problem about multiple posts!This will surely help many people.
              Best
              Nicolas.

  • Reply
    Ayeglie Brazof

    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

  • Reply
    Nuno

    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

  • Reply
    Trisha

    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

    • Reply
      Nicolas Post author

      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

  • Reply
    merida

    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!

  • Reply
    Lynne

    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

  • Reply
    Steff

    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

  • Reply
    Xanina

    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 :D

  • Reply
    JOHNSON OLATUNDE

    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

  • Reply
    zach

    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

  • Reply
    Nina Palkino

    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

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">