How to edit the font color of the H1 on a single page?

Question

I'm working on a new site that includes memberships, and I'd like the Page Title to be a different color on the membership page without changing on any of the other pages. I've seen code that helps change the home page title color (using .home) but none that use a different page. The page title is "A Voice That Cares" so even if I use this code, it doesn't change:

.a-voice-that-cares .gk-logo-text.inverse > span {
    color: blue!important;
}

or

.a-voice-that-cares .h1 {
    color: blue!important;
}

Any help/suggestions would be greatly appreciated! Thank you!

Answer 1

If you're using body_class and post_class correctly, you should have CSS classes you can match against that take the form postid-0001 etc

Next you need the CSS to change the h1 colour

Find the ID of your membership page, and use the CSS class in your CSS selector so it only matches on that page.

e.g. .postid-0001 h1 { color: red; }

Ofcourse your membership title may not be a h1 element, and at this point it's a pure CSS question. Use the customizer to put your CSS code in and hey presto, your title colour has changed

Answer 2

Firstly, I would recommend you to create a custom template page (WordPress templates documentation).

<?php /* Template Name: Example Template */ ?>

On your new page, you can copy-paste the HTML code from page.php for example and do a quick work-arround.

<?php

/* Template Name: Membership */

get_header(); 

?>

<div id="primary" class="site-content">

    <div id="content" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <h1 class="membership-title"><?php the_title(); ?>

                <!-- Your content ... -->

        <?php endwhile; ?>

    </div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

And in your CSS, you would only have to create your class.

h1.membership-title {
    color: blue;
}

After you saved and uploaded your files, return in your Admin panel and change the page attribute parent to the one you need.

With this new template, all default pages will have the default style you have seted and the new page will have the new style. This style will only apply to the pages you have seted to Membership.

Hope it was what you were looking for.

Answer 3

Here's how I'd do it (probably in the active theme's functions.php, since you're trying to affect how a page looks):

add_action( 'wp_enqueue_scripts', 'wpse_287062_add_style', 100 );
function wpse_287062_add_style() {
    if ( is_page( 'a-voice-that-cares' ) ) {
        wp_add_inline_style( 'stylesheet-handle', 'h1 { color: blue !important; }' );
    }
}

You'll need to figure out your theme's stylesheet-handle.

For an example of how to do this, I'll use the current default theme, Twenty Seventeen. When I view the source of a WordPress-generated page that uses the Twenty Seventeen theme, I see the following line:

<link rel='stylesheet' id='twentyseventeen-style-css'  href='http://example.com/wp-content/themes/twentyseventeen/style.css?ver=4.9' type='text/css' media='all' />

The stylesheet handle is the id, minus the -css suffix. So in Twenty Seventeen's case, the stylesheet-handle in the code above should be replaced by twentyseventeen-style.

References

• is_page()
• wp_add_inline_style()
• wp_enqueue_scripts hook