Solved

How to omit a header on a WordPress page?

Posted on 2013-12-30
21
911 Views
Last Modified: 2014-01-04
WordPress 3.8

I have a WordPress site, with a navigation menu, and WordPress displays the header on each web page just as it should: Home, About, Services, and so on.

On the Home page I would like to omit the Home header. Meaning, I want to omit

<h1>Home</h1>

on the home page.

Yet I still want menu item "Home" to appear in the navigation menu at the top of the page.

Can I insert an IF-THEN statement in header.php? (This is how I would do this task in ColdFusion, for example -- If "Home" page, Then omit "Home" header.)

Or is there a simpler way?

Thank you for your help.

Eric
0
Comment
Question by:Eric Bourland
  • 10
  • 10
21 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 429 total points
Comment Utility
There are a couple of ways to do that.

It's a good idea with WP to create a custom theme and edit that rather than edit the original header.php but that's up to you.

In your custom header.php you could add this to a logical place in the head section of the page:

if (is_front_page()) {
            echo "<style type=\"text/css\">\n#masthead h1.site-title { display:none }\n</style>\n";
}

Alternately, in your custom functions.php you could add:

<?php
function home_styles() {
        if ( is_front_page() ) {
        ?>
        <style type="text/css">#masthead h1.site-title { display:none }</style>
<?php
            }
}
add_action('wp_head', 'home_styles');
?>
0
 
LVL 14

Assisted Solution

by:Dzynit
Dzynit earned 71 total points
Comment Utility
Yes, you can use an if/then.
The if to check for is is_front_page().
Without seeing your header.php code, you'll have to adjust accordingliny:

<?php if (!is_front_page()) { ?><h1><?php the_title(); ?></h1><?php } ?>
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
Really helpful ideas. I am looking into these suggestions and will come back here later today.

Thank you, friends.

Eric
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
Hi again.

First -- happy new year. I hope you are all out celebrating with friends and family.

When you get back, I could use a little more help. I am not sure what to adjust in my header.php file. I copy my header.php file, below, in full. My problem is -- I don't see any place in the header.php file that invokes the page title. Am I just missing something? Thank you for your help, again.

Eric

<?php
/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<?php if ( get_header_image() ) : ?>
	<div id="site-header">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
		</a>
	</div>
	<?php endif; ?>

	<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
			</div>

			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
				<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
			</nav>
		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->

	<div id="main" class="site-main">

Open in new window

0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 429 total points
Comment Utility
Line 45:
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

Try @Dzynit's idea first, it's the simplest. If it works, @Dzynit gets the points.

<?php if (!is_front_page()) { ?><h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php } ?>
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
Making progress.

At line 45 I did:

<?php if (!is_front_page()) { ?><h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php } ?>

Open in new window



But the <h1>Home</h1> is still there. In page source, the markup looks like:

<header class="entry-header"><h1 class="entry-title">Home</h1></header><!-- .entry-header -->

I am studying the syntax of the statement

<?php if (!is_front_page()) { ?><h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php } ?>

Open in new window



(I am coming to this from a ColdFusion perspective, so I have to really adjust my thinking.)

It looks like the statement is saying: If this is the front page, then apply H1 and class "site-title" but remove text between the <a href> and </a> tags.

I wonder if the condition if (!is_front_page()) is being recognized?

Thank you again for your time and patience. No hurry with this task -- it is not urgent.

Eric
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
What it is actually saying, if this page is NOT ( ! ) the front page, emit everything inside this conditional statement. Ignore the other php code inside the conditional. That's just standard WordPress code.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Is it possible that what you are calling the home page is not actually the home page. In WP, the home page is the one that loads when no query is offered in the URL.
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
>>>What it is actually saying, if this page is NOT ( ! ) the front page, emit everything inside this conditional statement. Ignore the other php code inside the conditional. That's just standard WordPress code.

Hmm. So this:

