WordPress.org

Ready to get started?Download WordPress

Forums

twenty ten child theme (27 posts)

  1. shepme
    Member
    Posted 1 year ago #

    Good Day,
    I am learning how to create a child theme with lynda.com.
    Unfortunatly when there is no teacher you have no one to ask question to, so you sit there and spin!

    Any ways, here is my question;
    I have created a new folder with the name of my new theme. I have placed a style.css in that folder with all of the appropriate css. (the sheet is also imported from the twent tenty theme).
    To get my header image to display to 980X224 have copied the functions.php folder from twenty ten and into my new theme folder.

    When I refresh my site eveything is great. The header image is perfect.
    My problem is this.
    I am not able to change my featured image on any of my pages. I can select a new header image in the dashboard. That image will then be displayed on all of my pages. When I go into one of my pages and set the featured image to a different image it does not work. I have been sitting here all day and am starting to go mad!
    If I remove the functions.php from the folder then I can have a differnt header image for each page but the size is messed up. If I replace the funtions.php back into the theme folder the size is perfect but I am stuck with whatever I choose as my header image for all pages.
    Some one please help!.
    Thank you in advance
    Shep

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    have copied the functions.php folder from twenty ten and into my new theme folder.

    And that's where you went wrong. You must start with a blank functions.php file in your child theme and then only add your amended or custom functions.

  3. shepme
    Member
    Posted 1 year ago #

    Thank for the quick reply;
    I have followed the video from Lynda.com but will not work.
    Here is what is in my function.php now. Could you advise on what I need to add or remove. I have been at this literally all day and am getting no where.
    I really appreciate your help.

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    I have placed a style.css in that folder with all of the appropriate css. (the sheet is also imported from the twent tenty theme).

    Can you also elaborate on what you mean by "imported"? You didn't copy all of the parent's CSS into the child, did you?

  5. shepme
    Member
    Posted 1 year ago #

    No sorry my error I have the code @import url('../twentyten/style.css'); at the top of my style sheet. Then below it I have all of the styles that I want to change. I don't think that is my issue. If I drag my functions.php out of my theme folder and on to my desktop it works perfect. I could create a different image for each pages header but the size is no good. If I drag functions.php back, the size is good but I am stuck with whatever I have chosen for my header image and can not assign a featured image on each page?
    Thanks
    sShep

  6. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    OK - start with a blank functions.php file and add:

    add_filter( 'twentyten_header_image_width', 'my_header_width' );
    add_filter( 'twentyten_header_image_height', 'my_header_height' );
    function my_header_width($width) {
    	$width = 980;
    	return $width;
    }
    function my_header_height($height) {
    	$height = 224;
    	return $height;
    }
  7. shepme
    Member
    Posted 1 year ago #

    No Dice?

    I created a new functions.php and added the following per your instructions:

    <?php
    add_filter( 'twentyten_header_image_width', 'my_header_width' );
    add_filter( 'twentyten_header_image_height', 'my_header_height' );
    function my_header_width($width) {
        $width = 980;
        return $width;
    }
    function my_header_height($height) {
        $height = 224;
        return $height;
    }
    ?>

    The size is good but am still unable to change header images using the featured image option?

    Shep

  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Are you using images that are 980px by 224px?

  9. shepme
    Member
    Posted 1 year ago #

    Good Morning Esmi;
    First of all I want to thank you for working with me. I truly do appreciate it.
    Yes the header images that I am trying to use as a featured image on a page is 980 X 224.
    I spent another 3 or 4 hours last night trying to figure it out with no luck.
    Move the functions.php out of the themes folder and you can have a different header picture (set as featured image) on each page but the size is wrong. Put the functions.php back into the themes folder and the size is perfect but you can no longer change images. You are stuck with the single header image that you gave chosen in headers.

  10. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    What version of WordPress are you using?

  11. Digital Raindrops
    Member
    Posted 1 year ago #

    Hi,
    If you are changing the header size in a child theme then it needs to be wrapped in a 'post_theme_setup' function, called with the 'after_setup_theme' hook!

    WordPress will then load the childs functions.php, the parents functions.php and lastly the childs 'after_setup_theme' function hook.

    add_action( 'after_setup_theme', 'post_theme_setup' );
    if ( !function_exists( 'post_theme_setup' ) ):
    function post_theme_setup() {
       /* Code goes here! */
    }
    endif;

    The images will not be re-sized retrospectivly, the parents headers will always be smaller than the new ones, so you will upload new images.

    I will leave it back with esmi!

    HTH

    David

  12. muchogaucho
    Member
    Posted 1 year ago #

    Hi Shepme,

    I am having the exact same issue with my Lynda tutorial, it has stumped me and now I am stuck trying to figure out this function so I can keep on moving forward!

    Unfortunately the trainer on Lynda is using a slightly different version of the TwentyTen theme and that's where the issue lies im guessing. So much for streamlined learning!

    Hoping to see a resolution shortly.

  13. Digital Raindrops
    Member
    Posted 1 year ago #

    Try this, my function with the one from esmi inside

    <?php
    
    /* This function will run after the parents functions.php */
    add_action( 'after_setup_theme', 'post_theme_setup' );
    
    if ( !function_exists( 'post_theme_setup' ) ):
    
    function post_theme_setup() {
       /* Code goes here! */
    
       add_filter( 'twentyten_header_image_width', 'my_header_width' );
       add_filter( 'twentyten_header_image_height', 'my_header_height' );
       function my_header_width($width) {
       	$width = 980;
    	return $width;
       }
       function my_header_height($height) {
    	$height = 224;
    	return $height;
       }
    }
    
    endif;

    HTH

    David

  14. shepme
    Member
    Posted 1 year ago #

    Hi David;
    Thanks for the input. I will try what you have suggested.
    Can you please advise exactly were I place this inside of the header.php.
    Thanks
    Shepard

  15. shepme
    Member
    Posted 1 year ago #

    Good Day, Muchogaucho:
    Yes, I have found the same thing with the "creating child themes" using Lynda.com. Many of the steps Morten (the instructor) shows the viewer to do on a php document is different than the actual php document that you open so it is a bit confusing were to place certain things. It take a couple of tries.
    I have been designing websites for the past 2 or 3 years and have always wanted to learn how to create sites in wordpress that the person whom you are building it for could go in and alter the pages without getting into the html/css.
    I was disappointed to learn that to customize wordpress you have to know PHP. I thought there would be a css page and an html page for each page and you build it using those two things with maybe some Javascript thrown in.
    It appears if I want to pursue the wordpress thing I must first learn PHP.
    What are your feelings?
    Shep

  16. Digital Raindrops
    Member
    Posted 1 year ago #

    Can you please advise exactly were I place this inside of the header.php.

    @sheme and @muchogaucho
    If you have been adding this code in the header.php then you are off track, the code goes in the child theme, if you do not have a functions.php then you must create one and add the code!

    It could be your lucky day, I posted a Video on YouTube yesterday that does most of what you want it adjusts the header height, removed the default headers,however adjusting the width means also adjusting the styles.css

    Here is the YouTube Video

    There is a whole series of posts (Over 20 Sessions) on my website for beginners, with the twenty ten theme, these are now old but they might help you get a base understanding!

    The posts have download child themes, there is also a downloads page, and it is all free!

    Please do watch the Video and take in the instruction, that is the way you will learn, rather than just downloading the child themes.

    HTH

    David

  17. shepme
    Member
    Posted 1 year ago #

    Thanks David;
    That sound amazing.
    I am going to take your course and let you know how it goes. That is very kind of you.
    To answer you question, yes, I do have a functions.php folder.
    I am going to try and add the code that you provided above inside of that folder and see what happens.
    It must be something simple (if you know how). If I leave the functions.php in my theme folder, I get the correct size for my header image 980x224 but can not set any images as featured images on different pages. I am stuck with whatever header I have chosen for ALL pages.
    If I remove the functions.php from the themes folder,the size is not correct, it reverts back to the default size but I am now able to set featured images as my header so I could have a different image as the header on each page?
    FYI all images that I am trying to set as featured images are 980x224.
    Shep

  18. Digital Raindrops
    Member
    Posted 1 year ago #

    Hi,
    I have added 7 Videos into a play list, bookmark the page and work through them, these are all for the twenty eleven theme!

    Make the images just over size, it could be that the servers see's them as 979px, make them a bit bigger and crop them.

    It could be better to switch to the twenty eleven theme and practice on that theme :)

    If it still fails paste the functions.php up to http://pastebin.com so we can have a look.

    HTH

    David

    David

  19. shepme
    Member
    Posted 1 year ago #

    David,Sorry I have used your code but am still unable to use different header images (set as featured iamge) on different pages?
    I went on your website that is listed on your youtube video but could not find a contact link. I was going to email you my theme folder so you could check it.
    Shep

  20. Digital Raindrops
    Member
    Posted 1 year ago #

    @shepme,
    Put functions.php and style.css up on http://pastebin.com, and paste the links back here, others might want to see if there is a problem, offer help, or learn from the replies.

    I will copy and test the code from the two pastebin files, and give a solution :)

    This forum is about sharing the problems and the solutions, so others might find answers as well.

    Regards

    David

  21. shepme
    Member
    Posted 1 year ago #

    You are correct, Sorry. I want everyone to get the benifit of what I learn here.
    I have posted the functions.php here as per your request.
    Thank again
    Shep

  22. Digital Raindrops
    Member
    Posted 1 year ago #

    Ok you did not wrap the code inside a function like above, the child themes function.php loads first, then the parent which would have changed things again.

    add_action( 'after_setup_theme', 'post_theme_setup' );
    if ( !function_exists( 'post_theme_setup' ) ):
    function post_theme_setup() {
       /* Code goes here! */
    
    }
    endif;

    By using the after_theme_setup hook the function will load last.

    UNTESTED other changes to your code as well, it is late in the UK:
    http://pastebin.com/pFLUYq8J

    Child themes style.css

    /* The main theme structure */
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #wrapper {
    	width: 980px;
    }
    
    #access {
    	width: 980px;
    }
    #access .menu-header,
    div.menu {
    	width: 968px;
    }

    HTH

    David

  23. Morten Rand-Hendriksen
    Member
    Posted 1 year ago #

    The function posted by esmi towards the top does the trick (link).

    Once applied, you have to re-upload your header images so WordPress can reconfigure them to the correct size.

    We are working on updating the course to address this and other issues caused by the release of WordPress 3.4 and updates to the Twenty Ten theme. The reason you are encountering these issues is because some core functionalities of the Twenty Ten theme have been updated to work with new standards in WordPress 3.4.

  24. Digital Raindrops
    Member
    Posted 1 year ago #

    @mor10,
    For anyone reading this topic wanting to use the solution, we should make things clearer, the code posted by esmi is correct but is only effective if it is wrapped in a function and called with the 'after_setup_theme' hook.

    Analysis:
    WordPress loads the child themes functions.php first, so the header would be set first if the code was just in the functions.php as in esmi's example.

    add_filter( 'twentyten_header_image_width', 'my_header_width' );
    add_filter( 'twentyten_header_image_height', 'my_header_height' );
    function my_header_width($width) {
    	$width = 980;
    	return $width;
    }
    function my_header_height($height) {
    	$height = 224;
    	return $height;
    }

    WordPress will then run the twenty eleven parent themes functions.php, where this will set the filters back to 1000px x 288px

    This is where the 'after_setup_theme' HOOK and 'post_theme_setup' functions are used, the childs functions.php is loaded, the parents.functions.php is loaded, the parents 'after_setup_theme' hooks are then run, where the header size is set, followed by the child themes functions.php where the filters are removed and re-set, with a 'after_setup_theme' hook!

    A functions.php with esmi's code, to change the header size will look something like this.

    <?php
    /**
     * A functions.php to change the header size
     */
    add_action( 'after_setup_theme', 'post_theme_setup' );
    
    if ( !function_exists( 'post_theme_setup' ) ):
    
    function post_theme_setup() {
    
    	add_filter( 'twentyten_header_image_width', 'my_header_width' );
    	add_filter( 'twentyten_header_image_height', 'my_header_height' );
    	function my_header_width($width) {
    		$width = 980;
    		return $width;
    	}
    	function my_header_height($height) {
    		$height = 224;
    		return $height;
    	}
    }
    endif;

    I hope this is clear to anyone reading this topic!

    David

  25. Morten Rand-Hendriksen
    Member
    Posted 1 year ago #

    @David: Twenty Ten and Twenty Eleven both use filter hooks to define the header image height and width among other things. These are specifically created to let a child theme or plugin or other entity override the settings without having to 'wait' until the parent theme has been initiated.

    The function as stated by esmi and reiterated by me uses the filter hooks to pass the new width and height. Because of this there is no need for the conditional function_exists(); call nor the add_action() call. They won't do any damage, but they are redundant. The function works properly on its own.

  26. Digital Raindrops
    Member
    Posted 1 year ago #

    Hi Morton,
    Quite right, apologies, I tested again today, the issue was the child theme I was testing with was a twenty eleven child theme and not a twenty ten child theme, I have not worked with twenty ten since the twenty eleven theme came out.

    So this would have not worked in any case, in a twenty eleven child!

    add_filter( 'twentyten_header_image_width', 'my_header_width' );

    Just as a footnote if we look in the parent themes, constants and theme functions are not in the 'after_theme_setup' hook function, however all the setup data, theme options, sidebars, menu's, header image sizes etc: are all done within the 'after_theme_setup' hook function, for late binding.

    add_action( 'after_setup_theme', 'twentyeleven_setup' );
    add_action( 'after_setup_theme', 'twentyten_setup' );

    So by adding the code into a 'after_theme_setup' hook function it could be seen as good coding practice, as it follows the way the parent theme is coded, both bits of our code are correct, we will differ on the best practice!

    I use the 'after_theme_setup' hook so the values would not be over written anywhere else, in an include file etc:

    If at a later date one of your students wants to create a full new theme to add to the WordPress directory, then using a pluggable function for the 'after_theme_setup' hook would be the best practice to allow child themes to over-ride part or the whole setup function, early adoption of pluggable functions is not a bad thing, a ot of the time we know the state of a variable but we still test if it is set.

    <?php if( isset($my_variable) && $my_variable ) echo $my_variable ?>

    Regards

    David

  27. cutspark
    Member
    Posted 1 year ago #

    I'm taking the same Lynda wp child themes class as shepme (I've also designed in HTML & CSS for a couple years), and have the same problem. I found the coding solution mentioned above in the course's FAQ, however it does not tell you that image must be reloaded from the wp dashboard as Mor10 thankfully pointed out.
    Perhaps this is a "no brainer", but to us newbs, not so much.

    Mor10, you mentioned other issues caused by the twentyten 3.4 update. Do tell!! I'd like to have some hair left to pull after this course.

Topic Closed

This topic has been closed to new replies.

About this Topic