1.Introduction

As part of your installation of your Faculty Domain, we have an option for a customized WordPress installation that includes some UNF themes and some recommended plugins. In this document, we show you how to utilize the UNF Faculty Template for WordPress.

Yes No Suggest edit

2.Signing In

Go to https://domains.unf.edu and click on the Get Started button, or click on the Dashboard link in the upper right corner.

If you are logged in to myWings or another UNF web service, you will be brought directly to your cPanel. Otherwise, you will be directed to login where you will use your UNF username and password.

You will then be directed to the cPanel page.

If you see a screen that asks you to choose a domain, you haven’t signed up yet, so you need to Get Started with a UNF Faculty Domain.

Yes No Suggest edit

3.Using the UNF Faculty Template

With UNF Faculty Domains we have built a custom template, called UNF Faculty Template, that is selected by default. It consists of a UNF-styled theme and some recommended plugins. We highly recommend you choose the UNF Faculty Template because it will give you a great head start toward building your website and you will still be able to customize the theme and add plugins later.

When you install WordPress on UNF Faculty Domains, the option for installing the UNF Faculty Template is already selected for you. As you follow the WordPress installation process, you get to a section that has the following screen:

Notice that UNF Faculty Template is selected in the screenshot image above. There is no need to change this if you want to use the template. Refer to the Installing WordPress documentation for the full context of where the template selection step occurs.

Now that your WordPress site is installed, you can now start configuring your site. You need to be in the administrative area, also known as the WordPress Dashboard to make changes to your site and to add content. Again refer to the Installing WordPress documentation to get to the admin area of your site. The admin screen, again known as the dashboard, looks like this:

To see the themes that are installed, mouse over the word Appearance in the dashboard menu and then click on Themes.

You then see several themes on view including the two UNF themes. The UNF Faculty theme will be listed as Active.

If you hover the mouse over the Faculty Domains 2017 theme icon (the one right next to the UNF Faculty theme), you will see an Activate button. You can click that button to make Faculty Domains 2017 the Active theme.

Both of these themes have been customized with some settings and also the UNF logos. Whichever theme you choose, you can click on the Customize button of the active theme to modify them further. You can also choose the Appearance > Customize menu option in the dashboard.

A quick note about the other themes. The UNF Faculty theme is based on another theme that’s available in the template called Superhero. You can switch to this theme, but it won’t have the UNF style. The Faculty Domains 2017 is based on the Twenty Seventeen theme. Again, it’s the plain version of the theme without the UNF colors and logos. Those UNF themes are known as “child themes” and they are dependent on the “parent” themes (Superhero and Twenty Seventeen). In general, you can delete themes you’re not using, but DO NOT delete the parent themes of the UNF themes. They are required for the child themes.

There are two other themes listed – Twenty Sixteen and Twenty Fifteen. They are more plain but certainly can be configured in many ways. By the way, the “Twenty” themes are created by WordPress every year when they release a new version of the WordPress software. They don’t exactly coincide, but it’s close.

If you want to delete a theme (again DON’T delete the parent themes), the theme needs to not be the active theme. Hover over the theme thumbnail preview and click Theme Details. In the lower right corner you should see a Delete button. Click it and you will then be asked “Are you sure you want to delete this theme?” Click the OK button and the theme will be deleted (uninstalled).

Yes No Suggest edit

4.WordPress Themes

When it comes to WordPress, customizing the look of your site is relatively simple and straightforward. We have built a UNF Faculty Template which includes two UNF-styled themes. If the themes included in the template (UNF Faculty & Faculty Domains 2017) don’t meet your needs, you can activate another theme (such as Twenty Sixteen or Twenty Fifteen) on your site or install a completely new one.

Activating Themes

  • Start at your site’s Dashboard.
  • Navigate to Appearance > Themes.
  • You will see thumbnail images representing each of the themes that you currently have available on your site. Simply mouse over any one of them, and click the Activate link.

That’s all you need to do to change the look of your site with a new theme.

Installing Themes

If none of the themes that were provided when you installed WordPress are what you’re looking for, you can always search for and install other themes from the WordPress Theme Repository.

  • Navigate to Appearance > Themes.
  • Click on the Add New Button.
  • On the Add Themes page you will search for the type of them you want. There are a few menu items to help you see the  various themes that are available. The choices are Featured, Popular, Latest, which are pretty self explanatory. If you have a WordPress.com account and have browsed themes there, and themes that you have marked as favorites will be available to select on your personal WordPress site. You can also check the “Feature Filter” to narrow down your choices. You can choose from different Layouts, Features, or Subjects.
  • Under the thumbnail picture of each theme (when you hover your mouse over the theme) are three choices –Details & PreviewInstall and Preview. Clicking Install will add a new theme to your site.
  • After you install the theme, it is still not active on your site. You will need to click the Activate button to use it.
  • Once activated, your site will be using the new theme. Visit your site’s homepage to view your new theme.
Yes No Suggest edit

4.1.UNF Faculty Theme

This theme is a child of the Superhero theme. Use it to give your blog a clean look with bright pops of color. It uses a UNF-styled header including a UNF osprey logo. It includes page templates where you can add a CV, as well as a course, research, and service page.

Yes No Suggest edit

4.2.Faculty Domains 2017 Theme

The Faculty Domains 2017 theme is a child of the WordPress Twenty Seventeen theme. It features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. It has an asymmetrical grid with a custom color scheme.  It is a good choice to showcase your multimedia content with post formats. It works great in many languages, for any abilities, and on any device.

One of the first things you might want to do is change the background image of your site. The default image is a blue gradient background.

First, make sure that the Faculty Domains 2017 theme is the Active theme. In your WordPress Dashboard go to Appearance > Themes. It should be the upper-left most theme and it should be labeled “Active: Faculty Domains 2017“. If it isn’t find the theme and click on the Activate button. Once it’s activated, click on the Customize button.

Choose the Header Media menu item. You can follow the instructions here, but under the Header Image area, the Current header shows the blue gradient image. Click the button just below it labeled Add new image. You’ll be brought to the Choose Image screen with the Media Library displayed. To choose and image from your computer, select the Upload Files tab. Click the Select Files button in the middle of the screen. Note the suggested size for the image is 2000 × 1200 pixels. Select the file from your computer and choose Open. When the image finishes uploading, click the Select and Crop button in the lower right corner. Some or all of the image will be selected, indicated by a dotted rectangle. Adjust the cropping as you like, or just choose the Crop Image button if you like the selection. You should now see your image in full glory as the Current Header. Finally click the Save & Publish button in the upper left.

The new site might look like this now:

 

Yes No Suggest edit

5.WordPress Plugins

WordPress has a lot of functionality built-in, but occasionally you might find a specific need that isn’t a part of the default software. To accomplish this, WordPress has a plugin architecture where developers can create plugins that add additional functionality to your site. From simple photo galleries to site statistics, to automatic Twitter and Facebook sharing of posts, there is practically a plugin for whatever you need for your site. To start using and installing plugins just follow these simple instructions:

  • While viewing your WordPress dashboard, click on the Plugins menu item.
  • You will be given a list of all your currently installed plugins.

  • From this menu you are able to activate and disable specified plugins by using either the single plugin options located under each plugin name. Or you may use the bulk action drop down menu to simultaneously activate/disable multiple plugins by checking desired plugins

  • Additionally you may also view the Active or Inactive plugins using the sorting options above the bulk action menu.

  • To install a new plugin click the Add New button at the top of the Plugins page or from the sidebar plugin menu. You will then be redirected to the WordPress Plugin Repository where you can search for additional plugins. – For example searching “photo gallery” brings up various plugins from different developers.
  • Once you find your desired plugin, click the Install Now button, which will automatically install the plugin and prompt you if you would like to activate it now or return to the menu.

After installing your plugin, be sure to visit the developers’ website if you have any additional questions about how the plugin works, as some plugins may require certain codes or other actions to be used properly.

Some plugins will have their own settings page located under the Settings menu, other plugins will break out their own menu item on the Dashboard. The best way to understand how to use a plugin is to make sure you’ve read the documentation available on the plugin’s website as every plugin behaves differently and sometimes it won’t be explicit how the plugin interacts with your website.

 

Yes No Suggest edit

5.1.UNF Faculty Template Plugins

For the UNF Faculty Template WordPress installation we have selected a few plugins that will come in handy right away. Below is what the Plugin page should look like after you have installed the Template:

