Thanks, volunteers for all your help in maintaining Ingomar Church’s website!

This page is a tutorial on how to manage Ingomar Church’s website using our WordPress back-end.

Login

Visit https://ingomarchurch.org/wp-admin to login.  Login using the Username and Password provided to you.

TrainingLogin

Editable Content Types

TrainingContentTypes

In our WordPress installation, there are the following content types:

  1. Pages
  2. Posts (aka “blog items” or “News”)
  3. Media Items
  4. Archive Items (bulletins, sermon texts + videos, Spirit newsletters)
  5. Staff
  6. Contact Emails (for staff)
  7. Events
  8. Photo Galleries
  9. Locations
  10. Comments (can tag any Page or Post, turned off by default in our system)
  11. Home Page Slider
  12. Home Page Boxes

Sounds like a daunting array.  If you scan down the left hand side of WordPress admin console, you can see how to access these content types.  But most people will only edit Pages.  And finding and editing pages is pretty straightforward.

Finding a Page to Edit

Part of the fun of any content management system (CMS) is simply finding the thing you want to edit.  Most of the time, volunteers and staff will be editing Pages.  So click on the Pages tab on the left and click All Pages.  This will load up a list of all site pages on the right.  The pages default to alphabetical ordering by Page Title.  Child pages are nested 1, 2 or 3 levels underneath parent in the list, like the Give | Online Giving page below.  But as the site grows and grows in # of pages, the only practical way to find the page you want to edit is the search box.  So type in a couple keywords you believe would be unique but found in the Title or content of the page you want to edit into the search field and press the Search Pages button.

TrainingFindPage

Try typing in “service times” (lower case is fine, case is ignored) and pressing the Search Pages button.  You should see results like below:

TrainingFindServiceTimes

And sure enough, the third item is the page we want.  If you don’t see the page you want, guy some other keywords and repeat Search Pages until you find the page you’re trying to edit.

Setting Up to Play Around

We”re going to create a mock page to edit.  Hang with me here and follow these steps exactly.  Be careful not to accidentally overwrite the actual live Services & Times page.  Do the following steps.

1. Click the Services & Times link above to access the page.

2. Click the Text tab to upper right then in large edit area, right-click and select Select All.

TrainingTextTabSelectAll

3. Right-click again over selected text and press Copy.

TrainingClickCopy

4. Under Pages tab on left, press Add New (NOTE – normally you’ll just be editing existing pages, but we’ll create a unique “play” page to edit for this exercise.)

TrainingPagesAddNew

5. In the big blank edit area of the new page window, right-click and select Paste.

TrainingPaste

6. Click the Visual tab upper right.  Now again you should see header fonts, etc.

TrainingVisualTab

7. Type in Page Title exactly as DELETE <space> <first initial > <last name>.  I typed in “DELETE afraley” as below, you type in yours.

TrainingPageTitle

8. Last step to create our “Play Page”, press the Publish button towards upper-right center.

TrainingPublishButton

That’s it!  You should see it successfully publish the page you just created.

TrainingPermaLink

Standard Formatting

Click the All Pages link to the left of console.  And then go back in and find the page you just created and let’s edit it.

If you look at the WordPress editor ribbon bar (under Add Media button in section above), you’ll notice it has buttons which allow you to do common editing things on selected text including:

  • Bold
  • Italics
  • Strike-through
  • Bullets (for multiple selected lines)
  • Numbering (for multiple selected lines)
  • Quoting (DO NOT USE)
  • Left, Center, and Right align
  • Insert and Remove (Hyper) Links to other pages or other websites.
  • More Tag (DO NOT USE)
  • Set Paragraph Style
  • Underline
  • Fill Align
  • Font Color
  • Paste As Text
  • Paste With Formatting From Word
  • Remove Formatting
  • Insert Special Character
  • Indent
  • Outdent
  • Undo
  • Redo
  • Help

If you’ve used Microsoft Word or especially other online editors like in GMail, then all this is familiar.

In WordPress, when inserting hyperlinks to other pages on the Ingomar Church site, like to the Worship overview page, be sure to do a SEARCH for the page you’re looking for, select the exact page and use the AddLink button, as typing in full URLs to other pages can be error prone and can easily break.

Picture Types and Sizing

To insert a picture in the page, put the cursor where you want the picture to go and press the Add Media button.  Unless someone has already uploaded an exact picture you’re looking for already (in which case you can just select Media Library link in the insert screen and reuse it), you’ll need to upload a new picture.  The size and type of pictures you upload is important.  For pictures, like of people and places and things in the real world, always used JPG (JPEG) files.  For icons and logos things where pixels must be exact, use PNG files (PNG files are bigger than JPG files, but also more exact).

And the size of pictures is also important.  The widest an uploaded picture should ever be is 900 pixels.  If the picture is being loaded into a column which is 1/4, 1/2, 2/3, or 3/4 of the screen width, then the uploaded picture can at max be 900 times that page width fraction (i.e. 1/4 * 900 = 225px, 1/3 * 900 = 300px, 1/2 * 900 = 450px, 2/3 * 900 = 600px, and 3/4 * 900 = 675px).  In fact, to look nice, pictures should be exactly those pixel width in columns to take up the full width.

Also, pictures loaded into the slider need to be exactly 960px x 350px.  And pictures loaded into page tops need to be exactly 960px x 250px.

Shortcodes

OK, the last but probably hardest concept, of page formatting with our Ingomar Church site (which uses the “Risen” WordPress theme).  Our site supports many shortcodes which affect the layout of the page you’re creating or editing.  Shortcodes are formatting tags in brackets like [ box ]Stuff in a box.[ /box ] (which draws a styled box with the text “Stuff in a box.” within the box.  The two most common shortcode used throughout the church website are [ box ] [/ box ] and also [ columns ] [ /columns ] (where columns has columns sets between the open and close tags.

So let’s say I want a styled box (note – each section in this tutorial including this Shortcodes section is in a styled box).  And in the box, I want three columns, the left-most taking 1/4 width, center taking 1/2 width, and the right-most taking 1/4 width (of course column sets must always add up to 100%).  I would write such a box like this:

[ box ]

[ columns ]

[ one_fourth ]

Stuff in left

[ /one_fourth ]

[ one_half ]

Stuff in middle

[ /one_half ]

[ one_fourth ]

Stuff in right

[ /one_fourth ]

[ /columns ]

[ /box ]

It looks like a bunch of garble-gook at first.  But when you read the open and closing tags (closing always start with “/” and match the opening tag) and think about it, it all makes sense.  If you forget a closing tag or misspell a shortcode, you’ll see it when you look at your output page.  It won’t be laid out like you expect.

For a full list of legal short codes, see here.  To see how they look when used, see here.

Do not use [ tab ] shortcodes as they often break how the website looks on a mobile phone.  Use [ accordion ] shortcodes sparingly.

Mission Impossible

mission_impossible

Here’s your assignment should you choose to accept it!  Using all of the preceding information, add a new and creative worship service box to the new worship services & times page you’ve created at https://ingomarchurch.org/delete-<first_initial><last_name>.  The new worship box should fit in the page according to the time you decide to hold your worship service on Sunday.  It should have multiple columns and an enticing picture of people worshipping.  For you to successfully complete this exercise you’ll need to be comfortable with formatting text including a header title paragraph style.  You’ll need to be comfortable with shortcodes described above, especially boxes and columns.  And you’ll need to be comfortable uploading an image (and knowing what width to make it to fit into your column, again, see above).

So good luck on your mission!  Contact classmates who’ve mastered this exercise, like Zack Oshlick, if you have questions.

Advanced Topics

The topics below are only for people maintaining bulletins, sermon texts and videos, and Spirit Newsletters.

(Zack, Norma, Carol)

Loading Spirit Newsletters

Some quick steps on loading a Spirit Newsletter…

  • On WordPress left pane, click Archive Items | Add New
  • Media Item Categories on right must have one and only one category selected and it must be: “Spirit Newsletter”
  • Title format is like “<month-start>-<month-end> YYYY Spirit Newsletter” like “November-December 2012 Spirit Newsletter” for a Spirit spanning more than one month, or something like “<month> YYYY Spirit Newsletter” like “April 2012 Spirit Newsletter” if newsletter only covers one month.
  • Upload PDF file.  PDF file name should have name with exact format “20121112_Spirit.pdf” or “201206_Spirit.pdf” where date indicator is either [YYYYMM] for Spirit Newsletter covering one month or [YYYYMMMM] if Spirit Newsletter covers multiple months. MM is zero-padded like 04 for April.
  • Set “Published on:” (upper right) to be 1st day of first month covered by Spirit Newsletter, and time to be 00:00
  • Right under Title at top of screen, press “Edit” button to right of Permalink and make it “YYYYMM_Spirit” (or YYYYMMMM, where first MM is first month of Spirit Newsletter coverage and MM is end month of Spirit Newsletter coverage, like 20130608_Spirit for a Spirit for months June-Aug 2013.

In order to create bullet list of topics in the Spirit issue, Excerpt field should be set to something like this:

<b>In this issue:</b>

<ul>

<li>Topic 1</li>

<li>Topic 2</li>

<li>Topic 3</li>

<li>Topic …</li>

</ul>

A list formatted as above will actually show up on Web page like:

In This Issue:

  • Topic 1
  • Topic 2
  • Topic 3
  • Topic 4

Where Topics are main topics covered in the Spirit Newsletter.  See already-loaded Spirit’s on the web site for good examples.

Hint: An easy way to quickly create an Excerpt list is to go back to prior Spirit Newsletter media item, copy it’s Except list raw text, and paste it into new Spirit Newsletter’s Excerpt field and edit it

After Uploading PDF and setting up all fields like above, press “Publish” button to publish for first time or “Update” button to after coming back to edit/change a field on the newsletter.

Loading Bulletins

Some quick steps on loading a bulletin…

  • On WordPress left pane, click Archive Items | Add New
  • Media Item Categories on right must have one and only one category selected and it must be: “Bulletin”
  • Title format is like “<month> <day>, YYYY Bulletin” like “January 27, 2013 Bulletin”.
  • Upload PDF file.  PDF file name should have name with exact format “20130127_Bulletin.pdf” for bulletin for Jan 27, 2013.  After pressing “Upload File” button, in dialog that appears, press the “File URL” button under the Link URL field.
  • Set “Published on:” (upper right) to be the date of the Sunday for worship services covered in the bulletin, and time to be 00:00
  • Right under Title at top of screen, press “Edit” button to right of Permalink and make it “YYYYMMDD_Bulletin” like 20130127_Bulletin.

After Uploading PDF and setting up all fields like above, press “Publish” button to publish for first time or “Update” button to after coming back to edit/change a field on the bulletin.

Loading Sermon Texts and Videos

Some quick steps on loading a sermon text PDF and YouTube sermon video pointer…

  • On WordPress left pane, click Archive Items | Add New
  • Media Item Categories on right must have one and only one category selected and it must be: “Sermon”
  • Title format is like “<month> <day>, YYYY Sermon” like “January 27, 2013 Sermon”.
  • Upload PDF file for sermon text.  PDF file name should have name with exact format “20130127_Sermon.pdf” for sermon for Jan 27, 2013.  After pressing “Upload File” button, in dialog that appears, press the “File URL” button under the Link URL field.
  • Set the YouTube URL to be pointer to actual YouTube video of the sermon, like “http://youtu.be/tuaqQFXdqGI”
  • Check off the name of the preaching pastor.  If it’s a new visiting pastor or lay preacher, then press “+Add Speaker” button and add them.
  • Set “Published on:” (upper right) to be the date of the Sunday for worship services where sermon was delivered, and time to be 00:00
  • Right under Title at top of screen, press “Edit” button to right of Permalink and make it “YYYYMMDD_Sermon” like 20130127_Sermon.

After Uploading PDF and setting up all fields like above, press “Publish” button to publish for first time or “Update” button to after coming back to edit/change a field on the bulletin.  Note since one person will be uploading YouTube and another may be uploading the sermon text PDF, first person to upload does most of the stuff above and second person just goes and either just uploads sermon PDF or points at YouTube URL after base archive item for sermon already in place.