Training Videos
Learn WordPress, the easy way.
To access WordPress, login (using the credentials that were emailed to you) at: saintbarnabas.org/wp-admin
These short videos will show you the basics of using WordPress.
Keep in mind that the content in posts, pages, events, and other content areas such as the footer, can all be edited in a similar fashion, using content blocks as shown in the videos.
Creating a New Page
Adding Media
Managing the Banner Area
Explaining Content Blocks
Adding a New User
Creating an Event Post
Creating an Update Post
Managing Menus
Creating Forms
POSTING A SERMON FROM YOUTUBE
For further questions using WordPress, email Nicole Moore.
How to prevent grid images from distorting when linked to other content
In text editor, find:
<a href=”https://saintbarnabas.org/ministries/children-youth/”><img class=” size-full wp-image-1088 aligncenter” src=”https://saintbarnabas.org/wp-content/uploads/2015/08/children-ALL-ARE-WELCOM.jpg” alt=”children-ALL ARE WELCOM” width=”420″ height=”180″ /></a>
I bolded the width and height attributes that are automatically created by WordPress. If you simply delete these parameters, the image distortion problem should go away. So the code should instead look like this:
<a href=”https://saintbarnabas.org/ministries/children-youth/”><img class=” size-full wp-image-1088 aligncenter” src=”https://saintbarnabas.org/wp-content/uploads/2015/08/children-ALL-ARE-WELCOM.jpg” alt=”children-ALL ARE WELCOM” /></a>
How to create a styled button
Here is all the text (html) for the buttons. Remember to switch to “text” mode in the editor when inputting these. After you input these codes, switch back to “visual” to finish the rest. The button will only look like a link the editor, but when you publish, it will look like a button.
Default (grey) <a class=”btn btn-default” href=”#” >Link Text</a>
Primary (gold) <a class=”btn btn-primary” href=”#” >Link Text</a>
Primary Inverse (white on gold) <a class=”btn btn-primary-inverse” href=”#” >Link Text</a>
Hollow (white outline) <a class=”btn btn-hollow” href=”#” >Link Text</a>
PS: insert the full URL where there is a “#” in the above button text.
You need to add a button class to the link. Compare the following links, yours first and then Ben’s:
<p style=”text-align: center;”><a href=”mailto:kate@saintbarnabas.org”>Email Kate</a></p>
<p style=”text-align: center;”><a class=”btn btn-primary” href=”mailto:sarahp@saintbarnabas.org”>Email Sarah</a></p>
As you can see in bold, a button class is applied to the second link. You can add this class to achieve the same style.
How to create a full separation line between content
If you click the Section Background tab, you will see that you can check a box to override the default styles. Once this is clicked, you can add a border “below”. The rest of the border styles should default correctly to “solid”, “1px”, and with a color of “#eeeeee”.
DIMENSIONS
Front Page Hero Banner – 1920 x 450
FORMS
Exporting Data from a Form
> Sign in with WordPress username and password
> Go to Forms (on the lefthand column)
> Go to Import/Export option beneath Forms
> Select the form you’d like to export
> Select fields for the data you wish to export (you can also select a date range)
> Click “Download Export File” button at bottom
An excel document will automatically download.