UW Oshkosh WordPress Training Manual. June 2015 Integrated Marketing Communications *Updated January 2016

Size: px

Start display at page:

Download "UW Oshkosh WordPress Training Manual. June 2015 Integrated Marketing Communications *Updated January 2016"

Laurence Ramsey
6 years ago
Views:

1 UW Oshkosh WordPress Training Manual June 2015 Integrated Marketing Communications *Updated January 2016

2 Table of Contents What is WordPress...3 WordPress Resources...3 Website Best Practices...4 How to Log In...6 Navigating the Website as an Editor...6 Adding New Pages...9 Setting Menus/Navigation Structure...13 Widgets...17 Posts...19 Media...23 Forms...29 TablePress...33 Plugins...35 Video Tutorials...36 Yoast SEO...36 Modules...37

The UW Oshkosh Divi theme allows users to drag and drop elements on to a page, easily add photos, content, social media feeds, videos and more.

3 What is WordPress WordPress is a free and open-source content management system (CMS) and blogging tool. Features include the ability to add plugins or new features to the site and a template system making it easy to create and update pages. The UW Oshkosh Divi theme allows users to drag and drop elements on to a page, easily add photos, content, social media feeds, videos and more. WordPress Resources Built into WordPress are video tutorials on how to use WordPress. After logging in, click on video tutorials in the left side bar menu. Then, click on the link to the video tutorial you d like to watch. Additional WordPress resources can be found on the following websites: wordpress.org/support/forum/how-to-and-troubleshooting codex.wordpress.org/wordpress_lessons learn.wordpress.com/ 3

4 Website Best Practices Calls-to-action (CTA) Make a call-to-action, or the action/set of actions you want users to take, clear on your site. The call-to-action text should have an action verb, such as Request Information Visit Today or Talk to an Adviser. Best practices for displaying contact information Put your contact information in the same spot on each page, such as the right or left widget or at the bottom of each page. Keep the information concise a phone number and an address and link to a page of the complete contact information. Keep content concise Set goals for your website, the pages within it and what you want people to do or find on your site. Once you have that set, write out the content needed to accomplish those goals and consider adding content only if there will be value added to your audience. 4

5 Use headings/subheadings and lists to break-up content In Web writing, think about your content in chunks. What chunks of information should stay together. Once you have determined which content should be grouped together, write a header or subheading for each section. This creates a visual break for your audience, helping them to digest the information. Breaking lists into bullet points helps the flow of your content. Formatting text Format your text by using headings, subheadings, boldface and normal paragraph styles to show your users what information is most important. Following the inverted pyramid, headings should be used at the top of the page, then subheadings. Write in the inverted pyramid style The inverted pyramid style puts the most important information at the top, the who, what, where, when, why and how, in the first paragraph. Keep your sentences short and your paragraphs to one to three sentences, making the content easier to digest, and less overwhelming. 5

Navigating the Website as an Editor After logging in, there will be a black menu/navigation bar across the top, as well as a second menu/ navigation bar on the left side of the

6 How to Log In To log-in to your WordPress website, type in your website s URL and add /wp-admin to the end of the URL. Example: financialaid.uwosh.edu/wp-admin Then, enter your username and password and click on the Log In button. Navigating the Website as an Editor After logging in, there will be a black menu/navigation bar across the top, as well as a second menu/ navigation bar on the left side of the screen. From here, you can access your website one of two ways. 1. Hover over your site s name in the top bar, then click on visit site: Then, you will see your website as a non-editor, BUT with an navigation bar at the top of the screen. From here you can access any page and click the edit option at the top of the page:

2. Hover over Pages in the left menu/navigation and click on all pages. Then, you will see a list of the pages on your website. Hover over the page you would like to edit and click on the edit button.

7 2. Hover over Pages in the left menu/navigation and click on all pages. Then, you will see a list of the pages on your website. Hover over the page you would like to edit and click on the edit button. After clicking edit, you will see a page with gray bars indicating what the content is: To edit the page content, use the descriptions/text on the gray bars to determine where your content is that you would like to edit. Then, click on the three lines on the left side of the gray bar you d like to edit. 7

