UCF College of Sciences, WordPress Tutorial Table of Contents: 1.

Logging In

2.

The WordPress Dashboard

3.

The WordPress Admin Bar

4.

Editing Content

5.

WordPress Edit Page / Edit Post Screen a. Page Title / URL b. WordPress Editor i. Fonts and Headings ii. Soft Return vs Hard Return (Single vs Double Space) iii. Pasting in Content from Other Sources / Remove Text Formatting iv. Creating Internal, File, and External Links c. Using the Add Media button i. Inserting Images ii. Inserting Photo Galleries iii. Inserting links to files d. Publish Settings e. Page Attributes

6. Media Library a. Adding/Uploading Content b. Obtaining a File URL c. Editing Photos 7. Website Menu 8. Themes 9. Widgets 10. Plugins

1. Logging into Your Website Visit your website URL and adding /wp-admin to the end E.g. http://sciences.ucf.edu/wp-admin Use your UCF NID credentials as the username and password.

2. WordPress Dashboard After logging in, you will be taken to the WordPress Dashboard. This area will let you add/edit all content on your website.

3. WordPress Admin Bar Once you login, there will be a small black Admin Bar that will appear at the top of the WordPress Dashboard/backend and frontend.

The Admin Bar has shortcuts to commonly used functions on your website and will let you toggle back and forth between the frontend of your website and the WordPress Dashboard/backend. If you have access to more than one website with the College of Sciences, you will be able to see those websites when you hover over

in the Admin Bar.

To toggle back and forth between the front and backend/dashboard of your website, click the / Icon in the admin bar. If you are on the dashboard/backend, it will be a house icon. If you are on the frontend, it will be a gauge icon. When you hover over this on the frontend it will also show a dropdown menu that gives you shortcuts to your website Themes, Widgets and Website Menu.

4. Editing Content Editing a page on your website is simple. You can edit a page in two different ways. a. By finding the page in the pages section of the backend/dashboard. b. Visiting the page on the frontend of your website. a. From the backend/dashboard If you are on the website backend/dashboard, click the Pages icon . This will take you to a list of all the pages on your website. To edit a page, simply find the page you would like to edit, and then either click on the title of the page or hover over it and click the edit link. By default, this Pages area will show you the first ten pages on your site. If you have more than ten pages, click the next arrows near the upper right to view the next ten There is also a search box that will search the title and page content.

.

b. From the frontend If you are logged in, and on the frontend of the website, simply navigate to the page you would like to edit and click the Edit Page button in the Admin Bar to the bottom of the page and find an edit link

.

. You can also scroll

5. WordPress Edit Page / Post Screen Once you are on the edit page / edit post screen, you will see the WordPress Edit Page screen and the WordPress Editor. The WordPress Editor is very similar to using Microsoft Word in its formatting capabilities and ease of use.

a. Page Title and URL/Permalink Starting from the top of the screen, there is a section for the Page Title. This will be what the page is named on the backend and also the text that appears at the top of the page on the frontend. The URL, also known as a Permalink, will be based on your title. It will automatically take your title, and replaces any special characters or spaces with dashes. You can change the URL / Permalink after the page has been saved as a draft, or published, by clicking the edit button below the title. You may want to do this if you have a long title but would like the URL / Permalink to be shorter. b. WordPress Editor. The WordPress Editor is where you will add/edit your page content. You will have a button to insert media, like images, image galleries and files (more on this in Section 5.c). To the right are two tabs: Visual and Text. The Visual tab offers an easy to use Microsoft Word like interface. The Text tab is a code / HTML view. We recommend using the Visual tab. **The first time you log in, you may only see one row of icons in the Visual tab. If this is the case, click on the icon towards the end of the first row, highlighted yellow above. This will show or hide the second row of icons. These icons are very similar in function to Microsoft Word. E.g. bold, italic, strikethrough, underline, text color, alignment, insert special characters, remove formatting, inset/edit and remove hyperlinks, and more.

i.

Fonts and Headings You will notice that there is no font size or font button. This is done on purpose to help your website look as professional as possible by keeping the page paragraph text and headings uniform. To switch between regular page text and page headings, click on the dropdown box that says Paragraph . This will let you switch to different size headings. Please note that the smaller the Header number, the larger the font size will be. A Heading 2 is larger than a Heading 3. **Please do not use a Heading 1 unless your website doesn’t automatically insert the Page Title at the top. A Heading 1 helps search engines properly identify what your page title is. Having multiples Heading 1’s can mess with your appearance in search engine results.

