Support » Theme: Gazette » Child Theme: Smaller Header Images with Offset Page Titles

  • Resolved backpackingseries

    (@backpackingseries)


    Hello,

    For some reason, the default theme behavior of the Header is not currently working on my site.

    In the parent Gazette theme, the Header Image stretched to cover the entire screen and nicely printed the Page Title over it.

    Now, in the child Gazette theme, the Header image is reduced in size to cover only the middle column, with the Page Title printed underneath the Header Image โ€“ as if it is a paragraph header in the content area. (FYI: I am using the same image in the child theme that I used with the parent)

    I looked up this thread and tried the suggested code therein. It works to stretch the image to cover the entire width. But, the Page Title does not move up (and continues to look like a paragraph header).

    Could you please advise steps to fix this?

    Thank you

    Abhijeet

    PS: I am on a development site. But if thereโ€™s a email ID that I could share the temporary URL on, I would be happy to. So, if needed, you could take a quick look.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hi again. ๐Ÿ™‚

    Gazette uses JavaScript to move the image and post/page title into the header area after the document has loaded. If this isn’t working as expected with your child theme then it sounds like the parent theme’s JavaScript files aren’t loading correctly.

    Would you be able to review this guide for creating a child theme and ensure you have the following added to the child theme’s functions.php file?

    <?php
    function my_theme_enqueue_styles() {
    
        $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>

    Let me know how that goes!

    Thread Starter backpackingseries

    (@backpackingseries)

    Hello Siobhan! ๐Ÿ™‚

    Many thanks for taking this up and the quick reply!

    After reviewing the guide you shared, I have the following observations:

    1. The plugin I used to create the Child Theme did an “import” instead of using the enqueue method (not sure whether it impacts the current situation)
    2. The functions.php of the child theme contains just a closing “<?php” . There’s nothing else.

    I switched back to use the parent Gazette theme. I noticed that the functions.php of the parent theme was modified (perhaps too many undocumented changes). So I downloaded the original Gazette files, unzipped the archive and FTPd the functions.php and style.css. Alas, the problem persists.

    Questions:
    1. Is this the default theme behavior when using the Appearance – Customize – Header method to define a header for all pages? Or does the javascript (to move the image and post/page title into the header area after the document has loaded) work only for Custom Headers set via page editor?
    2. If this is not an expected behavior, could there be other files that I might need to replace (just to be sure)?
    3. Anything else?

    I look forward to your advise before using the recommended plugin in the guide to create the child theme once again.

    Kind regards

    Abhijeet

    Hi Abhijeet,

    Yes, the header should display at full width by default. If it’s not acting as expected even with a clean version of the theme (and without the child theme activated) then a third-party plugin may be causing a conflict with the needed JavaScript.

    I recommend disabling each of your plugins one by one to see if the header loads as expected after that. If you can determine a plugin that’s causing the issue then we can troubleshoot further from there.

    I noticed that the functions.php of the parent theme was modified(…)

    So I downloaded the original Gazette files, unzipped the archive and FTPd the functions.php and style.css.

    Hi there,

    Did you make changes to any other theme files, like footer.php, in either the parent or child theme?

    Please try uploading a completely clean version of Gazette – do not just ftp 2 files.

    Users sometimes inadvertently delete wp_footer() and/or the closing HTML tags for the body and footer in footer.php when attempting to remove the credits text (example).

    This results in the theme being unable to load certain javascript files.

    Thread Starter backpackingseries

    (@backpackingseries)

    Hello Siobhan,

    Thank you for the quick response. Sorry for pasting a long error message in the steps below. But I hope it provides something of value to assess.

    1. Deactivated all plugins (including Jetpack) one-by-one. One plugin crashed the WP Dashboard with the following errors:

    Warning: include(home/directory/public_html/wp-content/themes/gazette/inc/updater.php): failed to open stream: No such file or directory in home/directory/public_html/wp-content/themes/gazette/functions.php on line 255

    Warning: include(): Failed opening ‘home/directory/public_html/wp-content/themes/gazette/inc/updater.php’ for inclusion (include_path=’.:/opt/php70/lib/php’) in home/directory/public_html/wp-content/themes/gazette/functions.php on line 255

    Warning: Cannot modify header information – headers already sent by (output started at home/directory/public_html/wp-content/themes/gazette/functions.php:255) in home/directory/public_html/wp-includes/pluggable.php on line 1210

    2. Status in cPanel confirmed all plugins were disabled. Status of Header image – no change. I then removed Gazette and reinstalled it. The Dashboard recovered and is normal now.

    Status: With all plugins disabled, the Header Image issue persists.

    3. Gazette Behavior on WordPress.com: It prompted me to look up my wordpress.com site that also uses Gazette. This is what I found: when I remove the featured image from a page, the page does not default to the theme’s Header image (defined under Appearance – Customize – Header). Instead it does not show any Header at all.

    I’m not sure what’s happening and hope this helps in some way to suggest further! Thank you!

    Kind regards

    Abhijeet

    Thread Starter backpackingseries

    (@backpackingseries)

    Did you make changes to any other theme files, like footer.php, in either the parent or child theme?

    Please try uploading a completely clean version of Gazette โ€“ do not just ftp 2 files.

    Users sometimes inadvertently delete wp_footer() and/or the closing HTML tags for the body and footer in footer.php when attempting to remove the credits text (example).

    This results in the theme being unable to load certain javascript files.

    Thank you Gary.

    I had similar doubts and so I reinstalled Gazette. But, the issue persists. I hope the steps above help in some way to suggest further. Please help!

    If you resize your browser to make it narrower, does the mobile menu work correctly?

    Testing this will let us know if JavaScript can be loaded correctly.

    Thread Starter backpackingseries

    (@backpackingseries)

    Thank you Gary.

    Do you mean, resize the browser on laptop and test navigation menu? If so, yes. It’s just the Header image that is not full width. Sorry, but, did I get your question right?

    Yes, thank you. The point was to test whether JavaScript can be loaded on the site.

    In the parent Gazette theme, the Header Image stretched to cover the entire screen and nicely printed the Page Title over it.

    Just to clarify – that is not how the Header image in Gazette functions.

    The page title does not overlap the Header image in Gazette, nor is the header image full-width.

    Here is a page in Gazette with a Header imagehttps://garyb.press/about/

    Here is a post with a Featured imagehttps://gazettedemo.wordpress.com/2015/03/14/the-best-prototyping-apps/

    Are you expecting the header image to behave the same way as the featured image does?

    Thread Starter backpackingseries

    (@backpackingseries)

    Yes. I did have that query but, I guess I could have articulated it differently and perhaps I misunderstood the response.

    Abhijeet Wrote:
    Questions:
    1. Is this the default theme behavior when using the Appearance โ€“ Customize โ€“ Header method to define a header for all pages? Or does the javascript (to move the image and post/page title into the header area after the document has loaded) work only for Custom Headers set via page editor?

    Siobhan Wrote:
    Hi Abhijeet,

    Yes, the header should display at full width by default. If itโ€™s not acting as expected even with a clean version of the theme (and without the child theme activated) then a third-party plugin may be causing a conflict with the needed JavaScript.

    Thank you for clarifying with examples! With that, I guess I can proceed with creating a Child Theme using this recommended plugin. ๐Ÿ™‚

    Thank you for clarifying with examples

    You’re welcome ๐Ÿ™‚

    There might have been a bit of confusion about which of the two types of images were being referred to, and their behaviour. I’m glad the examples helped clear it up.

    Thanks so much for your fresh set of eyes here, @gary-barrett. ๐Ÿ™‚

    @backpackingseries: Sorry for the mix up! It’s right that featured images will take up the full width of the header area, but rely on JavaScript to do this. Header images never take up the full width of the content area, as per Gary’s example.

    The difference you’re seeing between your parent theme (where you mentioned the image takes up the full width of the available space) and the child theme, makes it sounds like you’re referring to featured images. Can you confirm whether you’re still seeing that difference or if the clarification provided by Gary has helped to resolve this?

    Thread Starter backpackingseries

    (@backpackingseries)

    Hello Siobhan!

    My apologies here. I should have articulated the scenario differently. However, in the process, I got myself a brand new set of theme files (that I know wont be the source of any potential problems) ๐Ÿ™‚ Thank you for your patience to help with this.

    Yes, Gary’s illustrations were helpful to move forward. I have created a Child theme now (referring to the guide you shared) and it’s working, as expected : )

    Kind regards

    Abhijeet

    Thread Starter backpackingseries

    (@backpackingseries)

    Good morning!

    I guess I owe this clarification ๐Ÿ™‚

    I had posted this ‘issue about featured images due to changes in footer.php‘ and we discussed that a separate plugin (Default Featured Image plugin) is not required in Gazette – since this functionality can be had from the Header Image.

    Itโ€™s worth noting that you can set a default image to show up in the themeโ€™s header area via the Header Image section of the Customizer (found by navigating to Appearance > Customize in your dashboard). A plugin might not be necessary for you.

    The recommended solution helped to overcome the core issue of footer.php.

    I deactivated the โ€˜Default Featured Imageโ€™ plugin and had to recreate few pages โ€“ their headers were behaving badly due to a custom post template that I had gotten rid off (tried too many things for my own good!).

    I realized (only later) that the headers were not really acting like featured images (after removing the plugin). Hence (expecting the same functionality), posted this one for help. My apologies. I am new to WordPress and these wonderful forums. I should have known better to provide a link upfront or, simply carried on the conversation in the earlier thread.

    The good thing is, as noted before, the site has a brand new set of theme files (that I know wont be the source of any potential problems), a properly created Child Theme, and both issues are resolved ๐Ÿ™‚

    Thank you Siobhan and Gary!

    Kind regards

    Abhijeet

    Thanks so much for the clarification, Abhijeet! I should have spotted that you mentioned header images (not featured images) in your initial question so apologies for the part I played in the confusion here. I’m grateful that Gary came along with a fresh set of eyes. ๐Ÿ˜€

    You know where to find us if you have any extra questions!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Child Theme: Smaller Header Images with Offset Page Titles’ is closed to new replies.