SSC WordPress Template Documentation

If you are using an older SSCERT WordPress Templates you can change the department name on your own with the instructions below.

1. Click on the “Edit …” button in the admin bar located at the top of your screen.
   
2. On the left side of the page go to “Settings” -> “General”.
   
3. Scroll to the bottom of the page to find the “Department” box. Fill in the section with the appropriate name of your department and press “Save Changes” once you are finished.

Newer WordPress Templates:

1. If you don’t have a copy of your department’s logos go to https://www.college.ucla.edu/brand/division/social-sciences/ to download them. Otherwise, proceed to step 2.
2. Upload your department’s PNG logos to the “Media Library”.
   
3. Go to the admin bar located at the top of the page and click on “Theme Options”.
   
4. Look for “Logo” then click “Upload” to search for the logo that was uploaded to the Media Library.
   
5. Once the logo has been uploaded click the “Save All Changes” button on the bottom of the page.

Older WordPress Templates:

1. Go to Settings and then scroll down to where it says “Logo”. Here you are going to insert the logo’s url that you got from the media library.
   
2. If the logo turns out being too big in the header go to Media Library and edit the logo by clicking on “Edit image”.
   
3. On the right look for “Scale image”. Here you can scale the logo down to the appropriate size. Your changes will save automatically. If you make a mistake, you can always revert the image back to it’s original size. A button to revert should show up right under “Scale image”.
   
4. After make sure to recopy the logo link by clicking on “Copy URL to clipboard”.
   
5. Go back to Settings and paste the URL where it says “Logo”.

1. To add social media icons to the header (boxed in red), first click on “Theme Options” in the admin bar at the top of the page.
   
2. Once you are on the “Theme Options” page, scroll down and click on “Social Profiles”.
   
3. Select a social icon from the dropdown menu, and insert the URL to your social media account in the appropriate box. When you are done make sure to click “Save all changes”.
   
4. If the social media icons are not showing up on the header go to “Header” then click on the “Extra Elements” tab.
   
5. Now look for “Header Social Icons” and check to see if it has “Display in top bar…” selected. If it is not, click on the drop down menu to change it.
   
6. Click “Save all changes” to save at the end.

1. To edit the main menu items, first click on “Edit …” in the admin bar located at the top of your screen.
   
2. On the left side of the page, go to “Appearance” –> “Menus”.
   
3. On the left there should be a “Pages” box that shows a list of existing pages. Look for the page you want to add. Select the page and then click “Add to Menu”. All new menu items will show up at the bottom of the menu list. You can either leave the new item at the bottom of the list or drag and drop it to your desire location.
4. You can also nest menu items on the main menu. In the example below, we added “Sample Page” to our main menu and nested it under the “About” page. You may do this by simply placing the box of the appropriate page as indented under the parent page of your choosing, which in our case is the “About” page.
   
5. To delete an item on the main menu, click on the dropdown arrow then click “Remove”.
   
6. When you are finished making changes to the main menu, make sure you click “Save Menu” to save your changes.
7. If you make a mistake while editing the main menu, refresh the page and the changes won’t be saved. The original main menu before your changes should show back up.

1. On the Dashboard go to “Pages” then click on “Add new”.
   
2. You can now start adding in a title for the page. In the example below the title is “Research”. You don’t have to worry about the “Permalink” because WordPress will automatically create the permalink for you after you save your work.
   
3. Before you start adding in content to the new page, make sure you save your page first! There are two ways to save your new page. You can click on “Save Draft” or “Publish” . “Save Draft” will save your progress, but won’t make the page live on the site. While Publish will save your progress and make the page live on the site.

There are two options on how to edit a page.

Option 1: 

1. On the Dashboard go to “Pages” and search up the page on the search bar or look through the list of pages.
   

Option 2:

1. Go to the page directly on the site and then click on “Edit Page”, located at the top of your screen.
   
2. When you are finished making changes to a page, always remember to click on “Update” to make the changes live on the site. If you wanted to see what the changes would look like before updating you can click on “Preview Changes” and this will open a new tab with the changes you have made.
   

If you have made a mistake on a page you can always restore the page back to what it was originally.

1. On the editing page look for the “Publish” box located on the right. In the box look for “Revisions” and then click “Browse”.
   
