How do I…

Login to make changes
Edit a simple page
Add an image to a page
Link to a PDF or other doc
Link to another page
Create a new page
Create a new navigation link
Add staff
Remove staff
Add a video
Change the front page video
Revert changes on a page


How to login


To login visit http://southokc.com/wp-admin and use the WordPress credentials. When you are logged in, never update WordPress or plugins.

How to edit a simple page

If you need to edit something simple, like text on a page then first login, then navigate as you normally would to the page you want to edit. While viewing the page you should see a black menu bar at the top of the page. Click the “Edit Page” button on this bar.edit_page_button

You will be taken to the edit page where you will see a large text area containing either the pages source or a visual representation of the page. Note the tabs “Visual” and “Text” on the top right of the main text area. edit_mode_tabsYou can use whichever mode you prefer, but note that the visual mode does not display what the page will really look like.

When you are finished making changes you can either click the “Preview Changes” button on the right, or click the “Update” button then refresh the page to see the changes.publish_box

How to add images to a page


To add an image to a page first open the page editor. Move the cursor to the position where the image should be added. Then click the “Add Media” button located above the main text area.add_media_button

Now choose if you want to upload a new image or use one that has already been uploaded. Use the tabs “Upload Files” and “Media Library” to choose.upload_library_tabs Once you the image is uploaded/selected choose the alignment and link location, then click “Insert into page”.image_properties
Be sure to click “Update” when you are done.

How to link a PDF or other document


The process for uploading and linking a file is the same as adding an image to a page. Please follow those steps and upload the document instead of an image. If the document is a PDF and you would like to force it to download instead of opening in the browser simply modify the code in this way. Change this:
<a href="http://southokc.com/wp-content/uploads/2014/08/1408.0921.pdf">file.pdf</a>to this
<a href="http://southokc.com/wp-content/uploads/2014/08/1408.0921.pdf" download>file.pdf</a>

How to link to another page


To link to either another page on this web site or an external page, start by editing the page where you want to add the link. Select the text that will clickable then click “link”.Selection_002

You can either enter a URL or select a page from this website. When you are done click “Add Link” and don’t forget to update the page.Selection_003

How to add a page


To create a new page on the site first login. Once you login you will be on the WordPress dashboard. Mouse over the Pages button in the left menu then click “Add New”.Menu_005

Give the page a title and add your content. You will also need to change some of the settings further down. Scroll down and change the “Page header layout” and “Header background” settings to match the ones in the screenshot. Also select a header background image for the page from the media library. Selection_006

Don’t forget to click Publish when you are finished.

How to add a navigation link


To add a link in the main navigation menu first login. Once you login you will be on the WordPress dashboard page. Mouse over the “Appearance” button on the left and click “Menus”.Menu_007

Now use the “Pages” box to find the page you want to add a link to. You can use the “View All” or “Search” tab to find your page. Now check the box next to the page name and then click “Add to Menu”. In this example we will add the Documentation page.Selection_008

Now scroll down and you will see your page at the bottom of the menu structure.Selection_009
Do not leave a page at the top level, instead nest it under one of the other items by clicking and dragging it.Selection_010

How to add staff


To add a staff member to the staff page, first login, navigate to the staff page, and click “Edit Page”. Alternatively you can follow the link edit staff page.

On the edit page, ensure that you are editing in text mode by clicking the “Text” tab at the top right of the editor. Selection_004For each staff member there is a block that looks like this:

[su_lightbox type="inline" src="#anap"] <div id="ana" class="staff_img">
<span style="display:table-row;">Ana Monjes / Dev and Membership</span>[mouseoverimage before="http://southokcchamber.com/wp-content/uploads/2014/06/ana_b.jpg" after="http://southokcchamber.com/wp-content/uploads/2014/06/ana_a.jpg" title="Test"]</div>
<div id="anap" class="white-popup mfp-hide"><h2>Ana Monjes</h2><p>Ana, a dual citizen of both the United States and Mexico, joined the Chamber in 2008 after moving from Virginia. In addition to coordinating and executing all business development programming, she is also the Chamber liaison to the South OKC Chamber Hispanic Initiative. She is happily married to Aldo and they have an adorable toddler son, Aiden.</p>
</div>
[/su_lightbox]

