Working with Widgets

 
“Widget” is a very non-specific word like “gadget” or “doohickey”. In our case, it refers to a small computer operation that we can add to our website if we wish. Examples:

  • Text, including HTML code for links to other pages
  • Search boxes
  • Thumbnail photos as icons for featured pages

Knowing how to work with widgets is vital because the CtK Home Page can only be edited from the Widgets page in the admin area of the website.

At first, the instructions below won’t make any sense unless you can see the widgets page at the same time you are reading the instructions. Consider keeping this page open and opening the widgets page in a new browser window. If you would like to experiment using widgets, use the alternative sidebar, which only appears on the editors’ practice page.
 

Ways to get to the Widgets Page

  • http://www.ctkdurango.org/wp-admin/widgets.php
  • If you have already logged in, choose “Widgets” below the “Appearance” tab at the top of any CtK web page
  • Choose “Widgets” from the “Appearance” box in the left sidebar of the dashboard

 

Getting Oriented to the Widgets Page

  • The sidebar on the right lists places on the CtK website where you can put widgets. (See next section for more of an explanation.)
  • Although the Available Widgets section has more than 20 different kinds
    of widgets to choose from, so far, the CtK website only uses two kinds: mostly Text widgets and a few Genesis – Featured Page widgets. If you want to add a new widget, drag one from this section to a location listed on the sidebar.
  • The Inactive Widgets section in lower part of the page is a “parking garage” for widgets you are no longer using, but might need later. By dragging an active widget from the sidebar to this area, you retain the text and all the settings, making it very easy to use again later.

 

Widget Locations on the CtK Website

  • Home Top Left: “Genesis – Featured Page” widget – Okay to edit once you know what you’re doing. The big photo on our home page is actually a link to our music page. If we change the photo assigned to be the “Featured Image” for our music page, our home page photo will suddenly change to the new one.
  • Home Top Right: “Text” widget – Do not touch this very complicated mix of information, links, and the ELCA logo. Ask a Web Team member to make any needed changes in this widget.
  • Home Middle #1: Easy-to-edit text widget – worship service schedules. See instructions below on how to switch between our regular schedule and special schedules for Holy Week and Christmas.
  • Home Middle #2: Easy-to-edit text widget – Children’s World. Straightforward editing, but shouldn’t need frequent changes.
  • Home Middle #3: Easy-to-edit text widget – Each line is a link to specific story on the CtK News Page. Should be changed several times per week. VERY easy to edit by copying and pasting headline links from News page. See below for instructions.
  • Sidebar widgets show up only on pages other than the home page, and the sidebar can be turned off for specific pages, if desired. Right now, the sidebar contains three text widgets. Don’t touch the first one, the link to the ELCA website, because it has finicky formatting. The other two are easy to edit as needed, but shouldn’t need much.
  • Footer widgets show up at the bottom of every page. The five footer icons correspond to the five M-Teams, and each icon is comprised of two text widgets and one Genesis – Featured Page widget. This HTML isn’t complicated, but ask Lynn to make any needed changes in the footer widgets, since she knows how the photo links are set up.

 

Hints for Text Widgets and HTML in General

  • In WordPress, the main difference between creating content for text widgets versus pages is that widgets don’t have a visual editor option. That means you can only use HTML code.
  • Use a Microsoft Word document as backup for all your HTML experiments. Before you edit a text widget, copy the existing HTML and paste it into the document. You might want to keep adding to the same document over the weeks to keep everything in one place and so you can refer back it to later.
  • When possible, avoid creating entirely new content for widgets; edit what is already there or copy links/HTML from other pages.
  • If you must create new content for a widget, consider doing it on the practice page so you’ll have the visual editor as a tool. Once the section works properly, copy the HTML and paste it into a widget. You will still need to edit the heading sizes.
  • Heading sizes for widgets don’t correspond to heading sizes for regular pages. (The reason for this has been shrouded in mystery by God and/or a snickering teenage programmer somewhere.)
  • Test everything you edit or create.

 

Specifics on Editing CtK Widgets