ii.

Soft Return vs Hard Return (Single Space / Double Space) Your text will automatically wrap around to the next line in a traditional manor. If you press Enter on the keyboard you will create a new paragraph. This is also known as a Hard Return. A Hard Return will automatically take you out of any other text format, like a Heading 2, and go to a Paragraph. If you would like to go the next line without creating a new Paragrah you will need to perform a soft break / soft return. You can do this by holding down the Shift key and then press Enter.

iii.

Pasting in Content from Other Sources / Remove Text Formatting You have the ability to easily copy and paste in content from other websites and files directly into the WordPress Editor. Sometimes doing this can cause the formatting to become corrupted or show incorrectly. You can remove the undesired formatting by highlighting the text and clicking the Eraser icon text icon

iv.

. You can also click the Paste as plain

BEFORE pasting in the text to strip out the formatting.

Creating/Removing Links to Internal pages, files, or external websites To create a link to an internal page, file, or external website you will need to highlight the text that you would like to become a link and then press the insert/edit link button To remove a link, click on the link and then click the remove link button

.

.

The insert/edit link button will bring up a simple link box that will allow you to search for an internal page (as soon as you stat typing), or manually enter in a URL for a file or external website. More on obtaining and inserting a file URL from your media library in Section 5.c.iii

Once you find the internal page you would like to link to, click on the page title and it will automatically enter the URL in the area that says “Paste URL or type to search” then click the blue enter button or press enter on your keyboard. If you paste in a URL for a file or external website you will click the same button. There is an advance section that you can access bly clicking the Gear icon next to the blue enter button. This will bring up more options and show you more results.

To edit an existing link, click on the existing link’s text. A box should appear showing the existing link and showing an edit icon/pencil (highlighted yellow below) and a remove icon/ X. Click on the edit icon /pencil, change the text and click the blue apply button or press Enter on your keyboard. To remove the link, you can click the X to the right of the edit icon/pencil or click the Remove Link button in the WordPress Editor bar. c. Add Media Button The add media button will allow you to insert images, image galleries and links to files (like PDFs, Word Documents, etc) easily. Begin by simply clicking and putting the cursor where you would like to insert the image, gallery or file link. Now click the Add Media button will bring up the Insert Media box by default

. This

i.

Inserting Images After clicking the Add Media button , the Insert Media box should appear. To make sure you are in the Insert Media section, you can click the Insert Media link highlighted below.

From here you have two tabs: Upload Files and Media Library (shown above). Upload Files will allow you to upload different file types to your website with a max file size of 15 Mb for each file. Please note that when you upload files and images, you will be given the opportunity to adjust their Title. Doing so makes them easier to organize or search for later in your Media Library. For example, if you have a picture of a person, it would be better to change their image Title to their name instead of having a filename generated by a camera E.g. dmf12328.jpg. The Media Library tab will show you all your previously uploaded images and files. There is a search bar that will search the image/file Titles and there are other filters like media type and date to help you find the image/file you are looking for. To insert an image, click the photo thumbnail of the image that you would like to add. You will notice a check mark on the image you have selected. On the far right you will now see a details and settings area that will let you see the file URL, adjust the image Title, Caption, Alt Text (what is shown to search engines and screen readers), Alignment (how the image appears on the screen), Link (if the image should link to the full size version of the image, another page/file, or nothing), and the Size of the image you would like to insert. Alignment gives you the options of Left, Center, Right and None. Left or Right will place the image on either the left or right and then wrap any nearby text around it. Center will place the image on its own line in the center. None will place the image on a line with the first line of nearby text next to it.

Link to just lets you designate what you would like to happen when someone tries to click on the image you inserted. Select None if you just want the image to be on the page. Media File will link to the full size version of the file. Custom URL will let you link the image to a URL. We do not recommend using Attachment Page. Size lets you choose what image size you would like to insert into the page. Any time you upload an image to WordPress it will try to automatically create different file sizes for you (if the image is big enough). This way you do not have to insert an image that is massive and manually scale it down. There are pixels dimensions next to each size. E.g. Medium – 250 x 300. To edit an image’s settings after it has been inserted into a page, simply left click on the image and you will see some quick settings. The first four icons will let you quickly adjust the image’s alignment: Left, Center, Right, and None. The Edit icon/pencil will let you edit the image settings. The Remove icon/X will remove the image from the page. You will also notice small boxes in the bottom left and right corners. If you click on the box and drag it, it will let you resize the image manually. This can be useful for small adjustments. If you find yourself drastically changing the dimensions, consider clicking the Edit icon/pencil and select a different image size. ii.

