Tip:
Highlight text to annotate it
X
Hello, I’m MaAnna with BlogAid and in this video I’ll share with you my first look
at the new default theme that will be installed with WordPress 3.5, which is slated to release
on December 5th. I’m testing the Beta 2 version, so be sure to see my video on what’s
new in the core too. The Twenty Twelve theme is a bold departure from Twenty Ten and Twenty
Eleven and will likely become the starting point for designers going forward.
One of the first things that will strike you about the new Twenty Twelve theme is just
how stark it is. That’s actually a good thing. The trend in WordPress themes has been
toward minimalism, so super clean is super good.
The other big development is that this new theme is totally responsive, meaning that
it adapts its width to the device on which it’s being viewed.
And I want to make a distinction here about that. You’ll find some themes that say they
are responsive and other themes that say they’re mobile friendly or mobile optimized and there
is a real difference.
Mobile friendly means that the site will display accurately on a mobile device. These are usually
fixed width themes, meaning that they hold their shape on all viewing screens.
Mobile optimized means that the theme detects the device and reshapes itself for the size
of the screen on which it is being viewed based on a list of common devices such as
an iPad or Android phone.
Responsive design means that the theme detects the screen size and reshapes itself based
on that, regardless of the device. That also means that if you flip your tablet or phone
to a different orientation, the theme will reshape itself to fit. Basically, it squeezes
down to show columns of the site, which means that the least amount of info will be shown
on devices with the smallest screens.
Twenty Twelve is fully responsive.
That can be good or bad, depending on what type of site you run and if you can afford
to have cell phone users not see most of what’s on your pages, like your sidebar and such.
It also makes design more complicated because the site must look good in all configurations.
So, before you jump on the responsive bandwagon, be sure to check your site’s analytics to
see how your audience is reading your site now. BlogAid analytics show a 200:1 preference
for reading on non-mobile devices, which is why I won’t be taking the site mobile anytime
soon. However, that will not be the case for sites that have a high entertainment value
or where folks will be reading posts on the go.
If you’re watching this video on the BlogAid site, be sure to look below it for related
links to help you decide if a responsive design is in your best interest.
The Twenty Twelve theme is already available to WordPress.com users, so I want to take
you there to see the working demo they have posted so you can get a better idea of how
nice the new layouts are.
Much like premium themes, the home page of the new Twenty Twelve theme runs on widget-ready
areas. And this was a much needed improvement.
As you can see, it has an upper and lower area. Let’s return to my beta testing site
and I’ll show you the basics of how that works.
By default, WordPress displays your Posts page as the Home page of your site. Normally,
the posts page shows your blog posts. But, you always had the option of setting a static
page as the Home page of your site and the way that it had to be done was very confusing
to most folks. They’ve finally made it a little more clear what you need to do in the
Twenty Twelve theme.
From the Dashboard, go to Settings > Reading.
At the top is a checkbox to Show a page instead of your latest posts.
Check it.
You still have to create the static Home page, but at least now it sort of tells you that,
and it gives you the link for what will become your Posts page, which is Blog.
Once you have that set, if you click the Save Changes button now, it will give you an error.
So, go create the pages first and then return to this setting. If you need help with how
to do this, see my video on Static Page as Home Page.
Once you have those new pages set up and selected, then go to Appearance > Widgets.
Over on the left you can see three widget-ready areas.
The first is for the main sidebar.
The two at the bottom are for the front page. The first one is for the upper area on the
home page. The second is for the lower area on the home
page.
I just want to show you some of the basics here and I’ll have a full video tutorial
on this soon, but what I want to show you right now is more on the new design features.
Let’s return to the WordPress.com demo site.
The new standard in fonts on sites is around 13px and you can see that the Twenty Twelve
theme is using this bigger size, thankfully. It’s actually a Google font called Open
Sans and is so easy on the eyes.
And, there is a new full width page template. Let me show you how that’s done.
I’m returning to the Beta testing site and opening the Sample Page.
In the Page Attributes module, click the drop-down to see the new templates. The default is a
content area and then a right sidebar.
Then you have a template specifically for the Home page.
And then this other new full width template has no sidebars.
If you want to have no sidebars anywhere on the site, instead of having to use this template
for every page, there’s a better way.
Go to Appearance > Widgets.
Then, remove all widgets from the Main Sidebar area.
Now, let’s have a look at the new posting formats.
I’m going to the Posts list and selecting the Hello World! post.
You can see the list of available post formats in the Formats module.
And you can see an example of a few of them on the WordPress.com demo site. So, let’s
go there.
The Muse link brings up the Archive for the posts in the Muse Category and you can see
that one of those posts was put in the Quote format.
The Web Archives page brings up a post in the Link format.
So, I suggest you make a play post and preview it in the different formats to see how they’ll
look.
Now, let’s have a look at the theme customizing features.
Just throwing a little color on this super clean theme may be all you need to customize
it.
To start, you can upload your own header graphic.
Go to Appearance > Header.
The suggested dimensions are 960 by 250 pixels.
And if you just want to insert a picture, you can use the built-in Header Text over
it.
In the last section you just check the box and then select your color.
Then for the background, go to Appearance > Background and choose your color.
When you click the button you’ll see the new color picker, which also allows you to
insert a hex code so you can match your logo colors exactly.
I hope you’ve enjoyed this first look at the new Twenty Twelve theme. It’s already
available to WordPress.com users and will be included in the final release of WordPress
3.5 in December. Be sure to visit BlogAid.net for more video tutorials on how to set up
every aspect of your site and get the most out of its features to make your site better.