2. Using the slider at the top of the page, you can slide it to the past version of the page. Once you are on the correct version click “Restore This Revision” to restore your page back to the original one.
   

The SSCERT WordPress Template provides you with several dummy pages furnished with example content to get your website started.

1. To delete content on a page click on “Edit Page” in the admin bar located on the top of your screen.
   
2. There are two ways to delete content.
   Option 1 (Default Editor):
   If the page is using the Default Editor, select all the content inside the white box and erase it with ‘backspace’ or ‘delete’ on the keyboard.
   Option 2 (Advanced Layout Editor):
   If the post is using the “Advanced Layout Editor” hovering over the elements in the “Avia Layout Builder”. Each element, when hovered over, has a small red ‘X’ in the top right-hand corner that will delete that element from the page. In our example below, hitting ‘X’ will result in the ‘About Us’ text to disappear.
   
3. If you would like to completely remove the page from your website, find the ‘Publish’ box on the right hand side of the editing page. Click on ‘Move to Trash’ to delete the page from your website.

If your website has a lot of pages, it’s a good to try to organize them into some kind of hierarchical structure; that way, when visitors are navigating your site, they have an organized way of accessing information, and helps you keep the pages in a logical order. We call this a parent-child hierarchy; with it a sidebar menu can be generate from the pages.

1. We can set the page hierarchy attribute by first clicking on “Edit Page” in the admin bar. In our example template we are using “Sample Page”.
2. On the “Edit” page, find the “Page Attributes” box in the right sidebar.  It should have the elements Parent, Template, and Order. We will be working with Parent and Order.
   By default, pages that are created have no parent page; this means they are at the top of the hierarchy. Typically these pages are the kinds of pages you would see on the top-level of the main menu.
3. If you wanted to give a page a parent, click on the drop down menu underneath Parent, which expands a list of all the pages on the website. In the below example, all the pages are non-parented; they are all leftmost justified and aligned vertically (more on this later). We set a parent by simply choosing one of these pages.
   Now, we have nested ‘Sample Page’ to be a child of ‘About.’ This would be the equivalent of adding ‘Sample Page’ as a drop-down menu item to ‘About.’ Now, when we are on the ‘About’ page, we can easily navigate to ‘Sample Page.’
4. Additionally, we can control the order that our child pages are in using the Order parameter. ‘0’ means the child has the highest precedence, so it would be the first item under parent in the sidebar menu, ‘1’ being the next highest precedence, and so on.
5. Users are not limited to just one nest. You can nest pages as much as you want. For example, let’s nest ‘Nested Sample Page’ under ‘Sample Page.’ Go to ‘Nested Sample Page’ and on the editing page, look at the Page Attributes. If we click the drop-down menu underneath Parent, we’ll see that ‘Sample Page’ has been indented in comparison to the rest of the list of pages. This is because it is now a child of ‘About.’ If we allow ‘Sample Page’ to be the parent of ‘Nested Sample Page,’ then ‘Nested Sample Page’ would be indented twice to say its most relevant page (parent) is ‘Sample Page’ and falls under the category (grandparent) of ‘About.’

Nesting pages in this parent-child hierarchy is a good way of organizing content by groups of information. It makes navigation easier for both you and the viewer!

In WordPress you are not limited to just adding text and images. You can add in more elements to make the page look more nice.

1. On the editing page make sure you are using “Advanced Layout Editor”. If not, click on the “Advanced Layout Editor” button.
   The “Advanced Layout Editor” should look like the image below.
   
2. In “Advanced Layout Editor” you can now add in elements such as Videos, Blog Posts, Team Member, and many more to your page. Adding these elements are very simple. You can either click on the element itself or drag and drop it to where you want the element to be.
   
3. After you have added the element you can now click on the element in the editor to add in content. When you click on the element a window should pop up to allow you to insert your content.

The process of creating a new post is very similar to creating a new page.

1. Go to Posts then click on “Add new”.
   
2. After you have clicked on “Add new”, you can now start adding in a title for the post. You don’t have to worry about the “Permalink” because WordPress will automatically create the permalink after you save your work.
   
3. Before you start adding in content to the new post, make sure you save your post first! Just like pages, there are two ways to save your new post. You can click on “Save Draft” or “Publish” . “Save Draft” will save your progress, but won’t make the post live on the site. While Publish will save your progress and make the post live on the site.
   

