Customize Option in WordPress
Today we will talk about the Customize option in the WordPress Appearance tab. To properly demonstrate everything that this option brings to WordPress users, we will be using the Customize screen for Twenty Seventeen theme.
Apperance > Customize option
We can access this option through Appearance > Customize or by going to Appearance > Themes, and then clicking on the Customize button right next to the active theme.
On the picture below, you can see an overview of all available options listed in the Appearance > Customize screen:
Customize > Site Identity
Here are all the options in this section and fields to which they apply:
1. Logo
In this field you can upload the site logo in png or jpg format. The logo is usually placed in the website header.
2. Site Title
The Site Title can be seen in the browser tab to the right of the favicon image. It also appears in the site searches and shares, as well as in the page source (F12).
3. Tagline
The Tagline is displayed in the browser tab right after the Site Title, as well as in the site shares and searches. Just like the Site Title, it can also be seen in the page source (F12).
It is important to note that if the Display Site Title and Tagline option is checked, then Site Title and Tagline will also be displayed in the default theme’s header.
4. Site Icon
Also known as favicon, this is an icon which can be seen in the far left corner of the browser tab, right next to the Site Title. It also appears in the site searches and shares. If the users have a large number of tabs open, this is the easiest way to identify the specific website in the open tab. This option contains a field for uploading the icon in png or jpg format. Site icons should be square and should have dimensions of at least 512×512 pixels.
Header Media
In this section you can add Header background image, Header background video, or you can hide this section entirely by selecting the Hide image option.
1. Header Image
By clicking on Add new image you will be able to change your default background picture.
2. Header Video
Instead of background picture, you can upload the header video in mp4 format, or you can enter a youtube URL.
3. Hide image
As its name indicates, this option allows you to hide your header image:
Upon clicking on Hide image, your header should be displayed like this:
Menus
In this section you may add, delete or edit the menus for different navigation types.
1. Top Menu
This is the main navigation area in your default theme.
Add Items button opens a new section where you will be able to add new items. Clicking on x sign located next to every item allows you to delete the items that have already been made, while Reorder option lets you change the order of the menu items. You can also rearrange the menu items by simply dragging and dropping them in any order that you’d like.
2. Social Links Menu
Social Links are displayed in the default theme’s footer. In this section you can add, modify and delete social icon links that appear in the footer area.
3. Create new menu
If you want, you can also add a new menu and assign it to one of the two currently existing locations – Top Menu or Social Links Menu:
4. Menu Locations
View All Locations option lets you see all available Menu Locations. In addition, you can choose one of the premade menus for that location from the dropdown menu:
Widgets
In this section you can change and modify the widget types and contents.
1. Blog Sidebar
Here you can change the widgets located in the blog sidebar, as well as delete them or add the new ones. By clicking on Add a Widget you will be able to add one of the predefined widget types in WordPress, such as Text, Image, Link, Recent Posts, etc.
2. Footer 1
Footer 1 area brings you the possibility of changing the contents of the left column in the Footer area and adding the new widgets, if needed.
2. Footer 2
Here you can change the right column contents in the Footer and add widgets.
Homepage Setings
This section lets you select your homepage (root page) and default blog page. Moreover, there’s an option of choosing between having your latest posts displayed as your homepage or making your page static.
Additional CSS
Finally, in this section you can add a CSS code which will overwrite the CSS code of the installed theme. In this way, the styles you’ve added won’t be endangered when changing or updating the theme.
Here’s an example of additional CSS:
h1{
color:#dc3232
}
Once you type in your CSS, make sure to click on the Publish button.
We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!