Inserting a Gallery To insert a Gallery click the Add Media button . The Insert Media box should appear. Click on the Create Gallery link on the left (highlighted below)

Now click all the images that you would like to add to your gallery and click on the Create a new gallery button.

Next, you have the option to rearrange the images and add captions. After making those adjustments look to the far right to set your Gallery Settings. Make sure Link to is set to Media File, then choose the number of columns you would like in your gallery and choose what size photos you would like to appear. Finally, click Insert gallery to add the gallery to the page. iii.

Easily Insert Links to Files In this section we will cover how to quickly insert a link to a file into a page. This is a common task for inserting links to items like publications, syllabi, notes and other documents. This works well for PDFs, Word Documents, Excel files, Zips, etc. In Section 5.b.iv we discussed how to manually add links to pages, files and custom URLS. These instructions are useful only when you know the file URL you are wanting to insert. However, if you do not know the URL this can take a few extra steps. Here is the quick way to insert a link to a file. 1. 2. 3. 4.

Put your cursor and click where you would like to insert the link. Click the Add Media button. Upload or select the file you want to link to and click Insert into page. A link will appear on the page with the file’s Title. To change this text, highlight everything except the first and last character. 5. Type out the text that you would like for the link and then trim of the first and last character from the original link. Your link should now be inserted on the page using the custom text that you wanted for the link.

d. Publish Settings The WordPress Publish Settings give you multiple options for how and when you page will appear. The Save Draft button allows you to save your changes on an un-published page. This can be useful if you are still gathering information on a page and don’t want to publish the page. The Preview button will allow you to see what any changes you have made to the page will potentially look like. This is an approximation and the final result may look a little different. Status allows you to change a page’s status. New pages can be set to Draft or Pending Review. Once a page has been published, it can be set to Draft, Pending Review or Published. Visibility gives you the option to set a page to Public (default), Password Protected (a page specific password which can be changed at any time), or Private (only viewable to people who have account. This is not recommended). Publish allows you to schedule a time and date that you would like your page to go live. Please note that the hours are in a 24 hour format.

e. Page Attributes The Page Attributes section is used for organizing Pages on the backend / Dashboard of the website. Changes here will be reflected on the Pages / All Pages area. Here you can set the current page’s parent aka if the current page should be a subpage of another page. **If you are looking to update your website’s menu go to the WordPress Dashboard and then go to Appearance > Menus. Instructions can be found in Section 7. 6. Media Library The WordPress Media Library contains all the files that you have uploaded to your website as well as the ability to upload new content. There are two possible views when viewing items in the Media Library: a list view and a grid view. To view items in a list click on the list icon

. To view items in a grid, click on the grid

icon . The Media Library page also has filters to help you find items by type and date uploaded. There is also a search box that will search the library item titles. a. Adding/Uploading Content As previously mentioned in the section about adding media items to your webpage, you can upload most file types that are 15 Mb or less. Simply click the Add New link, and then drag and drop your files on the media uploader, or click the Select Files button and manually select the files that you would like to upload. Please remember to adjust each Media Library item’s title to be more user friendly so it can be searched for later. b. Obtaining a File URL A file’s URL may be necessary to obtain when manually creating a link (visit Section 5.c.iii for an easy way to insert links to files in pages) or for sharing with others. To obtain a media library item’s file URL go to the Media Library, click on a media library item to view its details and then look for either the File URL or the URL field. Do NOT copy the Permalink as this will not link to the file. c. Editing Photos WordPress has a small built in photo editor that will allow you to crop, resize, and scale images. If you require further editing you may want to contact [email protected] about purchasing a license for Adobe Photoshop. To edit a photo, go to the Media Library find the photo you want to edit and click on the image, or title edit button depending if you are in the Grid or List library view. Once on the Edit Media/Attachment Details screen look for the Edit Image button which should be located below the image to the left.

You should now see numerous editing options. Above the image there should be seven icons with three greyed out by default. These buttons are Crop, Rotate Counter Clockwise, Rotate Clockwise, Flip Vertical, Flip Horizontal, Undo and Redo.

