{"id":20529,"date":"2014-03-05T11:48:04","date_gmt":"2014-03-05T17:48:04","guid":{"rendered":"http:\/\/theme.co\/x\/member\/?p=20529"},"modified":"2016-12-21T07:30:29","modified_gmt":"2016-12-21T13:30:29","slug":"customizer-custom","status":"publish","type":"post","link":"https:\/\/theme.co\/archive\/kb\/customizer-custom\/","title":{"rendered":"Custom Customizer Options"},"content":{"rendered":"

This article was last updated on the December 21, 2016<\/strong>.<\/em><\/p>\r\n\r\n

Not only is the WordPress customizer, great for editing\/changing various parts of your website, but it can also be used to add custom code, both CSS and jQuery\/Javascript.<\/p>\r\n\r\n

Note: You should never enter custom PHP in the CSS or Javascript section of the customizer, doing so could break your site and make it inaccessible.<\/strong><\/p>\r\n\r\n

In this article, we’ll cover adding custom CSS and custom Javascript, we won’t go too in depth on specifics, as there isn’t a need, but follow along with the article and everything should make sense, of course if you have any problems or have a question, our awesome support is just a click away here<\/a>.<\/p>\r\n\r\n

Adding Custom CSS<\/h3>\r\n\r\n

We’re going to be changing the color of our prompt box title for this tutorial.<\/p>\r\n\r\n

\"Prompt<\/p>\r\n\r\n

First of course, we’ll need to know what the CSS class or div ID is for the specific part we want to change, there’s a few ways you can do this, we won’t be going in depth into that within this article, but you can use Firebug which is for Firefox, you can find that add-on here<\/a>. Alternatively you can use Chrome developer tools, which there’s a great guide to here<\/a>.<\/p>\r\n\r\n

If you’ve chosen to go with Firebug, there’s a great tutorial on that here<\/a>.<\/p>\r\n\r\n

In our case, the code we need to use is:<\/p>\r\n\r\n

\r\n\t\r\nh2.h-prompt {\r\n\tcolor: #ff0000;\r\n}\r\n\r\n<\/pre>\r\n\r\n
Now we have the code we need, let’s head to the Customizer, once you’ve opened up the Customizer, click on Custom<\/strong><\/p>\r\n\r\n
\"Custom\"<\/p>\r\n\r\n
Once you’ve opened up the custom area, you’ll see two text areas, these are CSS and Javascript.<\/p>\r\n\r\n
It’s very important, that you don’t put custom CSS in the Javascript box and that you don’t put custom Javascript in the CSS box, doing so, could break your site.<\/strong><\/p>\r\n\r\n
\"Custom<\/p>\r\n\r\n
Enter your CSS in your Custom CSS area, like this:<\/p>\r\n\r\n
\"Custom<\/p>\r\n\r\n
As soon as you enter the CSS code, you’ll see the changes reflected in the preview area of the Customizer like this:<\/p>\r\n\r\n
\"Color<\/p>\r\n\r\n
If you’re happy with the changes go ahead and click on Save & Publish<\/strong> at the top of the Customizer.<\/p>\r\n\r\n
Congrats! You’ve now successfully added custom css, through the WordPress Customizer and have a better understanding of how to add custom CSS. Next up let’s try adding some custom Javascript.<\/p>.\r\n\r\n
Adding Custom Javascript<\/h3>\r\n\r\n
Under the Custom CSS box, you’ll see the Custom Javascript box, here you can enter Javascript or jQuery, you don’t need to add any script tags here. Just enter your code as needed. So if we wanted we could add a alert by entering the following:<\/p>\r\n\r\n
\r\n\t\r\nalert(\"Hey!\");\r\n\t\r\n<\/pre>\r\n\r\n
Then we can see that shows a browser message when we enter it like this:<\/p>\r\n\r\n
\"Browser<\/p>\r\n\r\n
Enter the code you want and then click on Save & Publish<\/strong>.<\/p>\r\n\r\n
Formatting in the customizer<\/h3>\r\n\r\n
When possible in the customizer, always try to format your code, it’s make it much easier to read and understand, rather than a jumbled up mess. Ideally you should write the code first using a text editor, such as Notepadd++<\/a> (Windows) or Coda<\/a> (Mac)<\/p>\r\n\r\n
This ensures, if for some reason you need a developer to debug your site, or anything else, that the code is easy to read and understand.<\/p>\r\n\r\n
Congrats! Through this article, you’ve learnt more about the WordPress customizer and how to use the different aspects of the custom code section to further enhance your site and make edits.<\/p>","protected":false},"excerpt":{"rendered":"This article was last updated on the December 21, 2016. Not only is the WordPress customizer, great for editing\/changing various parts of your website, but it can also be used to add custom code, both CSS and jQuery\/Javascript. Note: You should never enter custom PHP in the CSS or Javascript section of the customizer, doing […]","protected":false},"author":122,"featured_media":0,"comment_status":"closed","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,"footnotes":""},"categories":[31,11],"tags":[],"class_list":["post-20529","post","type-post","status-publish","format-standard","hentry","category-customizer","category-kb"],"_links":{"self":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts\/20529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/users\/122"}],"replies":[{"embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/comments?post=20529"}],"version-history":[{"count":0,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts\/20529\/revisions"}],"wp:attachment":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/media?parent=20529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/categories?post=20529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/tags?post=20529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}