Upgrading to WordPress 3.5

These are notes on updating to WordPress 3.5, building a child theme based on WordPress’ new default theme called Twenty Twelve, and developing a responsive WordPress site. Twenty Twelve Theme iphone_menuI found Twenty Twelve theme to be a good starting point for developing your own modified child theme. When first working with Twenty Twelve it took a bit of time to fully realize that the Twenty Twelve theme is a mobile first theme; optimized for displaying on mobile devices. I found that some tweaking of the CSS in the @media query rules for wider devices was necessary for tablet and desktop browsers. In some cases, you might decide to display slightly different versions of the site dependent on the device. I decided on using a grayish textured background only for desktop browsers (950px+ wide) and eliminated the background image for smartphones and tablets. Though Twenty Twelve does a good job of being responsive to most devices, I wanted the Apple rolodex menu for iPhones as the default “Menu” button that comes with Twenty Twelve is pretty plain. To get the rolodex menu, install the Responsive Select Menu plugin or see Pat Fortino’s explanation to integrate a select menu. Twenty Twelve Templates Twenty Twelve only comes with three templates; default (blog layout), Full-width Page, and Front Page. The default Front Page template is two columns with a lot space of whitespace, I wanted three columns of feature type widgets on the landing page. Because the content area (yellow) and the footer area (purple) are widget enabled areas, the entire landing page can be created by adding desired widgets to any of the three content or footer columns. The footer widgets are displayed on every page of the site. The front page widgets are only seen on the landing (Front Page). Content providers can configure this page without any design or coding effort as the Three Column Front Page Template will generate a clean layout. Remember that a WordPress page with this custom template applied must be set as the site’s front page in Dashboard>Settings>Reading.
20_12_widget_layout
Three column widget enabled template
 
featured_page
Featured Page Widget
Any WordPress widget can be inserted in the Front Page Template, but for a landing page, it’s nice to introduce your site content with multiple featured post/page widgets. These widgets combine an excerpt of text and a thumbnail image and generates a link to either the entire page or post. Featured content widgets come with many configuration options; they can be configured to link to a specific post/page or they can create a set of posts that meet some filtered parameter(s) (example; all posts with category “skiing”). I am using these three featured content widgets on my front page:
black_studio_tinymce_widget
Black Studio TinyMCE Widget
These widgets have different layout options and keeping the layouts consistent with other widgets can be a challenge. An example of this is that they all seem to handle the positioning and sizing of the thumbnail image differently. To keep your life simpler, I recommend Black Studio’s widget because it is exactly like WordPress’ post editor. If you desire, you can adjust the width of your Black Studio TinyMCE widget editor to be similar to your widget’s width by adding this function to your functions.php file.
// FIX THE WIDTH OF BLACK STUDIO TINYMCE VISUAL EDITOR
function fix_blackstudio() {
echo ''; }
add_action('admin_head', 'fix_blackstudio');
Creating a widgetized three column template was the most coding I did for my child theme. I used this tutorial from Stern Data. Not only is the template responsive but it’s column widths are easily adjustable. As long as the padding and width percentages add up to 100%, you can quickly create a page layout with variable column widths and padding. In the CSS below, the middle column would be slightly wider than the left and right side columns.
#main-left {
 width:25%;
 float:left;
 padding-right:2.5%;
 }
#main-middle {
 width:40%;
 float:left;
 padding-left:2.5%;
 padding-right: 2.5%;
}
#main-right {
 width:25%;
 float:right;
 padding-left:2.5%;
}
Media Libaray and Photo Galleries In conjunction with the new Media Library, displaying images in photo galleries has been upgraded significantly. Using a photo gallery plugin like nextGen is no longer necessary but switching 100+ nextGen galleries to the native galleries seemed tedious. Currently, I am still using both gallery types within my site without problems, and believe in the long run, having your photos organized in the new Media Library galleries is going to be a better choice when querying your photos. Accessing your photos directly from within the WordPress editor makes managing those galleries very easy. Moving a nextGen gallery to a native gallery is not difficult but I have not found an easy way to transfer photo text descriptions, except by manual copying and pasting. There are 5 gallery layouts; thumbnail grid, tiled mosaic, square tiles, circles, and slideshow. You must have three Jetpack modules (Carousel, Tiled Galleries, and Short code embeds) activated to be able to display these new galleries.
dfdf
Easy gallery sorting with drag and drop interface in the new WordPress Media Library
  Default Photo Gallery Tiled Photo Gallery   Slideshow Photo Gallery

This slideshow requires JavaScript.