8 Then you will see a pop-up screen with an area for adding and editing text, as well as a toolbar for formatting the text. TOGGLE BOX Note: When using the text box make sure that the toggle box is clicked to view all editing options. After you add or edit your content, click save on the pop-up screen, as well as clicking on update on the right side bar of the page you are editing. 8

9 Adding New Pages To add a new page, hover over the + New text in the top navigation bar. Then click on Page. Then you will see a page like this: You can either add content like this, or click on the Use Page Builder button to adjust the layout. 9

10 Then, you can either load a standard layout by clicking on the + Load Layout button, or create your own layout. To create your own layout, click on insert columns in the section automatically created on your page when you click on Use Page Builder. Then, select the column ratio you would like to use. Then, click on insert modules. 10

11 Then, select the type of content you would like to add. Note: Each module type will be explained in detail later. 11

12 Then, follow the step-by-step instructions for each module and click save. After you are done editing your page, click the save draft button on the right side of the page. You can click preview to see how your new page will display. If you are ready for your website visitors to see the new page you have created, click on the blue Publish button. 12

In the menus section, you can either select an existing menu to edit, or create a new one.

13 Setting Menus/Navigation Structure In the top navigation bar, hover over your website name, then click on dashboard. In the left navigation bar, hover over Appearance, then click on menus. In the menus section, you can either select an existing menu to edit, or create a new one. If you click on create a new menu, you will be prompted to name the menu. Then click the blue Create Menu button. 13

14 If you click on create a new menu, you will be prompted to name the menu. Then click the blue Create Menu button. On the left side of the screen, you can access your site s page. Click the check box next to the pages you would like to add to this menu and click on the Add to Menu button. Once you have added the pages to your menu, you can click on and drag the pages to re-order them. By indenting a page, it will become a sub-navigation/drop down menu of the item above it. 14

To add a menu to the top of a page, access the page you would like to add a menu to and click add full-width menu. Then, click on the drop-down box and select the menu you would like to use.

15 To add a menu to the top of a page, access the page you would like to add a menu to and click add full-width menu. Then, click on the drop-down box and select the menu you would like to use. To add a menu to the side of a page, go to your dashboard and click on appearance in the left side bar, then click on widgets. Then, enter a new, custom widget name and click on the blue create menu. Then refresh the page and your new widget will appear in the list of active widgets. Expand the widget by clicking on the arrow on the right side of the new widget. 15

16 Then drag the Custom Menu box into the widget you created and select the menu you would like to use and click the save button. Then, access the page you would like to add a side menu to and click edit and add a sidebar module and click on the drop-down menu and select the widget you created. 16

17 Widgets Widgets are created for items that are placed on many different pages throughout your site (i.e. Contact Us, Call-to-Actions, RSS Feeds). Creating a widget allows you to only have to update the information in one place versus going into every individual page when changes are needed. To add a widget in your dashboard, click on appearance in the left side bar, then click on widgets. Then go to the bottom right-hand corner and enter a new, custom widget name and click on the blue Create button to create a new widget. Then refresh the page and your new widget will appear in the list of active widgets. Expand the widget by clicking on the arrow on the right side of the new widget. 17

Custom Menu: This is created to insert sidebar navigation menus into pages (see the Setting Menus/Navigation Structure section).

18 Then go to the right-hand side of the page and drag one of the Available Widgets into your newly opened widget. You will mostly use the Text, Custom Menu or RSS widgets throughout your website. Text: Allows you to write whatever you like (including basic HTML code) to be displayed on pages. Custom Menu: This is created to insert sidebar navigation menus into pages (see the Setting Menus/Navigation Structure section). RSS: Allows you to import a newsfeed from outside sites that make sense to have displayed within your website (i.e. UW Oshkosh Today). Then, access the page you would like to add your widget to and click edit and add a sidebar module and click on the drop-down menu and select the widget you created. 18

Posts Posts differ from pages in that they are the blog feature in this theme. Posts allow users to actively write new content and have it be updated on pages that include the blog module.

