WordPress/Guide/Administration Screens/Appearance Customize Screen

From SETV Springfield Technical Wiki
Jump to: navigation, search

Appearance → Customize

WordPress Version 3.4 introduced Theme Customizer and Version 3.6 directly linked it from Appearance > Customize. Also, the Theme Options Screen has been renamed Customize Screen. It allows a Theme author to give users the chance to change certain Theme features such as color and layout in a live preview format.

Please note, the Customize Screen is only available if the active theme supports a Customize ability. In addition, this screen will likely be different for each Theme that enables and builds it. The Customize Screen for WordPress Twenty Sixteen theme, for example, provides options to change the Colors and select a background image.

Customize Screen

Back to Administration Screens.

Theme Customizer

The Theme Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them. Version 4.5 added Device Preview Buttons at the bottom of the Customizer pane. It shows how your site looks in mobile, tablet, and desktop contexts before making changes to its appearance.

Device Preview Buttons

Tips: From Version 4.5, shift-click on nav menu items in preview screen to open corresponding control in Customizer pane. Active Theme field shows current customizing theme name is displayed. You cannot activate other themes or install new one from this Customizer. Go to Administration > Appearance > Themes.

Site Identity

This menu allows you to specify basic site information.

Customier Site Identity Screen

  • Logo - Site logo image such as corporate symbol
    Click Select Logo to open the Media Library. Select an image from it or upload the new image from Upload Files Tab screen and click Choose logo button at the bottom right.
    Click Remove or Change logo to remove or change site logo image.
  • Site Title - Text box for site title
  • Tagline - Text box for tag line
  • Display Site title and tagline - Checkbox to enable or hide the display of title and tag line
  • Site Icon - The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512 pixels wide and tall.
    Click Select Image to open the Media Library. Select an image from it or upload the new image from Upload Files Tab screen and click Select button at the bottom right.

Colors

Colors menu allows the customization of color of site, title and background as displayed by the theme.

Customizer Colors Screen

  • Base Color Scheme - Color Scheme is a color preset for the theme. Choose your favorite color pattern from this dropdown box. You may change each component color after this selection.
  • Background Color - Click the Select color button. You can either enter a hexadecimal number (e.g. d33131) representing the color to be displayed as the background of your theme, or from the color picker, click the desired color and the hexadecimal number for that color will be placed in the Color field, or click Default to restore the initial condition. This background may only be visible on wide displays.
  • Header and Sidebar Text Color - Select text color of the header on small screens and the sidebar on wide screens in the manner as for the above background color.
  • Header and Sidebar Background Color - Select background color of the header and sidebar.

Header Image

Select an optional header image to use in place of the header on small screens and the sidebar on wide screens.

Customizer Header Image Screen

  • Add new image - Click this button to open Choose Image dialog box. You can choose an image that is already in your Media Library, or upload image file from your local computer in Upload Files tab screen. After selecting the header image, click Select and Crop button to go to Crop Image dialog box.

The Crop Header Image feature allows you to select an area of an image and then delete all but that selected area. When initially displayed, WordPress shows that maximum sized crop area in a lighter shade. When using a theme such as the WordPress Twenty Fifteen theme the header image is expected to be 954 x 1300 pixels so that is the size of the selected area shown. You can click, hold, and drag the lighter crop selection area and down (or up) the image to the desired point. Also, you can click one of the eight crop resizer boxes (little square box on each corner and each side) to move the crop selection area.

Customizer Image Crop Screen

Click Crop Image button and the cropped area of the image is saved as the header image and the Customizer will preview your site with updated header.

Once you add a header image you will get some more options:

  • Hide image - Click this button to remove the header image.
  • Previously uploaded - Select from images that you have already uploaded. If you want to remove an image, move the cursor on the image and click Close button at the upper right corner.
  • Randomize uploaded headers - Click this button to show random header image files on every page load.

Background Image

Select an optional background image to use in place of the solid color specified in Colors above.

Customizer Background Image Screen

  • Select image - Click this button will open Select Image dialog box. You can choose an image that is already in your Media Library, or upload image file from your local computer in Upload Files tab screen. Select the image and click Choose Image button. The Customizer will preview your site with updated background.

Once you add a background image you will get some more options:

  • Remove - Once an image is uploaded, if the image is no longer desired, use this button to remove the image. You will not be able to restore any customizations.
  • Change Image - Click this button to change the background image.
  • Background Repeat - Check Radio button to determine if image is repeated. Choices are No Repeat, Tile, Tile Horizontally, or Tile Vertically.
  • Background Position - Check appropriate Radio button to allow image to be positioned Left, Center, or Right
  • Background Attachment - Radio button to Scroll background or display as Fixed.

Navigation

Navigation allows the definition of the placement of your menu. Select which menu appears in the location.