To add a new staff member you need to make a copy of one of these blocks and paste it at the bottom, then change the pieces shown in bold. I will go into more detail about how to change each piece.

The bold green text is simply information like the name and bio that needs to be changed.

The bold blue text also needs to be changed, but it needs to be the same in both places. What you change it to doesn’t matter as long as it is a single word that is unique. The convention is the first name with a “p” at the end.

Before we change the bold red text we need to upload the new pictures. You need a before and after picture, both of which are 315x201px. Navigate to the Media page on the admin console.

Then click on “Add New”.Selection_002

Then upload both of the pictures. Now navigate back to the Media page and you should see the two new images at the top. If you click on the image you will be taken to a page where you can get the URL of the image.Selection_003

You will need to replace the bold red URLs with the URLs of the newly uploaded images. Make sure you put the before picture and the after picture in the right places.

Finally you must add the URL of the after/silly picture to the list at the top of the staff source page. Look for this section:
var preload = ["http://southokcchamber.com/wp-content/uploads/2014/06/elaine_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/rachel_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/ana_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/krista_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/carla_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/vanessa_a.jpg"];and update it to look like:
var preload = ["http://southokcchamber.com/wp-content/uploads/2014/06/elaine_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/rachel_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/ana_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/krista_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/carla_a.jpg", "http://southokcchamber.com/wp-content/uploads/2014/06/vanessa_a.jpg", "http://southokc.com/wp-content/uploads/x/x/new_a.jpg" ];Replacing the bold URL with the URL of the image you uploaded.

Be sure to click “Update” when you are finished and test the updated page. This is the most difficult section to update, so if you have any problems contact the web administrator.

How to remove staff


To remove a staff member from the staff page, first login, navigate to the staff page, and click “Edit Page”. Alternatively you can follow the link edit staff page.

On the edit page, ensure that you are editing in text mode by clicking the “Text” tab at the top right of the editor. Selection_004For each staff member there is a block that looks like this:

[su_lightbox type="inline" src="#anap"] <div id="ana" class="staff_img">
<span style="display:table-row;">Ana Monjes / Dev and Membership</span>[mouseoverimage before="http://southokcchamber.com/wp-content/uploads/2014/06/ana_b.jpg" after="http://southokcchamber.com/wp-content/uploads/2014/06/ana_a.jpg" title="Test"]</div>
<div id="anap" class="white-popup mfp-hide"><h2>Ana Monjes</h2><p>Ana, a dual citizen of both the United States and Mexico, joined the Chamber in 2008 after moving from Virginia. In addition to coordinating and executing all business development programming, she is also the Chamber liaison to the South OKC Chamber Hispanic Initiative. She is happily married to Aldo and they have an adorable toddler son, Aiden.</p>
</div>
[/su_lightbox]

Simply find the block that corresponds to the staff member you want to remove and delete the block from [su_lightbox ...] to [/su_lightbox]. Be sure to click “Update” when you are finished.

How to add a video


To add an embedded video to the Videos page start by logging in, navigating to the Videos page, then clicking “Edit Work” at the top. Make sure you are editing the page in text mode.Selection_004

Simply copy the code to embed the video from youtube, vimeo, or other site into the text area above or below the other videos. For best results add the class attribute to the <iframe> tag. Like this:

<iframe class="c-video" src="//player.vimeo.com/video/79229417" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Be sure to update the page when you are finished.

How to change front page video


Similar to adding a video to the Videos page you must edit the Videos page then paste the embed code from YouTube or Vimeo into the “Project short description”.Selection_004

Don’t forget to update the page when you are finished.

How to revert changes on a page

Go top