1. Just like pages, there are also two options on how to edit a post.
   Option 1: Go to Posts and search up the post on the search bar or look through the list of posts.
   

   Option 2: Go to post directly on the site and then click on “Edit Post” located in the admin bar at the top of your screen.
   

2. Once you are finished, always remember to click on “Update” to save and make the changes live on the site. If you wanted to see what the changes would look like before updating you can click on “Preview Changes” and this will open a new tab with the changes you have made.
   

If you made a mistake on a post you can always restore the post back to what it was originally before your changes.

1. Go to the post you wish to restore.
2. Once you are on the editing page of the post, look for the “Publish” box located on the right side of the editing page. In the box look for “Revisions” and then click on “Browse”.
   
3. Using the slider at the top of the page, you can slide it to the previous version of the post. The slider is a timeline of all changes that have been made to this post. You don’t need to worry about understanding the HTLM code that is shown. It is there to show users a comparison of changes made from different time stamps. Once you are on the version you want to restore click on “Restore This Revision” to restore your post.

Delete content from a post is very similar to deleting content from a page.

1. First navigate to the post you want to delete content from. Click on “Edit Post” in the admin menu bar located on the top of the page.
   
2. There are two ways to delete content.
   Option 1 (Default Editor):
   If the post is using the Default Editor, simply select all the content inside the white box and erase it with ‘backspace’ or ‘delete’ on the keyboard.
   Option 2 (Advanced Layout Editor):
   If the post is using the “Advanced Layout Editor” hovering over the elements in the ‘Avia Layout Builder.’ Each element, when hovered over, has a small red ‘X’ in the top right-hand corner that will delete that element from the page. In our example below, hitting ‘X’ will result in the ‘About Us’ text to disappear.
   
3. If you would like to completely remove the page from your website, find the ‘Publish’ box on the right hand side of the editing page. Select ‘Move to Trash’ to delete the page from your website.

Adding other elements for Posts are exactly the same as adding extra elements in Pages.

1. On the editing page make sure you are using “Advanced Layout Editor”. If not, click on the “Advanced Layout Editor” button.
   
   The “Advanced Layout Editor” should look like the image below.
   
2. In “Advanced Layout Editor” you can now add in elements such as Videos, Blog Posts, Team Member, and many more to your page. Adding these elements are very simple. You can either click on the element itself or drag and drop it to where you want the element to be. When dragging in the elements make sure the editor highlights in green to indicate that it is okay to add in the element. If the green doesn’t show you can just click on the element and it will add the element to the bottom of the editor.
   
3. After you have added the element you can now click on the element in the editor to add in content. When you click on the element a window should pop up to allow you to insert your content.

The use of categories are very useful in helping you stay organize with your posts.

Creating a new Category

1. To create a new category go to Post > Categories.
2. Name your new category. The slug can be left empty because WordPress will automatically create the slug for you.
3. Now click “Add New Category” and it should show up on the right.

Creating a subcategory

You can also have subcategories under one main category. For example in the image below, the parent category is “Publications” and the subcategories are “Black Employment, Civil Rights, and etc.”.

1. To create a subcategory first name the category.
2. Go to the drop down menu called “Parent Publication Category” and select where you want the subcategory to be under.
3. Click “Add New Category” and it should show up on the right.
4. To add more subcategories under one parent category, repeat steps 1-3.

To edit a category or subcategory hover over the category and there should be options to “Edit”, “Delete”, etc. When you click on “Quick Edit” this will allow you to quickly edit (shown in image) the title of the category without having to reload the whole page just to edit the category. If you want to change the “Parent Category”, then you would have to click on “Edit” to change the parent.

1. To add an event first make sure you are in the Dashboard page. If you are not in Dashboard go to the admin bar on the top of the page and hover over the website’s name then click on “Dashboard”.
   
2. Look to the left side of the dashboard then click on “Events”. This will redirect you to the Events Menu of the website.
   
3. To add a new event, select “Add New” at the top of the screen.
   
4. Displayed on your screen is a new event page. On this page, you can add an event title, event description, time & date, location, and all other relevant event information.
   
5. Once finished, locate the “Publish” button on the right side of the screen. Click on “Publish” to publish your event. In the Publish box you may also preview your event before publishing. Once the event has been publish, it should show up on the “Events” page.
   