The Crop button is greyed out until you use the mouse to click and draw out an area that you would like to crop to. Once you draw out a box, then the button will be functional. On the right hand side there is an image Crop section that will show you the current dimensions of the cropping box you created and an area if you would like the box to be a specific aspect ratio. You must click the Crop button to finalize your selection and then your changes will not be committed until you click the blue Save button.

Image Scaling On the right hand side there will be options for proportionally scaling the original image. For best results scale the image before cropping, rotating or flipping the image. You can only scale images down.

Restore Original Image Once you make changes to the original image an area will appear on the edit screen that will allow you to revert back to the original image. Thumbnail Settings Lastly, there is a section where you can specify what you would like the current image edits to be applied to. For example, you can edit the image while preserving the thumbnail, or you may wish to have a square thumbnail that displays just a section of the image. Your options are to apply the changes to All image sizes, Thumbnail, and All sizes except thumbnail. 7. Website Menu Your website uses a custom menu for its navigation. You can access the menu screen from either the frontend or the backend/dashboard of your website. If you are on the frontend of your website you can easily navigate to the Menu section from any page by hovering over the gauge icon and website name in the Admin Bar and clicking on Menus at the bottom.

If you are on the backend/dashboard of your website go to Appearance and then Menus.

The Menus page will let you edit your menu. If you have more than one menu, there will be a dropdown box that will let you select the menu you would like to edit. If you only have one menu then it will be selected by default. On the left hand side there will be different sections that contain your Pages, Posts, Custom Links and Categories. Your website may contain more or fewer areas depending on its setup. To add items to your menu, expand the box that you would like to add items from by clicking the arrow to the right of its name (highlighted in yellow on the left). This will show you the items in that area. Check the boxes next to the items you would like to add and then click Add to Menu. This will add the items to the bottom of you menu. To rearrange items in your menu, click and drag the item to the location in the menu that you would prefer. If you would like to make an item a sub-item/sub-page, drag the item to the right. To make it a normal item again, drag it to the left. The Custom Links section will allow you to link to files or external web pages. If you would like to change an items default text, click the arrow to the right of the name to expand the item (highlighted in yellow on the left). Now change the text in the Navigation Label. To commit your changes click the blue Save Menu button found at either the top or bottom of the page. At the bottom of the Menus screen there is a Menu Settings area where you can specify where you would like the menu you are currently editing to show up. Most website themes will have a Theme Location called Main, Main Menu, or Primary Menu. Make sure that box is checked for it to show up in that location.

8. Themes You currently have administrative access to modify the look and feel of your site using WordPress Themes. You can access your WordPress Themes section from either the frontend or the backend/dashboard of your website. If you are on the frontend of your website, you can easily navigate to the Themes section from any page by hovering over the gauge icon and website name in the Admin Bar and clicking on Themes.

If you are on the backend/dashboard of your website go to Appearance and then Themes.

The Themes section shows your current theme and all the themes that you can use on your website. If you click on Customize, on your Active theme, you can change settings like colors, header image, background image, menus, widgets and more (if supported). If you hover over another theme you can either Activate it or see a Live Preview of what your website content would look like using the new theme. Please note: Some website functionality can change from theme to theme. 9. Widgets Each theme has preset areas where additional information can be displayed. These are called Widget areas. Common widget areas include a sidebar and footer areas. Similar to the Menu and Themes section you can access the Widget area from either the frontend or backend/dashboard. If you are on the frontend of your website you can easily navigate to the Widgets section from any page by hovering over the gauge icon and website name in the Admin Bar and clicking on Widgets.

If you are on the backend/dashboard of your website go to Appearance and then Widgets.

The Widgets page shows a list of available widgets that you can use in the available widgets areas. To add a widget to an area, you can drag and drop a widget to a widget area. The most useful and versatile widget is the Visual Editor widget. It allows you to use the full WordPress Editor in a widget area. This allows you to add text, lists, links, images, etc.

10. Plugins While Themes allow you to modify the look and feel of your website, Plugins allow to extend WordPress’s functionality. Plugins are very useful, but they can also open up your site and other sites on the server to security vulnerabilities. Due to this we currently have the ability to install plugins locked down. If you would like to extend your site’s functionality or have any questions on what your WordPress site can do, please reach out to us and we can work with you. An example of some plugins that we can enable include: online forms plugin, calendar, embed documents, social media feeds, sliders, and more.