Customizing your Theme

| | Comments closed

After your initial install and license key configuration, customizing is where you begin to brand your website and make it your own. All customization is confined to one section of the dashboard, which you can get to via Appearance -> Customize.

This page will look very different from the other pages in the dashboard. Each step has its own subsection and the area to the right allows you to preview any changes before they appear live on your website. When you are satisfied with a customization, or wish to save your current progress, click on the Save & Publish button at the top.

To begin, make sure you’re customizing the correct theme. If you need to change it, on the Active Theme section, click on the button labeled Change. You may then select the appropriate theme.

Site Identity

Logo – This will place an image on the left of your site’s header which a user can click to link back to the home page. The recommended dimensions are: 300 by 104 pixels.

Site Title – This is the title of your WordPress site. It might already have been auto-populated if you filled this in during installation.

Tagline – Your site’s tagline is generally a one-line summary of your brand.

Display Site Title and Tagline – If you do not wish to use an image in the header, then click this checkbox to display the Site Title and Tagline in the header instead.

Site Icon – This icon will be displayed in a user’s browser tab or for an app. The recommended dimensions are: 512 by 512 pixels.

Blog & Page Layout

Sidebar Layout – Select where you want the sidebar to be positioned.

Colors

Clicking the Select Color button will let you change the color for the chosen item. You can select a color from a range of hues or drag a slider to adjust the brightness. Common colors are clickable at the bottom. If you know the hex number of the color you want, you may additional type or paste it into the input field. If you decided to revert back to the original color, click on the Default button.

Background Color – This color will appear as the background color throughout the site.

Link Color – The color for all links and buttons.

Link Hover Color – The color when a user hovers over a link.

Alternate Link Color – Alternate links can be configured here.

Alternate Link Hover Color – Alternate links can be configured here.

Dark Background Color – Color for dark backgrounds.

Light Background Color – Color for light backgrounds.

Header Image

Click Add New Image to select a new header image. Depending on your theme, this might appear on the homepage only or throughout your site. The recommended dimensions are: 1440 by 405 pixels.

Clicking the Randomize uploaded headers button will select a random image each time a user loads a page where the header image is displayed.

Background Image

This setting allows you to control whether the background of your website is an image instead of a single color.

Background Image – Click Select Image to choose or upload a new image. Clicking Remove will remove the image and revert back to a single-color background.

Preset – Choosing a preset from the drop-down allows you to select how the image is stretched over the background.

Image Position – Allows you to choose which cardinal direction the image begins, with the circle in the middle being centered.

Additional Background Image Options

Depending on the preset you selected, other options appear:

Image Size – Controls if the image is stretched or filled proportionally.

Repeat Background Image – If you want the image to repeat (tile), instead of a single image.

Scroll with Page – Controls if you want the image to scroll with the user.

Menus

This control allows you to create menus and choose where your menus appear on your site. If you are unfamiliar with WordPress menus, please see the official documentation.

Menu Locations – This submenu will allow you to set which menu appears in which pre-determined position. For many of our themes, these are: Main (header menu), Social Icons, and Footer (one through four). Select from the drop down menu, which menu will appear where.

If you have not created a menu, click on the Add a Menu button at the bottom. It will ask you for a name, type the name you desire then click on the Create Menu button to add it.

Clicking on any of the menu items will allow you add links to posts, pages, outside links, or other sources. The official documentation has a complete breakdown of all the possible options.

Widgets

Widgets are similar to menus, but many plugins add additional features such as calendars or donations links, and appear on the sidebar.

To add a widget, click on the Add a Widget button at the bottom. This will slide open a new menu that will allow you to add a new widget. Clicking on a new widget will add it to the bottom of your current list of widgets.

Each widget can be configured by clicking on the small down-arrow next to the name. Each widget has different options, but a common one is changing the title that appears on the sidebar. To remove a widget, click on the down-arrow then the remove link.

To reorder a widget, click on the reorder link at the bottom, you may then move a widget item up or down by clicking on the arrows.

You can learn more information on widgets by viewing the official documentation.

Static Front Page

This control will determine how your site will display the front page. You can either select to display your latest posts or choose a page to display. Some themes will be pre-configured to display a certain template page and this will not be necessary to change.

Additional CSS

This control will allow you to add your own CSS rules to your website. Any rules you create can be seen in the preview window. This control is generally for advanced users and requires a good grasp on the CSS language.

You generally will not need to use this option unless you have a specific styling you want to apply.