The WordPress Twenty Fifteen theme supports two menu locations, Primary Menu and Social Links Menu. From the pull down box, select the menu that will be presented in the location. If you have added support for more navigation menus in your theme, you will see more pull-down location options.

Note: You cannot create menu in this Customizer. To create it, visit Administration > Appearance > Menus

Widgets

Themes usually have at least 1 or 2 sidebars. Sidebars are the narrow columns to the left or right of your blog posts. Each section in the sidebar is known as a "Widget" that you can add or remove, and move up or down.

You configure Widgets in your sidebar by via this Widgets menu. Although you can configure Widgets via Administration > Appearance > Widgets menu, you can see your changes in live preview of this Customizer.

Customizer Widgets Screen

Configuring Your Widgets

  1. Click the Widget menu in the Theme Customizer to access to the Widget Customize Screen.
  2. Click the down arrow of Widget Area to list the already registered Widgets.
  3. Click Add a Widget button at the bottom of sidebar. It shows the list of available widgets.
  4. Click a widget you want to add. The widgets should be added in the sidebar.
  5. Preview your site and you should see the content from your new Widget.
  6. To arrange the Widgets within the Sidebar, drag and drop the widgets in the order you want or click Reorder link and click up arrow and down allow of each widget and click Done after the arrange operation.
  7. To customize the Widget features, click the down arrow in the right to expand the Widget's interface.
  8. To remove the widget, click Remove from Widget's interface in above step.

Descriptions of Each Widget

Here's a description of the various types of widget along with their configuration options:

Archives - displays archive links for each month that has posts.
  • Title — description that appears over the list of archive links.
  • Display as a drop down — if checked, this box causes the archives to be displayed in a drop-down box.
  • Show post counts — if checked, this box causes a count of the number of posts for each archive period.
Calendar - displays a calendar of the current month. Dates appear links if there are posts for that day.
  • Title — description that appears over the calendar
Categories - displays a list of post categories as links to those posts.
  • Title — description that appears over the list of categories.
  • Display as dropdown — if checked, this box causes the categories to be displayed in a dropdown box.
  • Show post counts — if checked, this box causes the count of the number of posts to display with each category.
  • Show hierarchy — if checked, shows parent/child relationships in an indented manner.
Custom Menu - displays a custom menu.
  • Title — description that appears over the menu
  • Select Menu — select the desired created menu
Meta - displays links to meta functions such as Register, Site Admin, Login/out, Entries RSS, Comments RSS, and WordPress.org.
  • Title — description that appears over the list of meta links.
Pages - displays a link to each Page.
  • Title — description that appears over the list of pages.
  • Sort by — select the order to sort the list of pages. Choose Page Title, Page Order, or Page ID from pulldown box
  • Exclude (Page IDs, separated by commas) — enter the Page ID(s) to exclude, separating each Page ID with a comma
Recent Comments - displays a list of the blog's most recent approved comments.
  • Title — description that appears over the list of recent comments.
  • Number of comments to show: (at most 15); enter the number of comments to be displayed.
Recent Posts - displays list of the blog's most recent posts.
  • Title — description that appears over the list of recent posts.
  • Number of posts to show: (at most 15) — enter the number of posts to display.
  • Display post date? — check this to display the date the post was published.
RSS - displays an RSS Feed. Multiple instances of this widget can be added to the Current Widgets list. Using RSS Widgets lists several feeds to use with this widget.
  • Enter the RSS feed URL here — enter a complete feed URL, e.g. http://wordpress.org/development/feed/
  • Give the feed a title (optional) — enter a description that appears over the list of feed items
  • How many items would you like to display? — enter the number of items from the feed you want displayed.
  • Display item content? — check this to display the content of the feed
  • Display item author if available? — check this to display the author of this particular item content
  • Display item date? — check this to display the date the item was published
Search - displays a Search box to enter text to search your blog. A submit button is also provided.
  • Title — description that appears over the Search box.
Tag Cloud - displays list of the blog's top 45 used tags in a tag cloud.
  • Title — description that appears over the tag cloud.
  • Taxonomy — select the desired registered taxonomy (e.g. Tags, Category).
Text - used to enter HTML, JavaScript, or just plain text. Multiple instances of this widget can be added to the Current Widgets list. Using Text Widgets details a number of possible uses for text widgets.
  • Title area — a description of the text widget
  • Text area — use this area to enter text, valid HTML, or even valid JavaScript.
  • Automatically add paragraphs — check this to automatically add paragraphs to wrap each block of text in an HTML paragraph tag (recommended for text).

Static Front Page

You site's home page can either contain your latest posts or display a static page or post.

  • Your latest posts - select this to show your latest posts in your home page
  • A static page - select either a Front page or Posts page. Refer Creating a Static Front Page for more detail information and available combination.

Save & Publish

Click the Save & Publish button to ensure any changes you have made to your options are saved to your database. Once you click the button, the button text changes to "Saved" telling you your settings have been saved.

See also Administration Screens and Network Admin.