WordPress Themes | A simple hack for hiding static header

Update: 29-Jan-2019

After the hack(s) below, I realized that the X-Business Plus theme has 15px white space between the header and content sections. It took a while to crack it, well finally I was able to patch the style.css file to fix that last “annoyance” also (These hacks are applicable to most of the themes available in the market, only few name changes inside the style.css files and different names for functions those are called)

White space fix. Copy the style.css file to a new file (for backup)

Open the style.css file with a decent text editor like “Notepad++”

Go to # Content & locate the following code

.page-content,
.entry-content,
.entry-summary {
margin: 15px 0 0;
}

Change the same to something like following:

.page-content,
.entry-content,
.entry-summary {
/* margin: 15px 0 0; Margin value was changed by Rajesh on 29th Jan 2019 to fix the white space between header and page content */
margin: 0 0 0;
}

Save the CSS file & you are all good. Enjoy ;)

Hi guys

Recently we decided to revamp our Joomla based corporate website & as we don’t do any e-commerce stuff through our existing website, chose “WordPress” for the CMS

After cross examining couple of dozen WordPress themes, we decided to go with “X Business Plus”, that looked apt for our requirements. The biggest challenge came when we started designing pages for our subsidiary companies. All looked good, except the Header region that didn’t have a toggle switch to show or not to show on specific pages and much of the header region was not necessary for the business pages, except the main menu.

The developer has confirmed that, with the current release of their theme, it is not doable and the ONLY possible solution in front of me was to “hack” the theme to achieve what we were planning (We have had another option, go with another theme that supports toggling the header on and off for specific pages)

After couple of google searches I landed on this page https://developer.wordpress.org/reference/functions/get_header/ & decided to give it a try.

Step #1

Create a new template. Every theme that you install will have standard structure(as far I know) & the templates those you associate with pages are available under

“wp-content\themes\<<theme-name>>\templates” path.

Following instructions about how to copy a template to new one, I copied the full-width-page.php to a new PHP file called corp-width-page.php & changed the name of the template within the newly created template file.

Although it looks like another comment, Template Name: is the string that WordPress reads to populate the available templates for the page. Notice the get_header(‘corp’) call within the 1st PHP block. I will come to that later. Once after the new template created, I copied the existing header.php to “header-corp.php” (This is in reference to the guidelines I obtained from WordPress developer document, that I mentioned earlier in this post)

Whatever string you will add after “header-” will be read by the template for the header part & that is the real hack. So in our case “corp” string forces the get_header() function to look for a header file named “header-corp.php” and if found, loads it, else loads the default header.php file!

Once after creating the new header-corp.php file, I started commenting do_action calls one after another until I came to the intended result…”hide the header on chosen pages”

So here is how it works. Open the page that you don’t want to see the theme header, change the page template to your newly defined template name. My case “Corporate Page” (Use WordPress’s “Edit” to make this change, which is neat and less confusing than a professional editor like Elementor)

Update the page. My new template is already calling ‘corp’ header page through get_header() function call, which has limited actions to suite the requirements.

One major issue I had with such a hack was, the header section was having the site’s primary menu. By not displaying the header, we lost access to the menu. So I had to add a navigation menu with every page that didn’t show the header. Easily doable with “Elementor” and navigation menu element.

Beside the thrill of another “hack”, I am eager to know how these hacks will affect the site when the theme is updated by the developer in the future. So to save some frustration, I have made a copy of everything that I copied and altered and kept in a safe place…who knows that would be waiting for me :)

regards,

rajesh