Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to omit a header on a WordPress page?

Posted on 2013-12-30
21
Medium Priority
?
951 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 10
21 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 1716 total points
ID: 39746540
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 284 total points
ID: 39746546
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
ID: 39746590
Really helpful ideas. I am looking into these suggestions and will come back here later today.

Thank you, friends.

Eric
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 3

Author Comment

by:Eric Bourland
ID: 39749337
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 1716 total points
ID: 39749366
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
ID: 39750425
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
ID: 39750432
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
ID: 39750434
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
ID: 39750467
>>>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 1716 total points
ID: 39750555
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39754112
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
ID: 39756687
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 1716 total points
ID: 39756788
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
ID: 39756821
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
ID: 39756838
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
ID: 39756844
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
ID: 39756875
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 1716 total points
ID: 39756878
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 1716 total points
ID: 39756879
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
ID: 39756885
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
ID: 39756897
You're welcome. Glad we could work it out. Thanks for the points.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What's this? As a volunteer Page Editor for Experts-Exchange.com, I have noticed that many authors also have blogs, and pull articles from their blogs to post at Experts-Exchange. I appreciate each author sharing their blog content with our site …
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. 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 : Go t…

650 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