Customize Your WordPress Site

One of the features of using WordPress is that it is almost infinitely configurable. That’s a good thing and a bad thing at the same time, since it can be difficult to find where to go to make a change to your site. In recent updates to the WordPress software, there has been a concerted effort to make the WordPress Customizer the default place to go to change the look and feel of a site.

It is not, however, universal. Meaning that what is on offer to customize depends on the theme you are using. Some theme designers give you lots of possibilities for customization. Others are pretty limited. In this document, we’ll be using the UNF Faculty Theme (which is based on the Superhero theme) as our example to customize.

You should be signed in to your WordPress site and viewing the Dashboard.

There are many section to this document, which makes it quite long. If you want to jump to a specific section of the Customizer, use the links below:

Go to the Appearance > Customize menu.

Customize from Appearance Menu

The Customizer allows you to see your changes immediately. The different options that are available to configure are located in the left sidebar, and there is a preview window for how the site looks, and will update when you make changes within the Customizer.

At the top of the Customizer (in the sidebar), you will see a message that “You are customizing, My Blog”. If you’ve changed the Title of your site, you will see something different.

Click on the question mark icon to get an expanded description of what the Customizer does.

There are what are known as Edit Shortcuts in the preview – indicated by an icon that look like this – 

Clicking on the Edit Shortcuts icon will take you directly to the area in the Customizer where you make the change.

For example, clicking on the Edit Shortcut icon in the header (between the logo and the Menu), sends you directly to the Menu Locations area.

The UNF Faculty theme has only one menu, called “Main“. Other themes might have multiple menus. If you click on Edit Menu, you will move to the editing area of the Main menu.

From here you can edit all of the Menu items, and even add items to the menu.

Clicking the Back button, near the top of the sidebar…

Customizer Back button

 

… will move you to the Menu editor area where you can add a new menu.

Click the Back button one more time to return you to the top of the Customizer.

Click the Save & Publish button at any time to commit your changes.

Now we can describe each Customizer section and how it affects your site.

Active Themes

As you know the UNF Faculty Template uses the UNF Faculty Theme by default. Click the Change button in the Active Theme area.

This will show you the Customizing Themes area.

Here you can preview another theme that is available in your WordPress installation. If your mouse your mouse over a them preview icon, a Live Preview button appears.

Clicking the Live Preview button in the above example will preview the Faculty Domains 2017 Theme. Clicking the Save & Publish button would change the theme for visitors of your site. Clicking the Customize button will return you to the Customizer and not change your theme.

Site Identity

The next option down the list of Customizer options is Site Identity. Here you change modify the Site Title and Tagline, choose whether to display them or not, also add a Site Icon.

You can change the Title and Tagline of your site to something like a name for the Title, and maybe your job title or department. Then click the checkbox labeled “Display Site Title and Tagline“.

Making the following changes…

… will result in your Header changing to:

The Site Icon area is a place where you can change what is also know as the Favicon. It is the icon that appears in your web browser tab when you visit a site. After the changes we made above, the tab in you browser might look like this (with a very plain looking icon):

If you choose to change the Site Icon (we recommend you do), make sure to follow the guidelines listed – Icons must be square, and at least 512 pixels wide and tall. Clicking the Select Image button will send you to the Media Library. There is an all-black UNF logo that is available to use.

Click on the logo in the Media Library and then click the Select button in the lower right corner. The Site Icon area will now reflect your changes with a represntation of what a web browser tab will look like and what a shortcut icon will look like on a mobile device. You can Save & Publish to commit your changes to the website, or you could click the Remove button, or the Change Image button. What they would do should be obvious.

Your web browser tab should now look someting like this:

Colors

The next Customizer area is Colors. Again, keep in mind that the option to change colors and what is available to change depends on the theme. For the UNF Faculty Theme you can change the Header Text Color and Background Color.

Let’s choose a couple of wild colors to show you how it changes the look of the site.

That gives us the Title text in bright yellow, and the site background color in bright green. You might want to change to more subtle colors that are easier to live with.

Header Image

The Header Image for the UNF Faculty Theme could actually be described more as a logo. The recommended size for images is 480 × 150 pixels. The current Header Image selection looks like:

