Support » Plugins » Hacks » how to change site title for different pages with css

Viewing 9 replies - 1 through 9 (of 9 total)
  • Becky Davis


    WCEU 2016 Contributor

    I suppose you could do with just CSS if you used the body class and different template pages for each different site title. But a cleaner way would be to make the site title a custom field, then you could specify it for whatever page you wanted.
    Won’t changing your site title/logo on different pages confuse your audience?

    Hi Becky,

    As I think about it, I just need to able to change the subtitle text.

    Nature’s Healing – Tital
    Acupuncture and Herbal Medicine – subtitle

    But on my online courses page views I wanted to change the subtitle to
    Nature’s Healing
    Online Courses (subtitle changes)

    Changing the title would be confusing but changing the logo image could work as well.

    Moderator bcworkz


    You could use the ::before and ::after pseudo classes to cause content to appear before or after the subtitle. If the subtitle were hidden, all anyone would see is the before or after content. You would need a unique selector for each different sub-title with a corresponding rule for the content. If you’re not too familiar with CSS I question if this is a good idea.

    I like Becky’s idea of a custom field. The PHP to get the custom field and display it as a sub-title is fairly simple and the same code will work in all cases. The variation is in what’s entered in the custom field. You can have a default value in case someone forgets to enter a custom field on a particular page.

    If there’s some other existing value on the page that can be referenced, you could instead create a data array of titles keyed to this existing value. No need for custom fields then, but some maintenance of the array is required if a new value is introduced. This may make more sense if there’s a lot of posts with only a few different titles.

    This would help you to do with some jQuery by replacing the whole element with another one by simply targeting page with specific ID. This will allow you to replace the h1 only on that page.

    read some information in this site

    Becky Davis – I’m not clear on your body class and template suggestion.
    In Canvas, as a hook, I am able to add subtitle text to appear below the Logo image (

    Are you suggesting I can create an ID in the div tag <div class=”switch-subtitle”><h2>Original Subtitle</h2> and then the subtitle that appears will depend on the template set for that page?

    How would I set css code to determine which template is being used?

    Using a template so that when a new page comes along I can simply set the template for that page that will carry the alternate subtitle but I’m not sure how to identify the template from css/styles.css.

    Moderator bcworkz


    The only way for CSS to know what template is used is to have the template output a unique class or id for the container you want to affect. Then the CSS will only apply the style for that one container with the unique class or ID.

    But that’s rather convoluted and not making use of the power of templates. Why not have the template just output the content you want in the first place? Templates are for content, CSS is for appearance. It’s best to always keep the two separate.

    OK So I get it – CSS for appearance and templates for content. I have a different page template selected for the alternate pages I want to use an alternate subtitle on. When I edit this template I see code i.e. get_header (). I’m not sure what to do but I’m going to ask if this makes sense: I need to change this get_header () code so it pulls in a different header with the alternate subtitle? Does that sound right and if so how do I change that code? Do I add a reference name to an alternate header.php page between the parenthesis ()?

    As a second method I’d like to ask this – I use woothemes canvas and I have a subtitle div tag in a hook through the dashboard > Canvas > hooks – I’d like to keep the control and organization of this alternate text there. I believe I can only enter html code and not php (I’m not sure) so my question is – can I enter 2 different subtitle div lines and unique selectors and then use some rule to make a choice between the subtitles depending on if the alternate-page-template is used or not? I can create the unique selector and add css code i.e. ::before or :: after but how would I make a rule? If this is possible I’d like to do this second method to keep access to these subtitles through the canvas hook and use page templates per alternate page but I just don’t understand how to create a rule.

    Below I listed my subtitle and its alternate below it which is saved in the canvas > hook – Executed at the top, inside the #header DIV tag:
    <div ID=”my-subtitle” style=”color: white; text-shadow: 1px 1px 0 #0B2B0E; font-size: 18px”>A holistic acupuncture and wellness center serving the Coventry / Rhode Island area since 2005.</div>
    <!– alternate subtitle –>
    <div ID=”my-alt-subtitle” style=”color: white; text-shadow: 1px 1px 0 #0B2B0E; font-size: 18px”>Online Courses</div>

    OK I thought I was getting close: I decided to try an make a mod to the header.php to switch out the subtitle depending on what page template is being used on a page. I feel I’m close but it doesn’t resolve. I don’t know php and I’m taking a shot in the dark here.

    Any tips on the code below to get it working?

    // code inside header.php
    <header id="header" class="col-full">
    <!-- my mod to alternate subtitle for courses -->
    if ( is_page_template( 'my-full-width-template.php' ) ) {
        // use alternate subtitle when the above template is used
        <div ID="my-subtitle" style="color: white; text-shadow: 1px 1px 0 #0B2B0E; font-size: 22px">Online Courses</div>
    } else {
        // use the usual subtitle text saved in the canvas > hook > header below
        <?php woo_header_inside(); ?>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    Moderator bcworkz


    I’m not familiar with Canvas, but it sounds like it at least doesn’t use up the child theme spot (many commercial themes do) so you can use a child theme to contain your customized code.

    Copy the template file that contains the sub-title output to a child theme folder you’ve created. This is usually header.php, but some themes call in a template part for specific header elements. If it’s a template part, be sure to mimic Canvas’ folder structure so the child version is found before the parent’s. The sub-title code should in part use get_bloginfo( 'description' ), but there may be more to it to completely manage the output. The sub-title is usually contained within some HTML, you’ll want to manage not only the bloginfo, but the containing HTML.

    You need to decide how to control which sub-title is used by what post. Becky’s idea of using a custom field is still a good one. It doesn’t have to be actual content, it could be a “shortcode” of sorts. Shortcodes are actually something else in WP where a short text string controls a potentially large amount of content. They are used within post content, so they don’t work in titles, but you can use the same concept. You could have a custom field called “my_title” for example, and use the words MAIN and COURSES to manage which title is used.

    You can use other metrics to manage the title used as well, for example all posts use one and all pages use another. With pages, you can use the template file to manage which title to use. Or one for visitors, another for logged in users. PHP is pretty powerful, it can likely do anything you can imagine as long as there’s data somewhere to work with.

    You’re going to introduce some sort of PHP logic control structure to the part that outputs the sub-title. You can use a if/else if/else structure, but that can get messy if there’s a lot of options. When there’s many options, a switch/case structure is better. The current sub-title code should be the default or final else condition.

    This leaves the if or switch conditions that manage which sub-title code to output. For custom fields use get_post_meta(). For pages, the template file is in post meta under the ‘_wp_page_template’ key. You can get the current post/page ID from get_queried_object_id(). You can also use any of several template tags like is_single(), is_page(), is_home(), is_front_page(), etc. to build fairly elaborate logic paths.

    Here’s a simple example that outputs a particular title when the courses.php page template is used, otherwise the default title is used.

    <?php if ( is_page() && 'courses.php'== get_post_meta( get_queried_object_id(), '_wp_page_template', true )) {
       echo '<div ID="my-alt-subtitle" class="my-sub-title">Online Courses</div>';
    } else {
       echo '<div ID="my-subtitle" class="my-sub-title">' . get_bloginfo( 'description' ) . '</div>';
    } ?>

    Untested, but it should be correct, but probably needs to be altered for your actual situation, like the actual template file used. You’ll see I substituted a class attribute for the style. This separates content from appearance. In your child theme’s style.css you can place this:

    .my-sub-title {
       color: white;
       text-shadow: 1px 1px 0 #0B2B0E;
       font-size: 18px;

    I also used get_bloginfo() for the default sub-title to mimic what is probably currently in your theme’s template file, but with unique ID and class like your example.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘how to change site title for different pages with css’ is closed to new replies.