19 Posts Posts differ from pages in that they are the blog feature in this theme. Posts allow users to actively write new content and have it be updated on pages that include the blog module. It is great to use for newsletters, upcoming events, news, etc. on your site. To add a new post, hover over Posts in the left-hand column and click on Add New. You are then brought to the Add a New Post page and prompted to add a title to the post. 19

20 After you have completed writing your blog post, click on Preview on the right-hand side of the page. If you plan to create a number of different posts for different locations throughout your website, make sure you categorize each post. On the right-hand side of the page, go to the Categories section and either click on a category that is already created or add a new category. 20

When writing out your blog post, make sure to add a short description of the post in the Excerpt section of the page which is located near the bottom of the post page.

21 When writing out your blog post, make sure to add a short description of the post in the Excerpt section of the page which is located near the bottom of the post page. Go to the page that you wish to include your blog post by clicking on Pages on the left-hand size of the page. Choose the page you want to add your blog post to and click on Edit. 21

22 From the backend of the page, click on Insert Module and choose the Blog module. You can decide which category of posts should be displayed, how many and whether or not the full content or excerpt would be shown. To determine which posts you want displayed on a specfic page, click the appropriate category. The content section allows you to either show all of the content within each post or to just show the short description you wrote (the excerpt). 22

Media Media is where you will upload images, vidoes, PDFs, documents, etc. All of these files are saved in the same place and easily accessible throughout your website.

23 Media Media is where you will upload images, vidoes, PDFs, documents, etc. All of these files are saved in the same place and easily accessible throughout your website. The search feature allows you to easily find the media you have already uploaded. To add media, hover over Media in the left-hand column and click on Add New. OR You can add media by going to the top bar (which is easily accessible on every page) by hovering over the New button and selecting Media. 23

24 You are then brought to the Upload New Media page and are able to either drag and drop in files or to manually select files from your desktop. After you select the file you wish to upload to the Media Library you will be able to edit the file by clicking edit to the right of the thumbnail you uploaded.

Click on Edit and you will be brought to the file you uploaded. If you have uploaded an image it is extremely important to add a description of the photo to the Alternative Text section.

25 Click on Edit and you will be brought to the file you uploaded. If you have uploaded an image it is extremely important to add a description of the photo to the Alternative Text section. This allows persons with disabilities to be able to understand the photo if they are unable to actually see it. You may also add a caption and a description of the photo/file. To make sure the changes you made to the photo are saved you must click Update in the box on the left-hand side of the file/image. 25

26 To add media to a specific page, click on Pages on the right-hand column. Then click on the page you want and click on Edit. Once you are inside the page you can either click on Insert Modules and click on the Image module and upload the image. See the Modules section. OR If you wish to upload the image within a Text module, you can click on the Add Media button and import the file/image. After you click on the media you want to insert into the page, you can edit the size of the image or the name of the file.

27 To edit the media, click on the media (image or link) and click on the the graphic of the the pencil. For images you are able to align it within the page, select the size of the image and decide whether or not you want to link the image to a page within the site or a custom URL. 27

28 To edit the media, click on the media (link) and click on the the graphic of the the pencil. Note: PDF files, Word documents, etc. will be uploaded into the page as a link. If you are uploading a PDF it is important to have the link open in a new tab so the user can easily navigate back to your website. Link Text allows you to type the text that you want to be viewed on your website. 28

Forms Forms allow you to easily add forms to your website and manage the settings to receive and send out notifications to specific users and email addresses.

29 Forms Forms allow you to easily add forms to your website and manage the settings to receive and send out notifications to specific users and addresses. To add a new form, hover over Forms in the left-hand column and click on New Form. You are then brought to the Forms page and are prompted for the name of the form and a short description. After you fill in the name (description is optional) click Create Form. Make sure you choose a name that is easily searchable. The name and description will likely not be shown when you place the form within your website. 29

30 Once you click on Create Form you can begin putting together your form by easily dragging the type of field you want to form area. The Forms plugin also gives you easy-to-follow instruction on creating a form. The Advanced Fields section allows you to import fields that are already typed and readyto-use (i.e. Name, Phone Number, Address). 30

Note: Every time you create a new form you should also create a new page that is designated to the form.

