The WordPress Theme Customizer

109

In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to tweak theme settings using a WYSIWYG interfaceand customize the theme so it includes the colors, fonts, text — and pretty much anything else — they want.

WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.
WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.

The purists out there may be throwing their hands up in horror — a WYSIWYG interface! Letting users alter themes themselves! Surely that opens the floodgates for the creation of thousands of ugly, messy WordPress websites? Well, yes, there is a risk of that. But more importantly, the Customizer means that if you’re developing custom themes for client websites, or themes for other developers to use, you have a whole new set of tools to play with.

With the Theme Customizer:

  • If you’re developing free or premium themes for others to use, integrating the Customizer will make your themes much more appealing to developers and website owners.
  • If you’re building client websites, you can let your client tweak the template content of their website such as the logo, tagline and contact details in a more intuitive way than by using a theme options page.
  • For both groups, you can let website users and developers make changes without having to rely on widgets or theme options pages — a less risky and less time-consuming approach.

So, let’s start by having a look at what the Theme Customizer is and how it works for the user.

How The Theme Customizer Works For Users

The Theme Customizer has been integrated into the Twenty Eleven Theme, so you can try it out using that theme. There’s a great video on the Ottopress blog showing you how the Customizer works with Twenty Eleven. Using it is simple:

  1. On the “Themes” page, search for and activate the Twenty Eleven Theme.
  2. On the same page, click on the “Customize” link under the current theme’s description.

The “Customize” link is right below the current theme's description on the “Themes” page.
The “Customize” link is right below the current theme’s description on the “Themes” page. Larger view.

  1. This brings up the Theme Customizer in the left column, along with a preview of your website on the right.

The theme customizer shown with the twenty eleven theme
The Customizer options are shown side-by-side with a preview of your website, so you can test the effect of changes. Larger view.

  1. To make changes, all you have to do is select each of the available options and edit their settings. The options are:
    • Site title and tagline
      Edit the title and tagline of the website without having to go to the “Settings” page.
    • Colors
      In the Twenty Eleven theme, you can only change the color of the header text and website background, but as we’ll see, this can potentially be used for much more.
    • Header image
      Choose from one of the default images or remove the header image altogether.
    • Background image
      Upload an image to use as the background of the website. The image below is what happens when I upload an image of some hang gliders to my website. The image can be tiled but unfortunately doesn’t stretch.

You can set your background image to tile, but not stretch.
You can set your background image to tile, but not stretch. Larger view.

    • Navigation
      Select which menu you want to use for the primary navigation of your website.
    • Static Front Page
      Specify whether the front page of the website should be a listing of your latest posts, or a static page of your choosing.
  1. Once you’ve made the changes you want, you must click the “Save & Publish” button. Until this is clicked, none of the changes are reflected in the live website. This means you can play to your heart’s content without your visitors seeing your experiments.

Another really exciting way to use the customizer is when previewing themes. If a theme has the Customizer built in, you can use it to make tweaks before downloading and activating the theme.

This demonstrates the Customizer in action with the Twenty Eleven theme, but what about your own themes? How would you harness this to add more functionality in themes you are selling or developing for clients?

So let’s take a look at how to implement Customizer in your theme, and how to add your own customization options.

 

 

from : http://www.smashingmagazine.com/2013/03/05/the-wordpress-theme-customizer-a-developers-guide/

[quote font=”verdana” font_size=”14″ font_style=”italic” color=”#474747″ bgcolor=”#F5F5F5″ bcolor=”#dd9933″ arrow=”yes” align=”centre”]This Demo Content Brought to you by Momizat Team [/quote]

this is tags and keywords : wordpress themes momizat Tutorial wordpress templates

Compartilhar.

Autor

109 Comentários

  1. Does your blog have a contact page? I’m having problems locating it but, I’d like to shoot you
    an email. I’ve got some suggestions for your blog you might be interested
    in hearing. Either way, great site and I look forward to seeing it develop over time.

  2. Hello, i read your blog occasionally and i own a similar one and
    i was just wondering if you get a lot of spam feedback?
    If so how do you protect against it, any plugin or anything you can suggest?

    I get so much lately it’s driving me insane so any help is very much appreciated.

  3. I’m truly enjoying the design and layout of your site.

    It’s a very easy on the eyes which makes it much more pleasant for me to come
    here and visit more often. Did you hire out a designer to
    create your theme? Fantastic work!

  4. I was suggested this blog by means of my cousin. I’m not positive whether this submit
    is written via him as no one else recognize such targeted about my difficulty.
    You’re incredible! Thank you!

  5. I always used to read post in news papers but now as
    I am a user of net therefore from now I am using
    net for posts, thanks to web. ps4 games 185413490784 ps4 games

  6. I have been exploring for a little for any high quality articles or
    blog posts in this kind of area . Exploring in Yahoo I
    at last stumbled upon this web site. Studying this information So i
    am glad to express that I’ve an incredibly just right uncanny feeling
    I discovered just what I needed. I so much indisputably will make sure to don?t put out of your mind this site and give it a look regularly.
    games ps4 185413490784 games ps4

  7. I’m not sure why but this blog is loading extremely slow for me.
    Is anyone else having this problem or is it a problem on my end?
    I’ll check back later and see if the problem still exists.

  8. Hi! This is kind of off topic but I need some guidance from an established blog.
    Is it hard to set up your own blog? I’m not very techincal but I
    can figure things out pretty quick. I’m thinking about making my own but I’m not sure where to start.
    Do you have any points or suggestions? Cheers

  9. naturally like your web site however you need to check the spelling
    on quite a few of your posts. A number of them are rife with spelling problems and I find
    it very bothersome to tell the truth then again I’ll definitely come again again.

  10. I was pretty pleased to find this site. I need to to thank you for
    ones time for this particularly fantastic read!!
    I definitely really liked every little bit of it and i also have
    you saved as a favorite to see new stuff in your website.

  11. It’s a pity you don’t have a donate button! I’d definitely donate to this outstanding blog!
    I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk about this website with my Facebook group.
    Talk soon! asmr 0mniartist

Leave A Reply

X