The accordions below will help guide you on customizing your SSCERT WordPress template website. Make sure to click on the images to see the full size image of different examples.

We are continually updating this with more common requests and questions. If you have any questions or concerns about WordPress email us at webteam@ss.ucla.edu!


Header & Main Menu

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”.
    media uploads
  3. Go to the admin bar located at the top of the page and click on “Theme Options”.
    Theme Options
  4. Look for where it says “Logo” click on the “Upload” button to search for the logo that was uploaded to the “Media Library”.
    Upload Logo
  5. The “Save All Changes” button should now turn into a blue button that will allow you to click on it to save your changes.

Older WordPress Template:

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.
    Screen Shot 2015-09-22 at 3.21.11 PM copy
  2. On the left side of the page go to “Settings” -> “General”.
    Screen Shot 2015-09-22 at 3.28.50 PM copy
  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.

Screen Shot 2015-09-22 at 3.32.57 PM copy

  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.
    Screen Shot 2015-09-23 at 3.06.09 PM copy
  2. Once you are on the “Theme Options” page, scroll down and click on “Social Profiles”.
    Screen Shot 2015-09-23 at 3.02.28 PM copy
  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”.
    social profiles
  4. If the social media icons are not showing up on the header go to “Header” and then click on the “Extra Elements” tab.
    social profiles
  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.
    social profiles
  1. To edit the main menu items, first click on “Edit …” in the admin bar located at the top of your screen.
    Screen Shot 2015-09-22 at 3.21.11 PM copy
  2. On the left side of the page, go to “Appearance” –> “Menus”.
    Screen Shot 2015-09-22 at 3.45.29 PM
  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 it, and then click on “Add to Menu”. All new menu items will show up on the bottom of the menu list. You can either leave the new item on the bottom of the list or drag and drop it to your desire location.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.
    Screen Shot 2015-09-22 at 3.47.37 PM
  4. You may delete a page in the main menu by clicking on the dropdown arrow at the right of the box and then click on “Remove”.
    removing menu item
  5. Once you have finished making any changes to the main menu, make sure you click on the “Save Menu” button to save your changes.
  6. If make a mistake while edit the main menu, refresh the page and the changes won’t be saved. The original main menu before your changes should show back up.

Pages

  1. Go to Pages then click on “Add new”.
    new page
  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.
    editing page
  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.

draft or publish

There are two options on how to edit a page.

Option 1: 

  1. Go to Pages and search up the page on the search bar or look through the list of pages.
    new page

Option 2:

  1. Go to the page directly and then click on “Edit Page”  in the admin bar located at the top of your screen.
  2. Once you have 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.
    publish or edit

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 on “Browse”.
    Screen Shot 2015-09-22 at 2.51.48 PM copy
  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 on “Restore This Revision” to restore your page back to the original one.
    Screen Shot 2015-09-22 at 3.01.37 PM

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

Screen Shot 2015-10-20 at 11.37.52 AM

  1. To delete content on a page click on “Edit Page” in the admin bar located on the top of your screen.
    edit
  2. There are two ways to delete content.
    Option 1 (Default Editor):
    If the page is using the Default Editor, simply select all the content inside the white box and erase it with ‘backspace’ or ‘delete’ on the keyboard.
    defaultOption 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.
    avia
  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.

trash

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

  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.
    2By 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.
    3Now, 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. 4Users 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!

6

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.
    editing pageThe “Advanced Layout Editor” should look like the image below.
    code block
  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.
    adding in elements
  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.

Avia Layout Builder

The Avia Layout Builder provides several different options to customize the layout and elements on each page.

You can open the Avia Layout Builder by clicking on the blue button located on the left hand side above the Default Text Editor.

From here, you can select whether you’d like to add Layout Elements, Content Elements, etc. To add an element, simply drag and drop the element to the empty block below the options. The block will turn green to indicate the element can be dropped.

Hovering over the element, you can see the options in the top left hand corner of the element. The middle icon allows you to duplicate the element, while the right icon open a new dialogue for editing the element. Remember to click ‘Save’ at the end of the dialogue to retain changes.

Text blocks are used for the main content of a page. When editing the text block, a rich text editor will appear (just like when you normally edit a page); you can type your content directly into the box or copy & paste your content.

Additionally, you can use the top bar of options for formatting your text, such as creating headings, bullet points, changing font color or size, adding an image directly into the text block, adding a link, etc. Selecting “Toolbar Toggle” will allow you to see more styling options.

If you would like to manually style your text, you can click on “Text” in the top right hand corner of the editor in order to write in HTML.

A Special Heading can be used to make a title or piece of text stand out on the page (each section of this page is divided by special headings!). The ‘Content’ tab has several options:

Heading Text: This is what will display on the page.

Heading Type: This controls the size (the biggest being H1) and style of the heading.

Heading Style: Options on how the heading will appear on the page. The default is left-aligned text, followed by a thin grey line extending the width of the container. For non-default styles, you can also specify the Heading Size and an additional Subheading.

Padding Bottom: How much white space will appear between the bottom of the Special Heading and the next element on the page.

In the ‘Colors’ tab, click ‘Custom Color’ from the Heading Color drop-down to choose the color of the heading text.

Content Sliders can be used to display several bodies of text in a rotating carousel.