6. If you wanted to save the event changes but not make the event live on the site yet, you can save the event as “Draft”. When you are ready to change this event to publish you can do so by clicking on the “Publish” button.
   

1. To edit an event first make sure you are in the Dashboard page. If you are not in Dashboard go to the admin bar on the top of the page and hover over the website’s name then click on “Dashboard”.
   
2. Look to the left side of the dashboard then click on “Events”. This will redirect you to the Events Menu of the website.
   
3. Now you can use the search bar on the right to search for the event or scroll through the list of events to look for the event.
4. Once you are done editing on the right of the “Publish” box there should be a button called “update”. Make sure you click on “update” to update the changes and make it live on the site.
   

1. Under the Pages section on the side bar, use the Advanced Layout Editor and open the “Content Elements”  tab. Add a Portfolio Grid Element to your page by dragging and dropping the element to your work area.
   
2. Click on the “Portfolio Grid” element that you added, and under the first box that asks “Which categories should be used for the portfolio?” select all choices (Galleries, Photos, Videos). Customize your media gallery by changing the different options on this page. We recommend that under “Link Handling,” the “Open a preview of the entry (known as AJAX Portfolio)” should be used. This will allow the user to open the content without loading another page.

In this section you will learn to add images to your portfolio grid. More specifically, you will learn to add either a single image or several image as an entry with a title and description to your portfolio.

To add/remove images and change their appearance in your media gallery, first visit your dashboard by hovering over your website’s name in the admin bar and clicking “Dashboard”. On the sidebar of the page, select  “Portfolio Items”.

To add a new portfolio item, click “Add New” at the top of the page. Enter the title for your entry in the top field of the page.

The featured image entry on the right of the page will set the cover picture for this entry in your media gallery. If you wish to add a single image as an entry to your portfolio, set this image as your featured image, and ignore the next step.

If you wish to add an album of images under your entry, find the “Add Preview Images” section of the page. Click on the “Add Preview Images” button and select the images you would like to add. You may add a caption to each image during this step, which will appear when the user hovers over the image when he/she visits your gallery. You may choose how these images are displayed under the “Display Preview Images” dropdown menu.

On the right side of the page, find the “Portfolio Categories” box. Select the “Photos” option.

Under the “Add Preview Text” section of the page, you may add a description of your entry which will appear once your entry is selected from your media gallery. The following image highlights all the sections you should modify to create your media gallery entry.

Once you are finished, click the blue “Publish” (or “Update”) button.

The next shows the result from the previous step. It shows what our entry looks like when it is opened and the user is hovering over the thumbnail picture of Royce Hall. The caption “Royce Hall” was added to the picture when it was inserted into the entry.

Don’t be alarmed by the other pictures in the portfolio grid–they are separate entries that existed before this tutorial.

To add a video to your media gallery, first visit your dashboard by hovering over your website’s name in the admin bar and clicking “Dashboard”. On the sidebar of the page, select  “Portfolio Items”.

To add a new portfolio item, click “Add New” at the top of the page. Enter the title for your entry in the top field of the page.

The featured image entry on the right of the page will set the cover picture for the video in your media gallery.

To add the video, modify the first two entries under the “Additional Portfolio Settings” section. For “Overwrite Portfolio Link setting”, choose the “Define custom link” option. In the field directly to its right, add the video URL.

On the right side of the page, find the “Portfolio Categories” box. Select the “Videos” option.

You should change the following fields to add a video to your media gallery:

Once you are finished, click the blue “Publish” (or “Update”) button.

1. To change the department address that appears at the bottom of the page (boxed in red), first click on “Edit Page” or “Edit Frontpage” in the admin bar at the top of the page.
2. In the sidebar of the page, click “Settings” –> “General”
   
3. Scroll to the bottom of the page to find the “Address” box. Fill in the section with the appropriate address of your department and press “Save Changes” once you are finished.
   

1. Go to Appearance > Widgets.
   
2. It should now take you to a page that looks like the image below. On the left are available widgets you can use in your footer. On the right where it says “Footer – Column…” is the actual footer. You can click on the dropdown arrow to drag and drop widgets into the footer and start editing.
   
3. To change the number of columns go to the top admin bar and click on “Theme Options”.
   
4. Now go to Footer. Where it says “Footer Columns”, this is where you can change the number of columns on the Footer. After make sure to click on “Save all changes” to save.