WordPress Twenty Eleven Pluggable

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme.

While loitering over on the WordPress Support Forum, trying to answer a topic on resizing the headers “the penny dropped”, the twentyeleven_setup() function in the parent theme is pluggable, so we can now do so many changes in a single function.

Our Child Theme

In our child theme we wanted to enhance it by using the header functions for a logo, so the admin could choose or upload a logo, so we only wanted a 120px by 120px logo image in the header.

pluggable-image

The theme in the image is downloadable from another posts so we are not going to go into the code here, do watch the pluggable functions video ,download the theme and play with the code.

Best Viewed HD and Full Screen to read the code!

By copying the themes twenty eleven setup function from twenty eleven to the child theme we could change so much more without needing to remove filters and actions in our child theme.

We could use the Header image as a logo at 120px by 120px, removed the parents headers, removed the post classes, removed some of the image sizes, added new image sizes, and uploaded our own headers (logos) folder.

pluggable-image2

Child Theme Video Development Playlist

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Free WordPress PhotoBlog Theme

Following on from our recent posts on creating different layouts using the post class, we thought it would be fun to apply the layouts to a Photo Blogging Theme.

Photo Blogging and photography themes need to be quite plain, as the visitors come to see the images and not the theme, so the theme must be clean, functional and secondary to the content.

Raindrops Photo Blog

This is our theme simple wide, white, neutral colors that will allow the images to talk to the visitors, we have incorporated Google fonts into the header, our social media widget, and nine different content layouts, the theme is functional in one of our theme sandboxes, you can view the theme here.

This is the default layout, here you can see the top menu and the social media widget, notice that we have removed the header, this theme will not display a header or logo image, just the Google font and the different layouts should be enough to impress the visitors.

photo-blog-2

The layouts are the same as the post class theme, the differences are the size of the images and the letterbox size, you can view the other layouts in the videos that can be found on the other post, watching these will give us a look at the different setups.

Getting Started

You must be running a version of WordPress that has the twenty eleven theme in the themes folder, this is a twenty eleven child theme and needs the parent theme to be present, the theme is supplied “as is” and is for learning about WordPress, it is fully functional and may be used un-supported by Digital Raindrops and without any warranty.

Raindrops PhotoBlog

Download the theme, upload and activate it from the Admin > Appearance > Themes, there are a few more things we need to do to get started, start with Appearance > Background and change the value to white ( #FFFFFF )

photo-blog-4

Featured Images

WordPress will not update existing featured images, so we will need to either use a plugin to re-size the images, or select or upload new featured images, the letterbox image requires that the featured image is at least 800px wide, when you upload a photo into the content area, this can also be set as the featured image.

photo-blog-8

Theme Setup

From Admin > Appearance > Theme Setup, we can set the layouts for the Home page, archive page, search page, also we could change the Google font here if we wanted, just by finding the font name via the link and typing it into the Google Font Name text box.

photo-blog-5

Category Layouts

Each Category can have it’s own layout, there are eight layouts to choose from, these are set from Admin > Posts > Category then edit any category, set the layout and save.

photo-blog-7

Column Views

Here is one of the content layouts, this one is two over three then left aligned thumbnails, all thumbnails are linked to the post so the visitor can click on the image, title or the read more link, notice the small icons we have built into the new layouts.

photo-blog-3

Dark Option

This theme will also work with the dark option, here we can see the letterbox images and the icons that match the theme, we changed the background here to #010101

photo-blog-1

Social Widget

We have also built in our social widget right into the theme, just drag it to a sidebar and fill out your social media account names.

photo-blog-9

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

WordPress London Post Class

We created this theme as an extension to our post on the WordPress Post Class function after our talk at the #wpldn meetup group, we have extended the theme with a couple of new layouts, adding the date icon.

As well as the post class functions we added an extra two menus one in the header and one in the footer, these have been styled to match our demo theme, we used some of the code from our extended category posts to set the content choices, we are supplying the demo theme for educational reasons as we do not consider it fully finished.

Continue reading

Resize the Twenty Eleven Theme

We have seen a number of solutions to resize the WordPress twenty eleven theme, there are a number of considerations when resizing the theme, like the built in headers and content area, we thought we would add our own solution to the mix.

Changing the header height is not that hard to do using a function and the after_setup_theme hook, but what if we want a wider theme, the headers will still show but will be stretched, the default header will still be the parent themes header, so lets look at the steps we take in changing our child theme.

Continue reading