Categories
Lynda.com Tutorials

A bugfix for WordPress 3: Building Child Themes on lynda.com

With the update of WordPress to version 3.4 came some important feature improvements that changed the way certain key components work. This includes how the header image and background functionality is implemented. This in turn means the old methods of making changes to these elements suddenly don’t work any more.

The Issue

This change has made a previously well functioning component in my WordPress 3: Building Child Themes course on lynda.com non-functional.

In movie 2.3 I instruct the viewer to redefine the height and width of the header image using the following code in a child theme functions.php file:


<?php
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 980 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 224 ) );
?>

Unfortunately with the new implementation of the header image function, this no longer works. A new filter function is needed.

The Fix

To get the result you want without messing things up in the process, a modified version of the code above is necessary. So, to resize the header image in a child theme of Twenty Ten you use the following code:


<?php
function tnc_header_width($width) {
	$width = 980;
	return $width;
}

function tnc_header_height($height) {
	$height = 224;
	return $height;
}

add_filter( 'twentyten_header_image_width', 'tnc_header_width' );
add_filter( 'twentyten_header_image_height', 'tnc_header_height' );

?>

An Update is Imminent

We are hard at work rolling out an update to the course to bring it in line with the new version of Twenty Ten. Until then, just use the code above and everything will work fine.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

50 replies on “A bugfix for WordPress 3: Building Child Themes on lynda.com”

Thanks for the update. I really hope you’re planning to do more WordPress videos on Lynda. Your instruction is very good.

Thanks Jim. I really like making these courses and I have an ongoing relationship with lynda.com, so without divulging any information I’m not allowed to divulge, I’m going to say we are working on stuff. Stay tuned.

By Post Author

in your course chapter 3 about remove twentyten header in the child theme function. i have tried that, but nothing change in the dashboard header. can you fix the code

i have find a way, why that cannot respond, so that not a big deal, but i wanna know is the code embedded for twiiter accoun fix. i have parse error on that, even i copy that code from snippet.
another thing i wanna know. why in this course not included about custom field.
i want to know how to make custom field conditional.
that inspired of your cosmetic code, even that simple, but maximal result. that code inspire me

<a href="#"

can i make code similar with that to show custom field if exist, and hide when blank. i have problem when custom field is blank, still remain a border on the post where i put that in div=id.

Your Lynda.com WordPress video tutorial is truly amazing and easy to follow. Thank you very much!

I too must congratulate you on your excellent course. I enjoyed it very much. Unlike other courses, yours was energetic and engaging and didn’t put me to sleep and I didn’t even yawn once!
I hope you will consider doing a more in-depth course on the new version (3.4.1) on how to build a custom theme, how to use jQuery to add stuff like slide shows in the header, how to use media queries to load different style sheets for different devices, … etc. In general more advance courses on WordPress which is lacking. Stuff out there is more geared towards the beginners and nothing on more advanced topic in WordPress.

@Mark: Thanks for your feedback. I love hearing from people who take my courses. Pardon my extremely vague answer here, but I’m sure you understand I can’t talk about upcoming plans and future courses. What I can tell you is that we are working on new material that will beef out the coverage to make it broader. Stay tuned for updates.

Wow! Thank you a lot, Morten!
I started with your course ( It is really cool product, Morten! I just enjoy by learning!
By the way, it’s the second I’ve took, as well the next – “Portfolio”, is waiting for me too! ) couple days ago and really I’m stuck with this issue! -)
But this pice of the code has opened the door to go further! -)
My best wishes. Sasha.

simple and very superb instructions to fix issue of header images. I am regularly visiting designisphilosophy and following you on tweeter. you are training very greatly on lynda.com and I am waiting for next one!!

Great job on the video instruction at Lynda.com. I have been a member there for years, and you really do a good job of teaching. I’m also looking forward to more advanced topics on WP.

Its my birthday ! and have just finished my (your) second tutorial Building Child Themes and I must say it was really enjoyable, articulate and fun. Now to my next course. I am a Photographer and Fine Art Printer for other photographers and wish to build a site for both my work, my printing work and the work of other Fine Art Photographers. Do you recommend Online Portfolio first and then Photography Portfolio ?
Your help would be appreciated, and thank you for the above fix an look forward to the Update.
Peter

@Peter: Try the Photography Portfolio course first. It’ll give you some good ideas on where to start. You should also check out the new SWAT: Creative Portfolios course. Then if you want to dive deeper into the code and make something customized just for you, check out the Online Portfolio course.

By Post Author

I have just completed Create an Online Portfolio with WordPress.
In chapter 5 the file: culinaryartistryContent.xml did not Import correctly as shown in the course instructions therefore the rest of the course did not unfold as it should. I went back and started again to make sure I had followed correctly and the same thing repeated. I followed the rest of the course, but it messed up the design of the project. I got the concept OK but if I wanted to use the exact code and methodology I am not sure it would work. So I am disappointed because I could not finish and see the end result. HOW CAN I GET THIS RECTIFIED SO I CAN USE THIS DESIGN IF I WANTED – WHICH IS LIKELY.
Thank you
Peter Corbett

@Peter: The culinaryartistryContent.xml file contains dummy content only – pages, posts and menu items populated and configured through WordPress admin. The file and its content is not necessary to follow the course and can and should be replaced by your own content. The focus of the course is on how to add new functionality to a theme, and this functionality is not related to the content in any way. Because only premium lynda.com subscribers get access to the exercise files, the course was designed to work even without them. If you are having trouble getting the functionality to work properly it is likely due to one or two small errors in the code. The result should not in any way be impacted by the dummy content.

By Post Author

Hello Morton,
I have watched many of your courses on Lynda.com.
In particular I was watching Ch.4 Adding New Custom Menus in child themes.
I am stuck on making the footer menu horizontal. I followed your tutorial but mine come out vertical. If I use display: inline-block it takes the whole page off center. Can you shed some light on this. Thanks

