{"id":30322,"date":"2020-04-08T16:32:03","date_gmt":"2020-04-08T14:32:03","guid":{"rendered":"https:\/\/xneelo.co.za\/help-centre\/?p=30322"},"modified":"2025-03-24T15:47:25","modified_gmt":"2025-03-24T13:47:25","slug":"wordpress-customizer","status":"publish","type":"post","link":"https:\/\/xneelo.co.za\/help-centre\/website\/wordpress-customizer\/","title":{"rendered":"How to use the WordPress Customizer"},"content":{"rendered":"<p>The <strong>Customizer<\/strong> is included in every WordPress theme to allow you to customise aspects of that <strong>theme<\/strong>, which are then implemented sitewide.<\/p>\n<p>Themes vary in the functionality offered within the customizer; most free themes offer only very basic customisation, while paid-for and premium themes often add great functionality. For example, some basic free themes don&#8217;t provide an option to choose your own fonts, while premium themes usually have extensive font or typography options. This is worth considering when selecting a theme.<\/p>\n<p>Let&#8217;s have a look at the basic functionality included in all theme customizers:<\/p>\n<h2>Access the Customizer<\/h2>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Log in to your <a href=\"https:\/\/xneelo.co.za\/help-centre\/website\/wp-admin-control-panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP-admin<\/a> control panel<\/li>\n<li>Find the customizer by clicking on either:\n<ul>\n<li>The big blue <strong>Customise Your Site<\/strong> button on the Dashboard screen, or<\/li>\n<li>On the left menu under <strong>Appearance &gt; Customise<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30340\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customise2.png\" alt=\"\" width=\"579\" height=\"516\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customise2.png 1000w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customise2-300x267.png 300w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customise2-768x684.png 768w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/li>\n<li>The customizer opens as a tabbed grey menu on the left of the screen with each menu item opening up various options. On the right side of the screen you will see a live preview of the site. Any changes you make will be reflected immediately.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30112\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/03\/customise-default.png\" alt=\"\" width=\"303\" height=\"343\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/03\/customise-default.png 594w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/03\/customise-default-264x300.png 264w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2>Using the Customizer<\/h2>\n<p>Edit each tab according to your needs and then click <strong>Publish.<\/strong><\/p>\n<h3>Site Identity<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30497\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-identity.png\" alt=\"\" width=\"328\" height=\"628\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-identity.png 588w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-identity-157x300.png 157w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-identity-535x1024.png 535w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<h4>Logo<\/h4>\n<p>To set your logo on every page of your website (usually at top left), click <strong>Select logo\u00a0<\/strong>and upload your business logo.<\/p>\n<h4>Site Title<\/h4>\n<p>Add the name of your website.<\/p>\n<h4>Tagline<\/h4>\n<p>(Optional) Delete &#8220;Just another WordPress site&#8221; and add a line describing your site.<\/p>\n<h4>Site Icon<\/h4>\n<p>This is the tiny icon that will appear on your site&#8217;s browser tab(s). Usually this is the business logo \u2013 or a part of it as the logo must be square.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-30515 alignleft\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-icon.png\" alt=\"\" width=\"226\" height=\"57\" \/><\/p>\n<h3>Colours<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30512\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-colours.png\" alt=\"\" width=\"318\" height=\"419\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-colours.png 592w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-colours-228x300.png 228w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>The <strong>Default<\/strong> setting is set according to the theme design, but you can override this setting sitewide by choosing <strong>Custom\u00a0<\/strong>and selecting your own colour(s).<\/p>\n<p>If you select the bottom filter option, then each of your featured images will get a transparent coloured overlay in your chosen colour.<\/p>\n<h3>Menus<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30509\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-menu.png\" alt=\"\" width=\"322\" height=\"460\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-menu.png 596w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-menu-210x300.png 210w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/p>\n<p>This is where you set where you want your menu to appear on your site as well as what pages should appear in that menu.<\/p>\n<h3>Widgets<\/h3>\n<p>Widgets are tiny blocks of specific functionality that you can place in your WordPress sidebars or footers (also known as widget-ready-areas). This is an easy way to add galleries, quotes, popular posts, Facebook like boxes and other dynamic items on your site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30506\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-widgets.png\" alt=\"\" width=\"327\" height=\"577\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-widgets.png 586w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-widgets-170x300.png 170w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-widgets-580x1024.png 580w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/p>\n<p>In the case above, all of these widgets would appear in the footer (the bottom of every page of your website). In most cases you will rather want to remove some of these widgets. Select each one that you don&#8217;t want and then click <strong>Delete.<\/strong><\/p>\n<p>For more see: <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-add-and-use-widgets-in-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to add and use widgets in WordPress<\/a><\/p>\n<h3>Homepage Settings<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30503\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-homepage.png\" alt=\"\" width=\"332\" height=\"662\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-homepage.png 592w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-homepage-151x300.png 151w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-homepage-514x1024.png 514w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/p>\n<p>Choose if you want your website to open on a static page or if your website should open on the latest posts \u2013 typical of a blog.<\/p>\n<h3>Additional CSS<\/h3>\n<p>In most cases, this tab will be left empty, however it a powerful tool to override theme settings by using specific code. If you want specific functionality that isn&#8217;t provided by your theme, you could contact your theme provider and they may provide you with a short piece of code to paste into this field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-30500\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-css.png\" alt=\"\" width=\"334\" height=\"263\" srcset=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-css.png 594w, https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-css-300x236.png 300w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/p>\n<p>As an example, the CSS above allows the site logo to overflow from the header area onto the image below.<\/p>\n","protected":false,"plain":"The <strong>Customizer<\/strong> is included in every WordPress theme to allow you to customise aspects of that <strong>theme<\/strong>, which are then implemented sitewide.\r\n\r\nThemes vary in the functionality offered within the customizer; most free themes offer only very basic customisation, while paid-for and premium themes often add great functionality. For example, some basic free themes don't provide an option to choose your own fonts, while premium themes usually have extensive font or typography options. This is worth considering when selecting a theme.\r\n\r\nLet's have a look at the basic functionality included in all theme customizers:\r\n<h2>Access the Customizer<\/h2>\r\n<ol>\r\n \t<li >\r\n<ol>\r\n \t<li>Log in to your <a href=\"https:\/\/xneelo.co.za\/help-centre\/website\/wp-admin-control-panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP-admin<\/a> control panel<\/li>\r\n \t<li>Find the customizer by clicking on either:\r\n<ul>\r\n \t<li>The big blue <strong>Customise Your Site<\/strong> button on the Dashboard screen, or<\/li>\r\n \t<li>On the left menu under <strong>Appearance &gt; Customise<\/strong><\/li>\r\n<\/ul>\r\n<img class=\"alignnone wp-image-30340\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customise2.png\" alt=\"\" width=\"579\" height=\"516\" \/><\/li>\r\n \t<li>The customizer opens as a tabbed grey menu on the left of the screen with each menu item opening up various options. On the right side of the screen you will see a live preview of the site. Any changes you make will be reflected immediately.<img class=\"alignnone wp-image-30112\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/03\/customise-default.png\" alt=\"\" width=\"303\" height=\"343\" \/><\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<h2>Using the Customizer<\/h2>\r\nEdit each tab according to your needs and then click <strong>Publish.<\/strong>\r\n<h3>Site Identity<\/h3>\r\n<img class=\"alignnone wp-image-30497\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-identity.png\" alt=\"\" width=\"328\" height=\"628\" \/>\r\n<h4>Logo<\/h4>\r\nTo set your logo on every page of your website (usually at top left), click <strong>Select logo\u00a0<\/strong>and upload your business logo.\r\n<h4>Site Title<\/h4>\r\nAdd the name of your website.\r\n<h4>Tagline<\/h4>\r\n(Optional) Delete \"Just another WordPress site\" and add a line describing your site.\r\n<h4>Site Icon<\/h4>\r\nThis is the tiny icon that will appear on your site's browser tab(s). Usually this is the business logo \u2013 or a part of it as the logo must be square.\r\n\r\n<img class=\"wp-image-30515 alignleft\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-site-icon.png\" alt=\"\" width=\"226\" height=\"57\" \/>\r\n<h3>Colours<\/h3>\r\n<img class=\"alignnone wp-image-30512\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-colours.png\" alt=\"\" width=\"318\" height=\"419\" \/>\r\n\r\nThe <strong>Default<\/strong> setting is set according to the theme design, but you can override this setting sitewide by choosing <strong>Custom\u00a0<\/strong>and selecting your own colour(s).\r\n\r\nIf you select the bottom filter option, then each of your featured images will get a transparent coloured overlay in your chosen colour.\r\n<h3>Menus<\/h3>\r\n<img class=\"alignnone wp-image-30509\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-menu.png\" alt=\"\" width=\"322\" height=\"460\" \/>\r\n\r\nThis is where you set where you want your menu to appear on your site as well as what pages should appear in that menu.\r\n<h3>Widgets<\/h3>\r\nWidgets are tiny blocks of specific functionality that you can place in your WordPress sidebars or footers (also known as widget-ready-areas). This is an easy way to add galleries, quotes, popular posts, Facebook like boxes and other dynamic items on your site.\r\n\r\n<img class=\"alignnone wp-image-30506\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-widgets.png\" alt=\"\" width=\"327\" height=\"577\" \/>\r\n\r\nIn the case above, all of these widgets would appear in the footer (the bottom of every page of your website). In most cases you will rather want to remove some of these widgets. Select each one that you don't want and then click <strong>Delete.<\/strong>\r\n\r\nFor more see: <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-add-and-use-widgets-in-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to add and use widgets in WordPress<\/a>\r\n<h3>Homepage Settings<\/h3>\r\n<img class=\"alignnone wp-image-30503\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-homepage.png\" alt=\"\" width=\"332\" height=\"662\" \/>\r\n\r\nChoose if you want your website to open on a static page or if your website should open on the latest posts \u2013 typical of a blog.\r\n<h3>Additional CSS<\/h3>\r\nIn most cases, this tab will be left empty, however it a powerful tool to override theme settings by using specific code. If you want specific functionality that isn't provided by your theme, you could contact your theme provider and they may provide you with a short piece of code to paste into this field.\r\n\r\n<img class=\"alignnone wp-image-30500\" src=\"https:\/\/xneelo.co.za\/help-centre\/wp-content\/uploads\/2020\/04\/customiser-css.png\" alt=\"\" width=\"334\" height=\"263\" \/>\r\n\r\nAs an example, the CSS above allows the site logo to overflow from the header area onto the image below."},"excerpt":{"rendered":"<p>The Customizer is included in every WordPress theme to allow you to customise aspects of that theme, which are then implemented sitewide.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"lsx_disable_title":"0","_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"categories":[166],"tags":[22793,22787],"topics":[10371],"class_list":["post-30322","post","type-post","status-publish","format-standard","hentry","category-website","tag-customizer","tag-wordpress-customiser","topics-wordpress"],"acf":[],"additional_meta":{"category_title":[{"term_id":166,"name":"Website","slug":"website","term_group":0,"term_taxonomy_id":166,"taxonomy":"category","description":"About your Website(s)","parent":0,"count":169,"filter":"raw","term_order":"120","cat_ID":166,"category_count":169,"category_description":"About your Website(s)","cat_name":"Website","category_nicename":"website","category_parent":0}],"tag_title":[{"term_id":22793,"name":"customizer","slug":"customizer","term_group":0,"term_taxonomy_id":22793,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw","term_order":"550"},{"term_id":22787,"name":"WordPress customiser","slug":"wordpress-customiser","term_group":0,"term_taxonomy_id":22787,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw","term_order":"552"}]},"featured_image_src":null,"author_info":{"display_name":"janine","author_link":"https:\/\/xneelo.co.za\/help-centre\/author\/janine\/","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/aa7eb245072caa276e9df6888f1456c90cbf5304bea0210152b08c26141c638e?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/posts\/30322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/comments?post=30322"}],"version-history":[{"count":0,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/posts\/30322\/revisions"}],"wp:attachment":[{"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/media?parent=30322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/categories?post=30322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/tags?post=30322"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/xneelo.co.za\/help-centre\/wp-json\/wp\/v2\/topics?post=30322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}