Home Middle #3 Text Widget: links to specific CtK news stories

  • This widget is very easy to edit, and should be changed daily or at least several times per week.
  • Each line below the heading is a link to specific story on the CtK News Page
  • Copy and paste HTML from individual links at the top of the News Page directly into main body of this widget, starting with <a href and ending with </a>. For example: <a href=”http://www.ctkdurango.org/news/#sunday”>Sunday School Schedule</a>
  • If needed, eliminate words in headlines until each headline fits on a single line when you view the widget on the home page.
  • For dates, use format of: Fri Dec 9.

 

Home Middle #1 Text Widget: Worship Schedule

Switch between our usual worship schedule, which should be in this position most of the time, and special schedules for Easter and Christmas.

A. Usual Worship Schedule

If our usual schedule widget gets lost, you can recreate it as follows:

  • Click the arrow on “Home Middle #1” in the sidebar. The Home Middle #1 area will open like a folder
  • Drag a “Text” widget from the Available Widgets area and drop it into the Home Middle #1 area
  • Click the arrow on the text widget you have just moved to the sidebar. The text widget will open, to show an area for typing/editing
  • Click the “Automatically add paragraphs” box to put a check mark in it
  • Leave the title area blank
  • Paste the following code into the main body of the box, then click save:

<div style = font-size:20px;padding-bottom:12px><a href=”http://www.ctkdurango.org/worship/worship-services/”>Check on Worship Services</a></div>

<div style = font-size:14px;>Saturday 5:00 PM Contemporary worship

Sunday 8:00 AM Contemporary worship

Sunday 10:30 AM Traditional worship

Thursday 5:30 PM Pub Chat

<a href=”http://www.ctkdurango.org/worship/worship-services/”>More worship information… </a></div>

B. Special Worship Schedule

  • Drag the Usual Schedule text widget out of Home Middle #1 and drop it the Inactive Widgets section.
  • Open the other text widgets in the Inactive Widgets section to see if there’s already a special worship schedule you can easily edit.
  • If so, drag the widget up to Home Middle #1 and edit dates, times, etc. as needed, then click save
  • If needed, do more editing and save again

If there isn’t an appropriate widget in the Inactive Widgets section, you will need to create a new widget for the special schedule as follows:

  • Copy and paste the code below into a Microsoft Word document for editing
  • Edit the grayscale parts as needed, but don’t touch the red formatting code
  • On the Widgets page, click the arrow on “Home Middle #1” in the sidebar. The Home Middle #1 area will open like a folder
  • Drag a “Text” widget from the Available Widgets area and drop it into the Home Middle #1 area
  • Click the arrow on the text widget you have just moved to the sidebar. The text widget will open, to show an area for typing/editing
  • Click the “Automatically add paragraphs” box to put a check mark in it
  • Leave the title area blank
  • Paste your edited code into the main body of the box, then click save
  • Do more editing as needed and save again
  • Don’t forget to switch back to the usual schedule as soon as possible

<div style = font-size:20px;padding-bottom:12px><span style=”color: #800000;”>Christmas Week Services</span></div>

<div style = font-size:14px;><span style=”color: #800000;”><strong>Wed Dec 21:</strong>

6 PM – Interdenominational Worship
followed by Soup Supper

<strong>Thu Dec 22:</strong>

5:30 PM – Pub Chat <a href=”http://maps.google.com/maps?q=Irish+Embassy+Durango&amp;hl=en&amp;ll=37.272687,-107.873898&amp;spn=0.018612,0.02914&amp;sll=37.328673,-107.655029&amp;sspn=1.24487,1.864929&amp;z=15″>(Irish Embassy Pub)</a>

<strong>Sat Dec 24:</strong> Christmas Eve

3 PM – Stable Service <a href=”http://maps.google.com/maps?q=la+plata+county+fairgrounds&ll=37.290784,-107.873983&spn=0.020144,0.037036&oe=utf-8&client=firefox-a&hq=la+plata+county+fairgrounds&hnear=Durango,+La+Plata,+Colorado&t=m&z=15&vpsrc=6″>(County Fairgrounds)</a>

5 PM – Contemporary Worship

7 PM – Traditional Worship

<strong>Sun Dec 25:</strong> Christmas Day

8 AM – Contemporary Worship

10:30 AM – Traditional Worship</span>

<a href=”http://www.ctkdurango.org/worship/worship-services/”> More worship information… </a></div>

 

Back to top