Hi Mor10. I’ve been diligently following you on Lynda.com and really enjoy your tutorials! I am currently taking the “Building a child theme” tutorial and I am stuck on Eclipse. I’ve spent hours scouring the web to get my eclipse to look like yours, i.e. the navigator panel has all the wordpress files needed to upload code.

Can you please give instructions on how to get my eclipse panel to list the wordpress files as you have under the navigator tab on the left so I can have the code on the right side and follow your steps exactly?

Thank you so much!

Hi RD,
I had the same issue (I work on a Mac) try TextMate. You can get a 30 day free trial. Download, open a New Project from the menu in TextMate and drag your file where WP is located on your local sever (in my case it was – MAMP/htdocs – into the left panel and there you have virtually the same set-up as Mor10. It updates dynamically as you edit and you simply drag and drop code from the snippets into the various php files on the right. Hope this helps. I could not get Eclipse to configure despite hours of trying. [email address redacted]
Regards
Peter

Sublime Text is very good, similar to Textmate. I have been using it for a couple of months. There are some good tutorials on nettuts on how to use it?

Helping with the Anaximander theme….on this post you answered some comments and put an http:// link, which on the iPhone 4s the link text only is sticking way out into the right margin and is causing the grey background to show. The link text is not wrapping in the comment boxes.

$defaults = array(
‘width’ => 1000,
‘height’ => 200,
);
add_theme_support( ‘custom-header’, $defaults );

I found this new code on the WordPress codex. It seems to be working. Would this code be another fix that works for changing header image size?

I enjoy and learn a lot from your Lynda.com lessons. I appeciate you cannot come out with a new “Lynda” course everytime the software updates (twentyeleven theme) so I really appreciate you providing updated information through your site. Your in my bookmarks!

Hi Morten I’m following along with the course on Lynda.com, on chapter 3 regarding the featured image it will not show up. Even at the beginning of the course when we had to populate the site the featured image would not show up also.

thanks

Just finished your Building Child Themes course on lynda.com. Fantastic. Thank you! I was able to finish a project using your tutorial so am very grateful. You’re an excellent instructor and I’m glad to see you’re producing more with lynda.com.

My issue is: now that I have this wonderful finished project sitting in localhost I can not find easy to understand instructions for how to transfer the localhost site to the remote server without breaking everything. And reading the WordPress codex is confusing. Any suggestions?

WordPress 3: Building Child Themes on lynda.com

In chapter 8 the las two movies deal with excluding a category “flowers” from the homepage, and the archives in prep for creating a custom category template to display flowers.

”

the above code breaks the site, but if I remove the ‘ || is_archive() ‘ , and the ‘&posts_per_page=3’ and just use:

‘

‘
All seems to work well except that the flower show up in archives.

I really like the tutorial, it is full of very good information, so I am looking forward to the fix since the whole tutorial is down I think that it would be safe to say that it is being fixed.

Thank you
henrylemmon>

WordPress 3: Building Child Themes on lynda.com

This is a re post because the above did not show the code

In chapter 8 the las two movies deal with excluding a category “flowers” from the homepage, and the archives in prep for creating a custom category template to display flowers.

‘
if ( is_home() || is_archive()) {
query_posts($query_string . ‘&cat=-17&posts_per_page=3’ );
}
‘

the above code breaks the site, but if I remove the ‘ || is_archive() ‘ , and the ‘&posts_per_page=3’ and just use:

‘

‘
All seems to work well except that the flower show up in archives.

I really like the tutorial, it is full of very good information, so I am looking forward to the fix since the whole tutorial is down I think that it would be safe to say that it is being fixed.

Thank you
henrylemmon>

In chapter 1 creating and activating basic child themes, I follow all your instructions and when I refresh my themes, basic child themes don’t come up. What gives?

@Roman: If the child theme doesn’t show up and you’ve uploaded the theme to the Themes folder under wp-content, it usually means there is something wrong in the header section of the style.css file. That’s what WordPress uses to recognize themes and child themes.

By Post Author

With this header size fix, do I have to upload a new image or will it use the same image? I don’t see any difference.
thanks – and like the people above, I too think you are a SuperStar!

The header fix worked fine for me in WordPress 3.4 but does not seem to work in 3.5. The header image size that I have set is 960 x 200 but the images that are being created are 800 x 200 pixels. I have three client sites and all are the same since 3.5 was installed. Any ideas? Thanks.

Hi Morten,I have a simple question but I’m stuck with this.I’m watching your tutorial building a child theme.I create the folder already now I’m trying to do the import function but I have a lot of themes in my content folder I did the @import url but its not working.can you please explain me a little bit better abut the (../) how to go a folder down and a folder up.Thanks

Camile

Hi Morten.
I am starting on the “build child themes” on Lynda.com, but I cant find the Exercise Files you talk about in the 2 movie.
Where do I find them ?
I am a member at Lynda.com.

Tim

hello sir
thanks for all your courses
any info about WordPress 3.9.1 new New Features?
one more question WordPress 4.0 Beta 2 safe for use ?

Hi Morten,
Thanks your great courses. Are you planning to update this course to WordPress V 4 . It would be nice if you can make course on WordPress theme development from scratch and also WordPress Multilingual Course using Multisite, WPML and q translate.

I have an issue in the 07.06.Showhide part of the tutorial.
The image on the right is not closing with the other content, but stays on top/visible.
What can be the issue?
Tnx.

Hi Morten,
Thanks your amazing courses. It would be great if you make a course about “WordPress: How to create a NewsPaper”. Looking for a tutorial like that now, I have a project to create my own site about news.

Thanks a lot. You so great!

Comments are closed.