Title: Customize header text
Last modified: April 6, 2017

---

# Customize header text

 *  Resolved [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/)
 * Hi,
 * Here my website build with Meteorite theme: [https://webkust.be/](https://webkust.be/)
 * Question: I want i little customizing the header text with php. Try it with a
   hook: **meteorite_inside_hero** ([screenshot](https://www.dropbox.com/s/7v36y3gskkfwkn5/Webkust%20%20%20Webdesign%20met%20passie.png?dl=0))
 * Test it with this code snippet:
 *     ```
       function custom_header() {
       	echo '<p>test</p>';
       }
       add_action('meteorite_inside_hero','custom_header');
       ```
   
 * But the text ‘**test**‘ displays below the header image. Is there a way change
   this in the code?

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9006559)
 * Hello,
 * please explain a little bit more what you want to achieve. That way I can understand
   what you’re trying and what would be the best to achieve it.
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9007031)
 * Hi,
 * In want edit 2 things in this section:
 * 1. Adding a divider
 * 2. On my website the first line shows ‘hallo’; i will change this text ‘by time’
   
   Example: -in the morning: show ‘Good morning’, -in the afternoon: show ‘Good 
   afternoon’,…
 * That’s the reason why trying hook in the header section.
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9008351)
 * You can add a divier with a little bit of css:
 *     ```
       .header-image-heading {
         position: relative;
       }
       .header-image-heading::after {
       content: "";
       background-color: #fff;
       height: 2px;
       position: absolute;
       bottom: -10px;
       left: 50%;
       width: 40px;
       margin-left: -20px;
       }
       ```
   
 * Regarding the second question, you could try to modify the file inc/functions/
   functions-header.php in a child theme or use a jQuery workaround like this. Add
   it in a child theme file or custom js plugin.
 *     ```
       jQuery(function($) {
         var now = new Date();
         var hours = now.getHours();
         var msg;
         if (hours < 12) msg = "Good Morning";
         else if (hours < 18) msg = "Good Afternoon";
         else msg = "Good Evening";
         $('.header-image-heading').html(msg);
       });
       ```
   
 * I didn’t really tested this very much, but it should work.
 * Maybe I will add the functionality to override functions in the next updates 
   of Meteorite. That way you would be able to copy only the function with the header
   content in a child theme and replace some scripts to your needs.
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9008394)
 * Hi,
 * Thats awesome 🙂
 * Your support is amazing!
 * All your code works perfect!
 * I add some little php that only shows the greetings on the homepage:
 *     ```
       <?php 	// When Homepage 612 (ID) is being displayed.
       if (is_page( 612 )) {
       echo '<script>';
       echo 'jQuery(function($) {';
       echo 'var now = new Date();';
       echo 'var hours = now.getHours();';
       echo 'var msg;';
       echo 'if (hours < 12) msg = "Goeiemorgen";';
       echo 'else if (hours < 18) msg = "Goede namiddag";';
       echo 'else msg = "Goeie avond";';
       echo '$(".header-image-heading").html(msg);';
       echo '});';
       echo '</script>';
       }
       ?>
       ```
   
 * See it in action on my homepage: [https://webkust.be/](https://webkust.be/)
 * Regards,
    Christophe
    -  This reply was modified 9 years, 1 month ago by [ctuxboy](https://wordpress.org/support/users/ctuxboy/).
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9009386)
 * Hi,
 * I do little changes.
    Adding the jQuery snippet in my child theme’s functions.
   php and hooked in the header:
 *     ```
       function custom_header_text() {
        if (is_page( 612 )) { // if page id = 612 (homepage)
         echo '<script>';
         echo 'jQuery(function($) {';
         echo 'var now = new Date();';
         echo 'var hours = now.getHours();';
         echo 'var msg;';
         echo 'if (hours < 12) msg = "Goeiemorgen";';
         echo 'else if (hours < 14) msg = "Goede middag";';
         echo 'else if (hours < 18) msg = "Goede namiddag";';
         echo 'else msg = "Goeie avond";';
         echo '$(".header-image-heading").html(msg);';
         echo '});';
         echo '</script>';
        }
       }
       add_action('meteorite_after_header','custom_header_text');
       ```
   
 * Works perfect 🙂
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9009786)
 * Hi Christophe,
 * great that it worked! 🙂 I forgot to apply that only on the front page – nice
   solution.
 * And thank you for your review, I really appreciate every feedback.
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9010403)
 * Hi,
 * Thanks to you, for the awesome support!
 * The positive review is with pleasure 😉
 * PS: Maybe this snippets can inspire or help other users.
 * Regards,
    Christophe
 *  [permaea](https://wordpress.org/support/users/permaea/)
 * (@permaea)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9011461)
 * Your site’s looking great, Christophe. The pink and the animated link underlinings
   are nice!
    And agreed about the snippets– I’m learning a bit already!
 * ~ Caelan
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9016240)
 * Hi [@ctuxboy](https://wordpress.org/support/users/ctuxboy/),
 * > Maybe I will add the functionality to override functions in the next updates
   > of Meteorite. That way you would be able to copy only the function with the
   > header content in a child theme and replace some scripts to your needs.
 * As mentioned above I added the some code to let users override the functions 
   from inc/functions/functions-header.php. Make sure to update the theme if you
   want to use these functions.
    Just copy the function code inside of `if ( ! function_exists()):`
   and `endif;` into your child themes function.php and do your changes there.
 * Regards,
    Terra Themes
    -  This reply was modified 9 years, 1 month ago by [terrathemes](https://wordpress.org/support/users/terrathemes/).
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9020041)
 * Hi [@permaea](https://wordpress.org/support/users/permaea/),
 * Thanks for the compliment.
    The pink color was a try 😉
 * Happy that i can help you (and maybe others) with this snippet.
    The underlined
   effect can you find on this website [http://codepen.io/](http://codepen.io/)
 * If you want this effect, paste it in your Child themes **styles.css**:
 *     ```
       /*PRIMARY MENU UNDERLINE EFFECT*/
       #main-nav li a:hover {
         color: #ffffff !important;
       }
   
       #primary-menu a:before, a:after {
         content: '';
         position: absolute;
         width: 0%;
         height: 2px;
         bottom: -2px;
         background: #f0077b;
       }
       #primary-menu a:before {
         left: 0;
       }
       #primary-menu a:after {
         right: 0;
         background: #f0077b;
         transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
       }
       #primary-menu a:hover:before {
         background: #fff;
         width: 100%;
         transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
       }
       #primary-menu a:hover:after {
         background: transparent;
         width: 100%;
         transition: 0s;
       }
       /*.PRIMARY MENU UNDERLINE EFFECT*/
       ```
   
 * (If you want change the pink color, change this: #f0077b)
 * I have my own small webdesign business and the last months i found no inspiration
   for building my own website, but then finding this awesome Meteorite theme and
   gives me inspiration for start over a new website 😉
 * The last years working with several page-builders (Divi, Visual Composer,…), 
   and for my personal experiences is SiteOrigins pagebuilder the best choice. Why
   i think that: it has not al the bells and wistles, but for the most websites 
   it is more then enough! And very important it is a robust, lightweigt, and stable
   builder.
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9020079)
 * Hi [@terrathemes](https://wordpress.org/support/users/terrathemes/),
 * Thats great!
 * So you can read in my previous answer to [@permaea](https://wordpress.org/support/users/permaea/),
   your theme gives me inspiration and motivation 😉
 * Regards,
    Christophe
 *  [permaea](https://wordpress.org/support/users/permaea/)
 * (@permaea)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9063801)
 * Hi Christophe,
 * Thanks for the code, I’ll check it out!
 * ~ Caelan

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Customize header text’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/meteorite/2.5.2/screenshot.png)
 * Meteorite
 * [Support Threads](https://wordpress.org/support/theme/meteorite/)
 * [Active Topics](https://wordpress.org/support/theme/meteorite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/meteorite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/meteorite/reviews/)

 * 12 replies
 * 3 participants
 * Last reply from: [permaea](https://wordpress.org/support/users/permaea/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/customize-header-text/#post-9063801)
 * Status: resolved