31 To edit, hover over the field you want and click on the arrow pointing down to open the editing box. Once the editing box is opened, you can change the Field Label, add a short description and determine if it should be required or not. Note: Every time you create a new form you should also create a new page that is designated to the form. To edit the form and create notifcation s, click on Form Settings on the top of the form. Under Form Settings you can change your form name and description, create notifciations and confirmations. 31

32 To add your new form to your website insert the Text module on your form page (see the Pages section on how to add a new page). In the Text module click on Add Form and choose the form you just created from the dropdown. Click on the form you want to add and decide whether or not you want to include the title and description. It is most common to not include the title and description and to use the text editor to create the title of the form. Click on Insert Form and a shortcode will be placed into the text box. Once you preview the page, you will be able to see the form you created on your page. Note: The shortcode shows that the title and description = false which means that neither will be visible on the front-end of the site. 32

TablePress TablePress allows you to easily create tables and edit tables within your site. To add a new table, hover over TablePress in the left-hand column and click on Add New Table.

33 TablePress TablePress allows you to easily create tables and edit tables within your site. To add a new table, hover over TablePress in the left-hand column and click on Add New Table. You are then brought to the TablePress page and are asked for the table name, an optional description, the number or rows and the number of columns. After you fill out the information for your table click on Add Table and start inputting your data. 33

To preview your table, click on Preview Table that is located above the Table Information box. Once you are happy with the table, click on Save Changes.

34 To preview your table, click on Preview Table that is located above the Table Information box. Once you are happy with the table, click on Save Changes. Then go to the page you want to the table to display on. Click on the Text module and in the text toolbar click on the table icon. In the list of avaiable tables, click Insert Shortcode next to the table you want to insert in your page. The shortcode for the table will then be inserted. To view how your table will look on the page, click on Preview. 34

Plugins Plugins are types of software that contain a group of functions that can be added to your website. They can add new features or extend functionality to your site.

If there is a number next to Plugins that means that a plugin that is being used on your site needs to be updated.

It is important to update plugins when needed to keep your site running smoothly at all times.

35 Plugins Plugins are types of software that contain a group of functions that can be added to your website. They can add new features or extend functionality to your site. Examples of plugins on your site: Yoast SEO, TablePress, Forms To view the plugins on your site, click on Plugins on the left-hand column. If there is a number next to Plugins that means that a plugin that is being used on your site needs to be updated. To update a plugin, go into the Plugins page and find the plugin that needs to be updated and click update. It is important to update plugins when needed to keep your site running smoothly at all times. If you find a new plugin that you want to use on your website for a type of functionality that is not already offered: Make sure that the plugin says it is compatible with your theme. This is very important. If the plugin you want is not compatible, contact IMC and we will test the plugin on a site that is not already live. If you integrate a plugin in your site that is not compatible, your site might crash. COMPATIBLE NOT COMPATIBLE 35

Video Tutorials Video tutorials are available on your website to help you better understand the functionality and to answer any questions you may have. The available tutorials are: Posts vs.

36 Video Tutorials Video tutorials are available on your website to help you better understand the functionality and to answer any questions you may have. The available tutorials are: Posts vs. Pages Editor Creating a New Post Post Formats Edit an Exisitng Post Using Categories and Tags Creating and Editing Pages Add Photos and Images How to Embed Video Using the Media Library Managing Comments Creating Links Adding Widgets Custom Menus Installing Plugins Adding New Users To view the available video tutorials, click on Video Tutorials on the lefthand column. Yoast SEO Yoast SEO is a plugin used for Search Engine Optimization (SEO). Each page has it s own SEO which allows users to easily find the page based on a specified keyword. It allows you to add a keyword, write a title and meta description. This is what will be viewed when searched on Google. 36

Modules Modules are used to help create and develop unique pages within the theme. Each module is used for separete purposes that will be explained briefly on the following pages.

37 Modules Modules are used to help create and develop unique pages within the theme. Each module is used for separete purposes that will be explained briefly on the following pages. Image The image module allows you to upload images from your Media Library within the site or from your desktop. It is important to upload photos that are the appropriate size for websites so pages do not take too long to load when viewing. Note: If you are having your image link to an outside page, make sure you change the URL Opens section to In The New Tab. 37