If you want to change the image, click the Add new image button. Like you did in the Site Icon area, choose an image in the Media Library, again making sure you choose at least a 480 x 150 pixel image. We’ll choose the all-black University of North Florida logo. Click on the image and choose the Select and Crop button.

Now this gets a little tricky because you also need to “crop” the image. You need to drag the boundary around the entire image and then choose the Crop Image button.

Now the site Header will look like this, and frankly the black logo gets a little lost in the blue background, so you may not want to save this change.

Background Image

The Background Image area doesn’t get much use because it can make the site look a little busy, but we’ll demonstrate a change here anyway. Click the Select Image button to get started.

I’ve got an image of water on my computer so we’ll upload and choose that. In the Select Image window click on the Upload Files tab (instead of the Media Library, which are images that already exist on the site).

You can drag files from your hard drive into the window, or click the Select Files button and navigate to where the file exists on your computer. Your image will upload to the Media Library and you can click the Choose Image button. You can choose from several options.

Modify these to adjust the image to your theme. Your website looks like this with the CV page on view:

It may not be the professional look you want, but it demonstrates the feature. You always go back and Remove the background image.

Widgets

We skip the Menus area since we covered that earlier.

We have three Widgets in the UNF Faculty Theme – Search, Links (a.k.a. “Blogroll”), and Recent Posts. You can configure any Widget by clicking on the down area on the top-right of the widget box.

There’s not much to configure in the Search Widget, but you could change the Title. So this…

… will give you this in the Widget area on your site.

Each Widget will have a varying number of options. Play around and see what things do. That’s what’s great about the Customizer.

You can also add new Widgets (and if you install certain Plugins, they will give you even more Widgets). Click on the + Add a Widget button. Shown below is a small sample of the available Widgets:

If we chose Audio, for example, we would have a Widget that would place an audio player in the sidebar of your site. It might look something like this:

Visitors could click on the Play button and listen to your Welcome Message.

Again, explore the other Widgets, and also explore other Plugins that install new Widgets.

Static Front Page

A WordPress site displays Posts on your home page by default. Every time you write a new post it will appear at the top of the page. If you would like to have another page appear as the home page, the Static Front Page area in the Customizer is where you change this.

Let’s say you want your CV page as the page that visitors to your site see first. Begin by click the “A static page” radio button, and then in the Front page selector choose Curriculum Vitae.

Click the Save & Publish button and now visitors will see your CV page first. Now you might be asking, “where did my Blog go?” Well, it’s still there, but we need to give it a new home. Let’s create one. In the Posts page section click +Add New Page. Type in Blog (or something else like “Latest News”) and then click Add.

A new page will be created on your site to house your Posts. Click Save & Publish to save your changes.

Now, let’s add it to our Menu. Go to the Menu Customizer (you can find your way there right?). Choose Main.

Now choose + Add Items. Next, click the Blog page. It will be added to your Menu.

Note that the resulting Menu configuration…

Will result in a menu that looks/functions like this…

You can move the Blog item under the other pages so that it is one continuous list of pages.

Additional CSS

The last Customizing area, Additional CSS, is quite technical, and better left alone if you’re new to WordPress. It allows you to make “code level” changes to your site. Having said that, if you consider yourself a rebel (or at least an experimenter), we can show you one modification that might be of use to you.

This is the area where we made changes to the style of the original Superhero theme (the parent theme) that this UNF Faculty Theme (the child theme) is based on. So let’s look at what’s there:

Oooh, it’s scary! Well, it’s just code and it changes the look or functionality of the site. So let’s make a minor change here. Look for the lines that read:

#masthead-wrap {
 background-color: #092C73;
}

That set of characters after the # sign is the background color of the Header (referred to as masthead-wrap in the code). Now change:

#092C73

to

#000000

(or just #000 will work too).

If you like the change, click Save & Publish. If not, click the X in the upper left and choose Leave when asked “Do you want to leave this site?”

What we did was change the blue color to black. Zeros mean “no color” by the way and we need three zeros to indicate black. This system is called Hexadecimal Color or Hex Color for short – or the even less technical name, Web Color, which is beyond our scope here, but it is likely to be useful to you down the road.

Wow! That was a lot of information, but we hope it was helpful.

 

 

 

 

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *