WordPress Tutorials – Saint Barnabas

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:

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:

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.

Training Videos