38 Gallery The gallery module is like the image module in that you can upload images from your desktop or from your Media Library. You are able to select what images you want to be part of the gallery and decide whether or not you want them in a grid or slider view. It is also easy to go in and change the images within the gallery. By clicking Update Gallery within the module. Video The video module allows you to either upload your videos to your site or to simply copy a URL (i.e. YouTube video) and incorporate it within your site. Video Slider/Image Slider The video slider and image slider both allow you to add more than one video or one image that rotates when viewing on the site. Text The text module offers a simple and easy text box where you can write content for your site. Adding images and videos is also available within this module by clicking on the the Add Media button. To acquire all the functions of the text module, make sure you have the toggle button clicked. 38

39 Blurb The blurb module is a combination of text and images and are used to call-out important information. Tabs The tabs module allows you to create sections that are pertinent to your website. You are able to click on each section and view the text within. This also makes it easier for users to digest your page if it is text heavy. 39

Testimonial The testimonial module is used to display quotes on your site. The module allows you to fill in the quote, the name of the author and a link to their website (if applicable).

40 Testimonial The testimonial module is used to display quotes on your site. The module allows you to fill in the quote, the name of the author and a link to their website (if applicable). Pricing Table The pricing table module allows you to display prices in a clean and clear way if needed on your site. The module also lets you link to a different page/website and gives you access to write a short description about the price. 40

See the Widgets section for more details. Audio The audio module allows you to upload any audio file that you want onto your website.

41 Call To Action The call-to-action (CTA) module allows you to call out specific content that is already placed on your page/site. If you want a CTA on more than one page on your website, we recommend you use a widget so you only have to update it in one place versus going into each individual page. See the Widgets section for more details. Audio The audio module allows you to upload any audio file that you want onto your website. Login The login module allows you to place a section on a page where users can login to make changes/edits throughout the site. Bar Counters The bar counters module allows you to create a bar graph on your site to clearly show your audience important data. 41

42 Circle Counter The circle counter module lets you display percentages/ numbers in a unique eye-catching way. Number Counter The number counter module also lets you display percentages/ numbers in a unique eye-catching way. Accordion The accordion module helps to display chunky text in a easy way to make your page more appealing. This module is a lot like the tabs module but the information is displayed vertically. When a new item within the accordion list is opened, the previous items closes. 42

43 Toggle The toggle module is very similar to the accordion modules in that it helps to display chunky text in a easy way to make your page more appealing. This module is also displays items vertically but the user has the ability to open or close each section as they see fit without another section opening. 43

See the Forms section for more details. Sidebar The sidebar module mainly deals with widgets that you create.

44 Contact Form The contact form module is a simplified form that allows visitors of your website to send a short message to the administrator of the site. Although useful, we recommend using a Gravity Form which gives you more general settings options. See the Forms section for more details. Sidebar The sidebar module mainly deals with widgets that you create. This module allows you to import these widgets throughout your pages, while editing them occurs in the widget section of the site. See the Widgets section for more details. 44

45 Divider The divider module allows you to add space in between other modules to make the page lay how you want it to. The height of the module can also be adjusted (i.e. how much space you want the module to give). You can also choose if you want to show or hide the divider and what color you would like it to be. 45

46 Person The person module allows you to set easily and clearly layout a profile of a person. The module asks you for the person s name, position and image while giving a text box to enter more information. Blog The blog module is like the sidebar module in that you can incorporate your Posts section to be displayed on a page within your website. You can decide which category of posts should be displayed, how many and whether or not the full content or excerpt would be shown. 46

47 Countdown Timer The countdown timer allows you to set up a countdown to an event or special day on your website. Map The map module lets you place an interactive map on your website which can help users find a place that you are promoting. Social Media Follow The social media follow module allows the user to add buttons that link to their social media sites. 47

WORDPRESS TRAINING MANUAL LAST UPDATED ON FEBRUARY 26TH, 2016

WORDPRESS TRAINING MANUAL LAST UPDATED ON FEBRUARY 26TH, 2016 LOG INTO WORDPRESS Visit the Login page http://intermountaineyecare.net/wp-admin/ Enter your Username and Password NOTE: Additional usernames