One of the popular free themes on the 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 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 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.

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

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.

Open the front-page.php file located in your child theme in your favorite code editor and find these lines

Your modifications will start just below these lines. Modify the existing markup and PHP code to look like this.

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.

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.

Leave a comment

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