{"id":4448,"date":"2014-05-17T08:43:45","date_gmt":"2014-05-17T08:43:45","guid":{"rendered":"http:\/\/demo.momizat.net\/goodnews\/?p=103"},"modified":"2014-05-17T08:43:45","modified_gmt":"2014-05-17T08:43:45","slug":"wordpress-theme-customizer","status":"publish","type":"post","link":"https:\/\/bulandrashtrawadi.in\/?p=4448","title":{"rendered":"The WordPress Theme Customizer"},"content":{"rendered":"<p>In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to <strong>tweak theme settings using a WYSIWYG interface<\/strong>and customize the theme so it includes the colors, fonts, text \u2014 and pretty much anything else \u2014 they want.<\/p>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2012\/11\/wp-theme-customizer.jpg\"><img decoding=\"async\" title=\"WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2012\/11\/wp-theme-customizer.jpg\" alt=\"WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.\" \/><\/a><br \/>\n<em>WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.<\/em><\/p>\n<p>The purists out there may be throwing their hands up in horror \u2014 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\u2019re developing custom themes for client websites, or themes for other developers to use, you have a whole new set of tools to play with.<\/p>\n<p><strong>With the Theme Customizer:<\/strong><\/p>\n<ul>\n<li>If you\u2019re developing free or premium themes for others to use, integrating the Customizer will make your themes much more appealing to developers and website owners.<\/li>\n<li>If you\u2019re 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.<\/li>\n<li>For both groups, you can let website users and developers make changes without having to rely on widgets or theme options pages \u2014 a less risky and less time-consuming approach.<\/li>\n<\/ul>\n<p>So, let\u2019s start by having a look at what the Theme Customizer is and how it works for the user.<\/p>\n<h3>How The Theme Customizer Works For Users<\/h3>\n<p>The Theme Customizer has been integrated into the Twenty Eleven Theme, so you can try it out using that theme. There\u2019s a great video on the Ottopress blog showing you <a href=\"http:\/\/ottopress.com\/2012\/how-to-leverage-the-theme-customizer-in-your-own-themes\/\">how the Customizer works with Twenty Eleven<\/a>. Using it is simple:<\/p>\n<ol>\n<li>On the \u201cThemes\u201d page, search for and activate the Twenty Eleven Theme.<\/li>\n<li>On the same page, click on the \u201cCustomize\u201d link under the current theme\u2019s description.<\/li>\n<\/ol>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/themes_screen_showing_customiser-2.png\"><img decoding=\"async\" title=\"The \u201cCustomize\u201d link is right below the current theme's description on the \u201cThemes\u201d page.\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2012\/11\/themes_screen_showing_customiser.png\" alt=\"The \u201cCustomize\u201d link is right below the current theme's description on the \u201cThemes\u201d page.\" \/><\/a><br \/>\n<em>The \u201cCustomize\u201d link is right below the current theme\u2019s description on the \u201cThemes\u201d page. <a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/themes_screen_showing_customiser-2.png\">Larger view<\/a>.<\/em><\/p>\n<ol start=\"3\">\n<li>This brings up the Theme Customizer in the left column, along with a preview of your website on the right.<\/li>\n<\/ol>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/theme-customiser-twentyeleven-beforev2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-107949\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2012\/12\/theme-customiser-twentyeleven-beforev2.jpg\" alt=\"The theme customizer shown with the twenty eleven theme\" \/><\/a><br \/>\n<em>The Customizer options are shown side-by-side with a preview of your website, so you can test the effect of changes. <a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/theme-customiser-twentyeleven-beforev2.png\">Larger view<\/a>.<\/em><\/p>\n<ol start=\"4\">\n<li>To make changes, all you have to do is select each of the available options and edit their settings. The options are:\n<ul>\n<li><strong>Site title and tagline<\/strong><br \/>\nEdit the title and tagline of the website without having to go to the \u201cSettings\u201d page.<\/li>\n<li><strong>Colors<\/strong><br \/>\nIn the Twenty Eleven theme, you can only change the color of the header text and website background, but as we\u2019ll see, this can potentially be used for much more.<\/li>\n<li><strong>Header image<\/strong><br \/>\nChoose from one of the default images or remove the header image altogether.<\/li>\n<li><strong>Background image<\/strong><br \/>\nUpload 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\u2019t stretch.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/theme-customiser-twentyeleven-background-image.png\"><img decoding=\"async\" title=\"You can set your background image to tile, but not stretch.\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2012\/11\/theme-customiser-twentyeleven-background-image.png\" alt=\"You can set your background image to tile, but not stretch.\" \/><\/a><br \/>\n<em>You can set your background image to tile, but not stretch. <a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/03\/theme-customiser-twentyeleven-background-image.png\">Larger view<\/a>.<\/em><\/p>\n<ul>\n<li>\n<ul>\n<li><strong>Navigation<\/strong><br \/>\nSelect which menu you want to use for the primary navigation of your website.<\/li>\n<li><strong>Static Front Page<\/strong><br \/>\nSpecify whether the front page of the website should be a listing of your latest posts, or a static page of your choosing.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ol start=\"5\">\n<li>Once you\u2019ve made the changes you want, you must click the \u201cSave &amp; Publish\u201d button. Until this is clicked, none of the changes are reflected in the live website. This means you can play to your heart\u2019s content without your visitors seeing your experiments.<\/li>\n<\/ol>\n<p>Another really exciting way to use the customizer is when <strong>previewing themes<\/strong>. If a theme has the Customizer built in, you can use it to make tweaks before downloading and activating the theme.<\/p>\n<p>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?<\/p>\n<h3><\/h3>\n<p>So let\u2019s take a look at how to implement Customizer in your theme, and how to add your own customization options.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>from : http:\/\/www.smashingmagazine.com\/2013\/03\/05\/the-wordpress-theme-customizer-a-developers-guide\/<\/p>\n<blockquote class=\"mom_quote \" style=\"font-family:verdana;font-size:14px;font-style:italic;border-left-color:#dd9933; color:#474747; background-color:#F5F5F5; \"><span class=\"quote-arrow\" style=\"border-left-color:#dd9933;\"><\/span>This Demo Content Brought to you by <a href=\"http:\/\/momizat.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Momizat Team<\/a> <\/blockquote>\n<h2>this is tags and keywords : wordpress themes momizat Tutorial wordpress  templates<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2014 and pretty much anything else \u2014 they want. WordPress 3.4 allows you to make extensive customizations [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[16,30,75,78,79,80,50,83],"_links":{"self":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4448"}],"collection":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4448"}],"version-history":[{"count":0,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}