Maps in WordPress google_iphone_275I prefer tiling Google maps in my site over plain static maps. It has been a challenge to create maps and use a map editor within WordPress. I have tried three map plugins: Umapper, Mapquest, and MapPress and for one reason or another, I don’t use any of them any more. The Umapper plugin never got updated. Mapquest got bought out by AOL (#run). And MapPress’ map editor was not as advanced or as easy to create the style of maps I wanted to provide to my readers. I needed to draw curved lines along roads, and with Google Gmaps (My Maps) has a curved line tool that traces and highlights roadways automatically. Another factor in choosing Google Maps is the Google Map API v3. The third generation of the mapping API is where Google gets serious about making their maps display on mobile devices, which is what I want for my site content: 100% responsive to as many devices as possible. The Google API v3 is mind blogging for many reasons and what kind of map data can be integrated into an API v3 mapping project. On the very basic level, creating your own custom Google maps in My Maps is easy. My Maps even generates the iFrame embed code for you to paste into WordPress.
Using line along road drawing tool
Using the line along road drawing tool
Another reason to create and host your maps with your Google account is that your Google maps can be accessed by other digital projects, other than your WordPress site. I wanted to reuse my maps created for my site into an iBooks project. Not having to recreate my map library and the ability to reuse my maps in an e-pub project, saved me a ton of time. If I update a map, it updates in the iBook project and the website.
View Ireland Tour Map in a larger map or Street View
Video in WordPress
iphone_video
Ugly black borders eliminated with the Responsive Video Light plugin
Presentation of videos in WordPress has improved, especially for Vimeo users. There is a nice video gallery plugin called Vimeography for showcasing your video collection. This plugin’s galleries are closely integrated with Vimeo’s groups, so once you upload your video to Vimeo and assign the new video to a Vimeo “group”, that video will automatically display in the correct Vimeography video gallery within your WordPress site. I found that the default CSS in the Twenty Twelve theme did a poor job of displaying video content in smaller devices. There were large black borders around the video container and controller. A plugin called Responsive Video Light made my videos more small device responsive and removed the ugly black borders.
Air Play airplay_iconThis is an Apple feature not WordPress, but now iPads, and iPhones can play media through AirPlay. The blue AirPlay icon is added to the movie controller when AirPlay devices are sensed. You’re one click away to moving your video or audio to a large screen (Apple TV) or a stereo music system (Jambox) without cables. Also known as couch mode. apple_tv Jetpack – Infinite Scroll Jetpack has some nice plugins to check-out but the infinite scroll module is my favorite. This Jetpack module eliminates click page navigation (next/previous page) and allows for infinite scrolling of all posts queried on one page as needed. When the browser scrolls to the bottom of the page, another set of posts (number adjustable) is requested to the server. All the posts for a peculiar query are not allowed to download all at once. If you created your own custom footer, then, you probably will want to create a CSS rule to display:none the infinite scroll footer. WordPress iOS Notifications wp_notificationsComments posted to your site now come instantly to your iOS devices with the WordPress iOS app installed. These push notifications allow you to easily moderate your comments from anywhere.
WordPress Plugins I found that many older WordPress plugins were not responsive. If the plugin had not been updated in the last 6 months, it was going to be obsolete. If the plugin was not compatible with WordPress 3.5, I would start looking for a plugin replacement. Being able to “favorite” mark plugins is a nice new feature to access the plugins you use regularly. I am contributing to all the plugin developers, who’s plugin and code was incorporated into my site. Summary There have an amazing amount of improves with this upgrade to WordPress. I tested my site with three web browsers, a mini iPad, and an iPhone. My Twenty Twelve child theme needed about 50 CSS rule additions or rule tweaks to get all my page elements and my custom front page template to be fully responsive on all my testing devices. The biggest tip I can recommend when moving to a responsive theme is forget ever working with fixed widths again.

7 thoughts on “Upgrading to WordPress 3.5

  1. http://google.com/

    Hmm it seems like your blog ate my first comment (it was super long) so
    I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog blogger but I’m still new to the whole thing.
    Do you have any tips for beginner blog writers?
    I’d certainly appreciate it.

    Have a look at my web page – seo – http://google.com/,

  2. Savannah

    Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically
    tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.

    Please let me know if you run into anything.

    I truly enjoy reading your blog and I look forward to your new updates.

    Here is my web page :: Casual Sex El Paso – Savannah

  3. Gordon

    Savannah…. that plug-in must exist but I don’t post often enough to merit installing an automatic post tweeter. It’s pretty quick while creating your post to grab the short URL and paste it into a tweet.

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*