To add a slide, Click on the ‘+’ button in Add/Edit Slides. To change the order of the slides, click the double-facing arrows on the left side of each slide and drag it into the desired position. To delete a slide, click the ‘x.’ Slides can be edited by clicking on the corresponding box. This will open up options to change the Slide Title and the rich text editor for the slide content.

You can also change how many columns appear, the transition type, and the autorotation options.

Choosing a ‘Custom Color’ under the ‘Colors’ tab will apply the same color to all the text.

Tabs, like Content Sliders, allow you to display text in a condensed space on the page. Users can toggle what content they are viewing by clicking on each tab.

To add a tab, Click on the ‘+’ button in Add/Edit Tabs. To change the order, click the double-facing arrows on the left side of each tab and drag it into the desired position. To delete a tab, click the ‘x’ next to the name of the tab. You can click on either the tab name or space below the tab to open up the rich text editor, where you can add icons to the tab or change the tab content.

An Accordion object  is used to group and fold different spaces into a more compact form. You are reading content from an Accordion right now!

In the Avia Layout Editor under Content Elements, drag and drop the Accordion item into position and begin editing it by clicking on the object that is created.

On the top left of the editor you can find your currently created accordion sections. To edit an accordion tab (such as to add its content or its title), simply click on its name on this page. To add a new accordion section, click the ‘+’ button. To rearrange the order of the sections of your accordion, drag and reposition by the double-arrows on the left of a tab. You may read the descriptions of the other options on this page to change the overall behavior of the accordion.

A table is a way of presenting data in columns and rows. 

In the Avia Layout Editor, click ‘Content Elements’ and drag the Table item into the correct position.

Click on this new Table element to edit it. In the ‘Edit Table’ section, you will be able to input data. In the ‘Table Options’ section, you will be able to change the appearance of the table.

  1. Go to the “Media Elements” tab
  2. Drag and drop “Video”
    video
  3. Click on the “Video” element to add in your YouTube, Vimeo, and etc url. Add the url right under the “Select Video” button.
    adding video
  4. Click save when finished

Avia Layout Builder has many other content options available for your page. Simply browse the Content Elements tab and drag and drop the object you would like to add to your page.

Edit it by clicking on it, and read the descriptions available for each option to modify the content to your liking.


Posts

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

  1. Go to Posts then click on “Add new”.
    adding new posts
  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.
    new posts
  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.
    draft or publish
  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.
    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.
    post

  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.
    publish or edit

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”.
    editing posts
  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.

Screen Shot 2015-09-22 at 3.01.37 PM

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.
    edit
  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.
    defaultOption 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.
    avia
  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.

trash

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.
    editing page
    The “Advanced Layout Editor” should look like the image below.
    code block
  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.
    adding in elements
  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.

Categories

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.

categories

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.

subcategories

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.

subcategory


Events

  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”.
    Screen Shot 2015-11-09 at 11.12.04 AM
  2. Look to the left side of the dashboard then click on “Events”. This will redirect you to the Events Menu of the website.
    1
  3. To add a new event, select “Add New” at the top of the screen.
    2
  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.
    3
  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.
    4
  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.
    4
  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”.
    Screen Shot 2015-11-09 at 11.12.04 AM
  2. Look to the left side of the dashboard then click on “Events”. This will redirect you to the Events Menu of the website.
    1
  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.
    publish or edit

Media Gallery

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.

Screen Shot 2015-09-23 at 3.24.23 PM

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.

Screen Shot 2015-09-24 at 1.49.41 PM

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.

Screen Shot 2015-09-24 at 2.39.38 PM

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.

Screen Shot 2015-09-24 at 2.44.09 PM

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:

Screen Shot 2015-09-24 at 3.00.34 PM

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


Javascript/iFrame

Go to the page editor then drag and drop a “Code block” element into the editing page.

code block

Copy and paste the iFrame code below into the “Code Block” and then make sure to change the url. “src” is where the url should be placed.

Go to the page editor then drag and drop a “Code block” element into the editing page.

code block

Copy and paste the iFrame code below into the “Code Block” and then make sure to change the url. “src” is where the url should be placed.

To add a Facebook feed first go to this url https://developers.facebook.com/docs/plugins/page-plugin/.

Here you will need to fill out the information for Facebook to create you the iFrame code. For width you can try using 500 and height 70.

Facebook FeedOnce you have filled out the fields, scroll down and click on “Get code”.

facebook feed

A window will pop up with an option to get the Javascript or iFrame code. We are going to use the iFrame code. Go to the iFrame tab and then copy the code that is shown.

facebook feed

Go back to your editor and make sure you have dragged and dropped a “Code block” element into the editing page.

code block

Open the code block and paste in your iFrame code. Now update the page and the feed should show up on the page.

Go to your editor then drag and drop a “Code block” element into the editing page.

code block

Copy and paste the Twitter feed Javascript code below into the “Code Block”. Make sure to change the url by adding in your own Twitter url to “href”. You can also in a title to where is says “ADD TITLE HERE” or remove it.


Footer

Screen Shot 2015-09-22 at 4.12.50 PM copy

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.

In the sidebar of the page, click “Settings” –> “General”

Screen Shot 2015-09-22 at 3.28.50 PM copy

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.

Screen Shot 2015-09-22 at 4.10.25 PM copy