Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center Morten Rand-Hendriksen Articles

Your source for news, insights, and inspiration at lynda.com. Come learn with us.

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

By Morten Rand-Hendriksen | Monday, July 09, 2012

WordPress 3.4 update to WordPress 3: Building Child Themes course

With the update of WordPress to version 3.4 came some important feature improvements that changed the way certain key components work, including how the header image and background functionality are implemented. This in turn can mean some of the old methods of making changes to WordPress elements suddenly won’t work anymore if you’re trying to apply old code techniques within the new and improved WordPress 3.4 environment.

The issue

Recent WordPress 3.4 upgrades to stock WordPress themes have made a previously well functioning component in my WordPress 3: Building Child Themes course currently non-functional.

Specifically, in movie 2.3 (Creating a functions file and changing the header image size) 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:

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 WordPress 3.4 Twenty Ten child theme you use the following code:

An update is imminent

We are hard at work rolling out an update to the WordPress 3: Building Child Themescourse to bring it in-line with the new WordPress 3.4 version of Twenty Ten. Until then, using the code above should solve the problem.

Do you have other WordPress 3.4 questions? Feel free to ask them here and I will do his best to get back to you as soon as possible.

Interested in learning more about WordPress?The completeWordPress 3: Building Child Themescourse on lynda.com• WordPress Essential Training• WordPress 3: Developing Secure Sites•  Dreamweaver and WordPress: Building Mobile Sites

By Morten Rand-Hendriksen | Friday, June 15, 2012

Using the new WordPress 3.4 Theme Customizer

Of the many great reasons for using WordPress to create your web site or blog, one of the most important ones is that WordPress is an ever evolving platform. That means with every new version release you can expect to see either security and usability upgrades, or the addition of whole new features. In the case of the latest WordPress evolution—version 3.4, released for WordPress.com and WordPress for self-hosting—we see both regular security hole fixes and code patches, as well as some cool new features for site owners and developers. One feature in particular that is worth special mention is the new Theme Customizer.

Using the WordPress 3.4 Theme Customizer The major update of 3.4 is the introduction of the Theme Customizer. This new feature makes it possible for an administrator to change most theme-related elements of a WordPress site in a live environment and see how those changes look before publishing them to the live site. Previously these customization features were found under several different sections in the admin area, and to apply them you had to make one change at a time and then open the site in a different window to see the result. The Theme Customizer is a one-stop-shop for theme customization, and depending on what theme you are using, you’ll be able to change everything from the site title and description, to menus, what is displayed on the front page, background colors, header images, and more. Once logged in as an administrator you can access the Theme Customizer both from the front end and the Admin panel on your site. From the front end you’ll find the Theme Customizer on the WordPress menu under your site name.

Theme Customizer on the WordPress menu under your site name.

In the Admin panel you can activate the Theme Customizer for the site’s current theme by going to Appearance > Themes and clicking Customize. Activating the WordPress Theme Customizer from the Admin panel.

In either case, you are taken to the Theme Customizer for the current theme which consists of a collapsible left-hand sidebar with all the customization features and your site in preview mode on the right.

WordPress Theme Customizer screenshot.

Theme Customizer with editing options displayed in the left sidepanel, and a preview of your changes displayed in real-time in the full, right-side view.

Screenshot of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Zoomed in view of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Using the Theme Customizer is really very easy. To get started simply open the feature you want to change in the sidebar, for example Site Title & Tagline, or, as seen below, Header Image, and make your changes. As you make changes to the different elements, the live site preview will change on the right to reflect these changes.

Changing the Header Image in the Theme Customizer left-hand sidebar.

Changing the Header Image in the Theme Customizer left-hand sidebar.

The addition of that Theme Customizer sidebar itself takes care of a bit of JavaScript that I can’t quite wrap my head around. While that unto itself is very cool, what’s even cooler is that you can navigate your site as you make these alterations and see what your customizations look like on different pages—all in real-time without your visitors being aware of what’s going on. Very, very cool.

Once you’ve made your customizations and you’re happy with how the theme looks, go to the top of the customizer and click the Save & Publish button and your new settings will be activated on your site. If you don’t like your customizations, simply click Cancel and you are back to the Admin panel without any trace of anything having ever happened. Since this is a brand spanking new feature most themes only have support for the regular functions right now, but expect the Theme Customizer to showcase some pretty snazzy features once theme developers dive into the code for real.

Other WordPress 3.4 updates of note WordPress 3.4 has two other cool updates under its sleeve:

1. If the theme allows it, you are no longer restricted to a specific size for the header image. As an example, that means you can upload a full-height image in the Twenty Eleven theme and have it take up most of your page if you want. I’m not sure that’s a good idea, but the option is there if you want to try it out. My recommendation is you try it in the Theme Customizer to see what it looks like first.

2. Image captions now allow HTML elements, so you can make fancy captions with text that has bold or italic emphasis, links, and all sorts of other interesting HTML touches.

To find out moreNow that you know what’s new and what’s possible, go test out the Theme Customizer, try some HTML captions, and check out the new and improved WordPress 3.4 for yourself. If you want to see the full list of goodies under the hood of WordPress 3.4 take a look at the codex.wordpress.org version 3.4 article. If you need some extra help, visit lynda.com to check out my full collection of lynda.com WordPress courses.

Interested in more? • All web + interactive courses on lynda.com • All WordPress courses on lynda.com • All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:• WordPress Essential Training• WordPress 3: Creating and Editing Custom Themes • WordPress 3: Developing Secure Sites • Creating and Managing a Blog Network with WordPress

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.