Descriptions of the installed plugins:

  • Akismet – This is the standard anti-spam plugin and will help you keep your site tidy and relatively spam-free. This plugin will automatically recognize unwanted comments on your blog as spam and filter them out. Unfortunately, blogs are kind of like email accounts. People (spam-bots) try to add comments to your website so they can get more links to their site. Spam blockers like Akismet help to automate the management of blog spam. It will even learn from the spam you get and refine itself so you’ll more easily remove unwanted spam and let legitimate comments through – with your approval of course. You can read more about blog spam in the article How to Identify and Control Blog Comment Spam. Akismet is free to use for non-commercial purposes. You’ll need what’s known as a API Key (kind of like a license code) for to use Akismet.
  • Cookies for Comments – This is a plugin that essentially checks to see whether a commenter on your website is a spam-bot or not. A spam-bot (spam robot) will look for an easy way to submit a comment. Cookies for Comments will help detect a spam-bot and immediately move the comment to the spam area. In concert with Akismet this plugin helps eliminate dealing with spam comments. For more information, read the article How to Reduce WordPress Comment Spam with Cookies for Comments.
  • Limit Login Attempts – So not only are their spam-bots out there, but also bots that try to gain access to your site. They’ll try to guess your username and password multiple times to see if they get in. That is why you first need to use a strong username and password. Limit Login Attempts will then limit the number of tries you have to get the username and password right. So you might think, well if people are trying all sorts of usernames and passwords on my site this we’ll prevent me from logging in right? No, because it checks what computer on the Internet is trying to access the login. It checks to see what IP address (the unique computer Internet number – every one is unique) the login is coming from and allows a total of 4 tries before it locks out the ability to login. This plugin, along with strong usernames and passwords, Really Simple SSL (below), and the Wordfence Security plugin (also below) will keep you site very secure.
  • Really Simple SSL – Hackers either try to guess at logins or they try to capture information as it travels over the Internet or WiFi connections. Really Simple SSL will add strong encryption to your site to make it secure. In other words hackers won’t be able to look at streams of data trying to find usernames and passwords (or credit card & social security numbers) embedded in that data. It sets up a private connection between your visitor and your website, that way the visitor can be confident that any information they submit won’t be intercepted. This is obviously most important for sites that are selling things and taking credit card and other information. It will also help your Google search engine ranking. Visitors must use a web browser that supports SSL and HTTPS, but all the modern browsers do. You can read more about How to Use SSL and HTTPS with WordPress.
  • Subscribe To Comments – Subscribe to Comments is a plugin that enables commenters to sign up for e-mail notification of subsequent entries. This allows you to be notified if there is further conversations about a blog post.
  • Wordfence Security – This is a multipurpose security plugin. This free version provides basic protections from hackers and detects various security issues on your site. It notifies you which IP addresses are trying to gain access to you site, and allows you to block those addresses. The Introduction to WordPress Security article, and the WordPress Security Learning Center are great resources for keeping your WordPress site secure.
  • WordPress Importer – This plugin will allow you to import WordPress content (posts, pages, comments, etc.) from one WordPress site to another. For example, let’s say you’ve had a WordPress.com site for a while, but now you want to take advantage of the additional capabilities that a hosted WordPress site offers. You would export your content from your WordPress.com site, and then install the full WordPress software using your web hosting company, and then import your content into the new site.

One more plugin that we highly recommend is the JetPack plugin. It is a Swiss Army knife plugin that provides lots of capabilities for managing your site. We don’t install it by default because it does have a lot of moving parts, and so it’s best installed after you have used the WordPress system for a little while. We’ll have a separate document to describe some of its capabilities soon.

Finally, it is a good idea to have a WordPress.com account if you don’t have one already. You’ll need it to activate the Akismet plugin, and will be necessary to use the JetPack plugin as well.

Yes No Suggest edit

6.Next Steps

6.1.Editing a Page (CV example)

While WordPress pages are mostly static documents, you occasionally will want to edit them. We’ll take the CV (Curriculum Vitae) page in the UNF Faculty Template as an example.

From the Menu of the UNF Faculty Theme, you’ll see one of the pages is called Curriculum Vitae. To edit the page, you should be signed in to your WordPress site and viewing the Dashboard.

Go to the Pages > All Pages menu.

All of the Pages will now be on view.

Click on the page link for Curriculum Vitae (or click the Edit link below the name)

The page starts out looking like the following:

Edit the page just as you would in a word processor (Microsoft Word). Note the changes made:

You can finish the phone number and email address, then scroll down to continue editing the document until you reach the end.

As another example we’ll edit the first line of the Education section by making a hyperlink out of the words University of Minnesota. First, drag over the text to select the words:

Click the Insert/edit link button.

Add the address that you want the link to go to.

Press Enter on your keyboard or click the blue Enter button – .

You’ll now see the link added. You can click the Edit button (pencil icon – ), or the Remove Link button – 

You can now click the Update button to commit your changes.

You can now view your page on the website by clicking on the View page link at the top of the editor window.

Changes will look something like this:

If you need to do further editing, while viewing your page in the browser, click the Edit Page button in the top toolbar.

Now you can edit this page and others whenever you need to.

 

Yes No Suggest edit

6.3.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.

 

 

 

 

 

Yes No Suggest edit
Help Guide Powered by Documentor
Suggest Edit