How To Center The Jumbotron Headline In The Free Matheson WordPress Theme

One of the popular free themes on the WordPress.org repository, is Matheson, by Bavotasan.

The customization features offered by this nice, clean theme, are powered by the WordPress Customizer, therefore they can be easily implemented and previewed in real time as they’re being made.

One WordPress.org forum question that came up asked how to center the big headline just below the featured image on the home page. It’s not something that can be done using simple CSS however, neither is there an option in the Customizer panel.

What’s there to be done? Here’s how easy it is to solve this problem.

Where Do I begin?

Here’s what the headline section looks like on the Matheson theme.

Free Matheson WordPress Theme Jumbotron Headline
Free Matheson WordPress Theme Jumbotron Headline

We have the headline on the left and a block of text on the right. The request I came across on the WordPress.org forum was to eliminate the block of text and center the headline.

Therefore we have 2 tasks ahead of us: getting rid of the block of text and moving the headline to the center of the page.

Task 1: Getting Rid of The Block of Text

This is an easy thing to do. Just head over to the Customizer page inside the WordPress admin panel by selecting Appearance -> Customize from the admin menu. From there, select the Jumbo Headline section from the list of Customizer sections on the left.

Here you’ll find 2 textboxes. The first is the Title textbox, and contains the headline’s text. You can change its message from here. Below, you’ll find the Text textbox, which contains the block of content we’re looking for.

Free Matheson WordPress Theme Customizer
Free Matheson WordPress Theme Customizer

Just click your mouse inside the Text textbox and delete all its content. Finally, click the Save button on top of the Customizer panel, and you’re done!

Task 2: Centering the Headline

Centering the front page headline in the WordPress Matheson theme using CSS is not feasible. This is because its position doesn’t depend on a CSS style, but on the HTML markup of the Twitter Bootstrap grid.

Here’s its barebones structure.

<div class="home-jumbotron jumbotron row">

 <div class="col-md-6">
  <!--HEADLINE here -->
 </div>
 
 <div class="col-md-6">
  <!--BLOCK OF TEXT here -->
 </div>
 
</div>

The grid above is made of a row with 2 equal length columns, each being exactly half the page, .col-md-6 being the class for a column that spans half the page in the Twitter Bootstrap framework (visit the Bootstrap page to know more). The column to the left contains the headline, that on the right contains the block of text, or at least used to contain the block of text.

To have the headline bang in the middle of the page, you need to eliminate the div element where the block of text was, and replace the class .col-md-6 with the class col-md-12 in the div element containing the headline. This will get the div to span the entire width and consequently the headline, which is already aligned to the center, will end up being placed in the middle.

Here’s how to go about it.

#1 Creating A Child Theme

This customization involves changing the markup of one of the Matheson WordPress theme’s template pages, therefore it’s recommended that you to create a child theme rather than hacking the original template’s files.

If you need guidance on how to do this, please visit the Codex page on Child Themes, or follow my tutorial article here on WPThemeMakeover.com.

#2 Modifying The Template File In The Child Theme

Your modifications will include a bit of PHP. Copy front-page.php inside the matheson folder into your matheson child theme’s folder and follow these steps.

  1. Open the front-page.php file located in your child theme in your favorite code editor and find these lines
    <div class="home-jumbotron jumbotron row">
    
  2. Your modifications will start just below these lines. Modify the existing markup and PHP code to look like this.
    <div class="home-jumbotron jumbotron row">
    <?php if ( ! empty( $bavotasan_theme_options['jumbo_headline_text'] ) ) { ?>
    <div class="col-md-6">
     <h1><?php echo apply_filters( 'the_title', html_entity_decode( $bavotasan_theme_options['jumbo_headline_title'] ) ); ?></h1>
    </div>
    <div class="col-md-6">
     <p class="lead"><?php echo wp_kses_post( html_entity_decode( $bavotasan_theme_options['jumbo_headline_text'] ) ); ?></p>
    </div>
    <?php }  else { ?>
    <div class="col-md-12">
     <h1><?php echo apply_filters( 'the_title', html_entity_decode( $bavotasan_theme_options['jumbo_headline_title'] ) ); ?></h1>
    </div>
    <?php }  ?>
    </div>
    

    The original code checked that the Customizer option for the jumbo headline was set by the user, and if it was, it built the 2-column structure containing the headline and the block of text.

    The modified version keeps this check, but it adds a further one. If the block of text has been set, then the 2-column structure is kept. On the other hand, if the user has deleted it in the Customizer textbox, then the HTML markup will render a 1-column section.

  3. Save your changes and refresh your browser. This is what the Matheson WordPress theme should look like now

    Matheson WordPress Theme Centered Jumbotron Headline
    Matheson WordPress Theme Centered Jumbotron Headline

That’s it. You’re done, congratulations!

Let me know how your customizations go in the comments below.
Advertisements

4 thoughts on “How To Center The Jumbotron Headline In The Free Matheson WordPress Theme

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s