0

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!

  • 2
    Are you using body_class in your theme to set CSS classes on the body element? – Tom J Nowell Nov 27 '17 at 22:00
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

0

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.

  • If the page's title is a-voice-that-cares, you could also create a template file named page-a-voice-that-cares.php in the current theme's directory, and then WordPress would automatically load it for you. See the Template Hierarchy for details (or this handy interactive version). – Pat J Nov 27 '17 at 21:29
  • It would require you to never change the page title if we would work as you said? Just asking because I never used this approch yet. – Patrice Poliquin Nov 27 '17 at 21:41
  • You could probably change the page title, as long as the page slug remained the same. But yeah, for that reason, your solution might be the wiser option. – Pat J Nov 27 '17 at 22:07
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.