WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Child theme template problem when filename.php changed (11 posts)

  1. sealyspeak
    Member
    Posted 1 year ago #

    Hi all,

    I am creating a basic child theme for Twenty Eleven and wanted the existing sidebar-page.php as my home page WITH a full width Easy Rotator plugin positioned under the main navigation on this page.

    I added the side-bar.php file to the child theme, added the plugin into the PHP, created a div in the CSS file and it works fine.

    Obviously the side-bar.php in the child then made every page on the site using this template display the slider plugin.

    So I changed the FILE name to side-bar-child.php but the styling of the page content seems to revert to the sample page template styling, i.e, it introduced a large left boarder which pushed the widgets under the content.

    If i change the file name back to what it was, it works fine.

    What am I missing here? How has changing the file name messed up the styling of the content?

    See the home page here: http://greenhat-test.co.uk/, and see also the side bar template on the main navigation. They both use the EXACTLY the same code on the PHP but have different file names?

    Many thanks for any assistance!

    Sealyspeak

  2. Abhishek Ghosh
    Member
    Posted 1 year ago #

    You need a home.php for your child theme. That basically will be a modified side-bar-child.php. Add the php hook of Easy Rotator plugin plugin inside home.php file and your wish will be fulfilled. But you have to define home page style in CSS file too. Otherwise it will inherit other CSS div style.
    The sidebar is looking great in Side bar template page.

  3. sealyspeak
    Member
    Posted 1 year ago #

    Cheers Abhishek, thanks for your reply.

    just a couple of questions if I may, and I know I am missing something basic here so I apologise in advance.

    I have created home.php (as a template.php file in the child theme) and chose this page template as my home template page, but where and what should I add to the CSS file?

    First off, the home.php is a copy paste job from the side-bar.php which is the template I wish to build on from Twenty Eleven, so the divs and styles already exist in the original twenty eleven theme. I added a slider div and put the properties in the styles.css in the child theme.

    But you are right, the main content area is not pulling in the correct styling? I am a little lost.

    Anyhelp anyone

  4. sealyspeak
    Member
    Posted 1 year ago #

    Addition: is the home.php file a template?

  5. Abhishek Ghosh
    Member
    Posted 1 year ago #

    Yes, home.php is a template. When it is present in a child theme / theme, the settings from WordPress Admin panel will be ignored. It is a php template, should be at the root of the child theme / theme's directory (where we keep functions.php file). A typical home.php will be like :

    <?php get_header(); ?>
    
    <!-- put HTML, PHP what ever you want -->
    
    <?php get_footer(); ?>

    Use the CSS in the main CSS file, style.css, typically starting to define with :

    #content-home {
    color:#whatever;
    font-size:xypx;
    font-family:georgia, times, serif;
    margin:0 auto;
    }

    You can add the block of CSS defining home's design at the end of the style.css file.
    You can add more flexibility of home by using register_sidebar(array in functions.php file (and styling with CSS). Depending upon your settings, they will appear on your WordPress Widget list inside your WordPress installation. Drag and drop things you want.

  6. alchymyth
    Forum Moderator
    Posted 1 year ago #

    the correction for the sidebar in a 'sidebar template' are done in functions.php, using the template file name;

    for a new sidebar template, you need to add some code to functions.php of hte child theme.

    see my article:
    http://www.transformationpowertools.com/wordpress/twenty-eleven-new-page-template-with-sidebar-correction

  7. sealyspeak
    Member
    Posted 1 year ago #

    Many many thanks for getting back to me!

    Can I just ask, why does the template not just use the CSS from the original theme if none of the DIV names have been changed?

    I ended up copying EVERYTHING from the original CSS into the styles.css in the child theme and it still did not work?

    Not sure why this is happening still? It seems like the CSS link to the correct styling gets lost when I change the file name from side-bar.php to home.php (I remove all the template code so it starts: <?php get_header...) in the child theme. When I change the file name back to side-bar.php the CSS styling is fine?

    Wow, don't remember having this problem with CSS styling on a child theme.I really want to understand this! Sorry guys.

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    Can I just ask, why does the template not just use the CSS from the original theme if none of the DIV names have been changed?

    this is just the way it is;

    Twenty Eleven controls the sidebar layour via the 'body_class()' css class .singular which is set and controlled near the end of functions.php;

    this is the line which add this .singular class:

    if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
    		$classes[] = 'singular';

    as you can see, the class is added for 'singular' posts, pages, attachments; but not if it is the 'posts page', 'showcase' template, or 'sidebar template';

    however, as any static page (regardless of the page template) would in the first place be seen as belonging to the 'singular' type, it would get the .singular class (which in turn changes the formatting -> check for instance style.css for all the styles that start with .singular ...).

    unfortunatley, when creating a new page template with a sidebar, one needs to take this into account and adjust the 'body_class()' output - for instance with the kind of coding as I have suggested.

    I ended up copying EVERYTHING from the original CSS into the styles.css in the child theme and it still did not work?

    it seems that you haven't read and applied the suggestion from my last reply.

    to save you clicking the link, here the code which needs to be added into functions.php of the child theme (substitute your own page template file name side-bar.php ):

    add_filter('body_class', 'adjust_body_class_for_page_template', 20, 2);
    function adjust_body_class_for_page_template($wp_classes, $extra_classes) {  
    
    if( is_page_template('side-bar.php') ) :
    // Filter the body classes      
    
          foreach($wp_classes as $key => $value) {
          if ($value == 'singular') unset($wp_classes[$key]);
          } 
    
    endif;
    // Add the extra classes back untouched
    return array_merge($wp_classes, (array) $extra_classes );
    }
  9. Abhishek Ghosh
    Member
    Posted 1 year ago #

    Excellent elaborated reply, alchymyth.

  10. sealyspeak
    Member
    Posted 1 year ago #

    Agreed, I could not fail with that amount of detail and source code!

    To you both, a massive thumbs up. Thanks for your time!

  11. sealyspeak
    Member
    Posted 1 year ago #

    Forgot to resolve topic...

Topic Closed

This topic has been closed to new replies.

About this Topic