<?php if (!is_front_page()) { ?

means "if this page IS NOT". Does the "!" exclamation point mean "IS NOT"?

Does this: <?php if (is_front_page()) { ?

mean "if this page is"?

Just curious. =)

>>>>Is it possible that what you are calling the home page is not actually the home page. In WP, the home page is the one that loads when no query is offered in the URL.

This is occurring on the base URL of the page -- no queries at all are offered in the URL.

I wonder if I need to adjust this conditional statement to say:

IF this page is "is_front_page"

THEN omit the <h1>page</h1>

Also ... I notice that I might be editing the wrong template. I notice that

<header class="entry-header"><h1 class="entry-title">Home</h1></header><!-- .entry-header -->

occurs in template: content.php

but not in header.php.

Like so:

	<header class="entry-header">
		<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
		<div class="entry-meta">
			<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
		</div>
		<?php
			endif;

			if ( is_single() ) :
				the_title( '<h1 class="entry-title">', '</h1>' );
			else :
				the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
			endif;
		?>

		<div class="entry-meta">
			<?php
				if ( 'post' == get_post_type() )
					twentyfourteen_posted_on();

				if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
			?>
			<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
			<?php
				endif;

				edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
			?>
		</div><!-- .entry-meta -->
	</header><!-- .entry-header -->

Open in new window


So I wonder if I need to edit content.php.

I am continuing to experiment with this. Thank you again for your advice.

Eric
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 429 total points
Comment Utility
IS front page:

<?php if (is_front_page()) { ?

IS NOT front page ( ! ):

<?php if (!is_front_page()) { ?

You should be editing the header.php file for most themes especially the built-in ones. Yours could be different. If you have created a child theme from another theme then you should copy the header.php to the child theme folder and edit that. Either way, the file will reside in the folder with your theme name, so:

 wp-content/themes/<your theme>/header.php

Here's the header.php from the built-in twentyfourteen theme in WP 3.8:
<?php
/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<?php if ( get_header_image() ) : ?>
	<div id="site-header">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
		</a>
	</div>
	<?php endif; ?>

	<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
			</div>

			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
				<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
			</nav>
		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->

	<div id="main" class="site-main">

Open in new window

The line you need to wrap in the conditional is line 45.

The conditional syntax is this:

<?php if (!is_front_page()) { ?> .... <?php } ?>

Any php code or markup where the ellipsis ( ... ) is will be emitted to the rendered page IF the page is NOT the front page.

I'm a little confused that your <h1 has class="entry-title" in the view source. It should say class="site-title". Possibly you are looking at the markup for a single post rather than a page?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
tommyBoy,

Thank you for this. I really appreciate your patience.

Yes, I am using just the basic twentyfourteen theme for now. It is basic and simple and I am using it to "practice" operations like omitting the <h1>Home</h1> header on the front page.

So, you are confident that I should edit only header.php, and NOT edit content.php?

class="entry-title" shows up in content.php, not in header.php -- which is why I was looking at content.php as something I should maybe edit.

Also -- I am working on making a twentyfourteen child theme -- and I will do all of these updates in the template files of the child theme. I am following the instructions here: http://codex.wordpress.org/Child_Themes

I will set up the child theme and try again to edit line 45 of header.php per your note. Thank you again for your help. Hope your day is going well.

Eric
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
Hi, tommyBoy,

My child theme is called twentyfourteen-child; so far it contains only:
header.php
content.php,
style.css

I have selected this theme in the WordPress dashboard, and it is working fine.

On line 45 of header.php, I tried:

<?php if (!is_front_page()) { ?><h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php } ?> 

Open in new window


...but the <h1>Home</h1> remained.

I think I am missing something still. What do you think I could be doing wrong?

Thank you again for your help.

Eric
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 429 total points
Comment Utility
I have recreated your steps. I have a new WP site, v3.8, called "Wordpress 3.8". The front page, when I first opened it, looked like this:
Before I created a twentyfourteen-child theme, copied styles.css, content.php (not needed) and header.php to the new theme folder, edited the top of styles.css to include the template, and activated the new theme. I opened the header.php file in an editor and copied and pasted the line you posted as a replacement for the existing <h1> tag block. I also added a second line as a test which prints the word TEST in red font if (is_front_page()).
My masthead section for the header.php file now looks like this:
	<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
        
			<?php if (!is_front_page()) { ?><h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php } ?>
            
            <?php if (is_front_page()) { ?><h1 style="color:red">TEST</h1><?php } ?><!-- THIS IS A TEST -->

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
			</div>

			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
				<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
			</nav>
		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->

Open in new window

My front page now renders like this, "Wordpress 3.8" in white text removed, "TEST" in red font added:After
So, I was not able to reproduce the trouble you are having.

A couple of things to check. You said you were able to activate the twentyfourteen-child theme without issue. That means you must have edited the comment section at the top of the style.css file you copied to the twentyfourteen-child folder. At the top of that style.css you should have the template specified. Mine now looks like this at the top with all other comments removed:
/*
Theme Name: Twenty Fourteen Child
Template:       twentyfourteen
Version:        0.1.0
 */
To verify that you are seeing content generated by the twentyfourteen-child/header.php file, add the same "TEST" line in that I added to mine.
Still, not seeing the change reflected in the rendered page? Do the same thing temporarily to the header.php file in the original twentyfourteen theme folder. If you see output from that, your child theme is not being recognized.
Not that it should matter, but perhaps clearing your browser cache or restarting your local web server might help.
Tell me what the URL looks like on your front page. You can see mine in the images.
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
Hi, tommyBoy,

Thank you very much for that helpful reply. You are making a lot of sense.

Here is the web site:

http://ebwebwork.com/

I used your masthead section for the header.php file ... as you can see in the web site.

In the style sheet in the child theme, I have only these lines:

/*
Theme Name: Twenty Fourteen Child
Template:       twentyfourteen
Version:        0.1.0
 */

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

So, the TEST does show up in read. That works. But do you see the HOME, on the front page? I am trying to get rid of HOME. =)

So am I editing the right place in the correct template?

Eric
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
You are definitely editing the correct file, twentyfourteen-child/header.php, in order to change the original site title on the front page to a red "TEST".

The word "HOME" however, that appears on your front page, is the title of a post. No need to get your hands dirty in the Wordpress PHP coding morass to edit that. Just go to Posts --> All Posts in your Dashboard and look for the one titled "Home" and click Edit. Remove the "Home" title and leave it blank, click Update.

I hope you don't mind that we went all the way around the world, digging deep into Wordpress code, just to meet at the coffee shop that was twenty feet away (figuratively speaking).
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
tommyBoy,

Actually, "Home" is a page, not a post. There are no posts at all on this web site. Home, About, Services, and so on ... those are all pages.

It looks like the "Home" is generated in the content.php template ... does that sound right?

Eric
0
 
LVL 3

Author Comment

by:Eric Bourland
Comment Utility
tommyBoy,

I find that if I edit content-page.php, that seems to affect the HOME and other page titles.

I am going to try to apply the IF-THEN statement to content-page.php.

Do you think  I am going down the right path here? Or to heck in a handbasket? =)

Eric
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 429 total points
Comment Utility
You have the right page to edit however we are confusing terms here. While your home page URL displays the root of the site, it's not because it is the front page of the site. It's because you modified your settings to make the page called "Home" into a static front page. So, "is_front_page()" will not work.

Hang on, I'm working on it.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 429 total points
Comment Utility
Actually, never mind all that. It is still considered the front page. This works when placed in content-page.php.

if (! is_front_page()) {
                  the_title( '<header class="entry-header"><h1 class="entry-title">', '</h1></header><!-- .entry-header -->' );

            }
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
Comment Utility
This solution worked like a charm. Thanks very much to tommyBoy for patient and expert help. I understand the solution -- and I understand the roundabout way that we got there. I will be more careful to define my terms when I post a question in EE. =)

Thank you again, and take care.

Eric
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
You're welcome. Glad we could work it out. Thanks for the points.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now