15 - Beginning the Ministries Section
Most churches have a variety of programs and groups geared towards outreach, getting members together, or working to benefit charities. The somewhat churchy umbrella term for these things is “Ministries”. It’s always nice to give each ministry a little home page of their own on a church site for marketing, schedules, photos, contact names, etc. In this chapter I’ll cover the implementation of the sample church site’s Ministries index page on ExpressionEngine.
Overall this is a very straightforward implementation of EE. The overall process is:
- Create a Ministries weblog
- Choose a template to base the section on
- Decide what data elements will make up a Ministry page on the site
- Create a Ministries field group
- Create the fieldset
- Create a Ministries category group
- Enter content
- Create a Ministries template group
- Edit the new ministries/index template
Creating a Ministries Weblog
By now you should be able to get through this process on your own—just create a new weblog with a Full Weblog Name of Ministries and a Short Name of ministries. Don’t create any new templates or template groups yet, just save it with the name set.
Choosing a Template
This may seem like a strange second step, but the design of the Ministries section can impact the required fields and content needed to populate it. In my case I really like the idea of using the Staff Directory template for the Ministries index as it allows for a small thumbnail and text description along with the link. It’s a nice looking layout and it would only get used on the Staff page if we don’t use it here.
Having made that choice starts to dictate the different pieces of content I’ll need for each ministry as the index template will require a title, short description and thumbnail. Each entry here will then be linked to a detail template which will hold a larger text area for a full description of the ministry. On that detail page I’ll also give them a spot for a larger photo, and a contact person with name, email and phone number fields. I considered having the contact name appear on the index page, but fear that it would start to look too cluttered.
Creating a Ministries Field Group
With the template chosen and using it as a basis for determining what content will make up a ministry entry on the site, I can now move on to creating the fields necessary to hold that content. First, however, you’ll need to create the parent field group container. Create a new field group with a name of Ministries.
Creating the Fieldset
Add the following fields. For each field I’ve listed the Field Name, Field Label, Field Type, Maxlength, Default Formatting, and Searchable settings. You can choose to make fields required or not as you see fit (I tend to come back to finesse those settings right before handing over a site to a client):
- ministry_index_thumbnail, Ministry Index Thumbnail, text input, 128 characters, no formatting, not searchable.
- ministry_index_description, Ministry Index Description, text input, 100 characters, no formatting, searchable.
- ministry_photo, text input, Ministry Photo, text input, 128 chars, no formatting, not searchable
- ministry_main_content, Ministry Main Content, textarea, 20 rows, XHTML formatting, searchable.
- ministry_contact_name, Ministry Contact Name, text input, 128 chars, no formatting, searchable.
- ministry_contact_email, Ministry Contact Email, text input, 128 chars, no formatting, searchable
- ministry_contact_phone, Ministry Contact Phone, text input, 128 chars, no formatting, searchable
This field group needs to be assigned to the Ministries weblog, but hold off on that until after the category group is in place and you can do both assignments at once.
Create Category Group - Ministries
Most churches have a small number of ministries and they tend to be targeted to different demographic groups - men, women, seniors, singles, teens etc. I want site visitors to be able to filter down the overall list of ministries to find the ones that are more relevant to them, so will use EE categories again to do that task.
Creating a category group was covered in Chapter 12 so I won’t cover it again in detail - just follow those steps to creating a new category group called Ministries.
Once the group is in place you can fill in some categories. Here’s the categories I’ve specified:
- for Kids
- for Men
- for Seniors
- for Singles
- for Teens
- for Women
I’ve specified a custom sort order such that kids are first and seniors are last. I’ve entered short descriptions, but at this point don’t think they will be used. I just want category links horizontally across the page on top of my ministry listings.
With the categories specified, I can now go ahead and connect the weblog to the field and category group. If you’ve forgotten where to do this it’s under Weblog Management > Edit Groups.
Create New File Upload Destination for Ministry Images
With all the data structures in place, now is a good time to enter some content—this way when coding the template you’ll be able to tell your code is working correctly and the formatting is what you want. In the fields for the new ministries section there are two fields for images - one for the thumbnail that appears on the index page and one for an image that will appear on the details page. These images will need to be created and uploaded to the server during the content publishing process.
If you like to keep your images organized on the server based on where those images are used on a site, now is a good time to get a new folder in place for the ministry-related images and setup a specific file upload destination. This step will also setup the site nicely for down the road when a new member group is created to manage the content. Member groups can be mapped to file upload destinations which will work out nice as churches tend to delegate content administration by section of the site.
Create the folder on the server first by logging in via FTP. I’ve created a ministries folder under the default images folder that EE installs with. Make sure the folder is writable.
Now back in the EE Control Panel do the following
- Navigate to Admin > Weblog Administration > File Upload Preferences
- Click edit on the existing Upload Destination
- Copy the server path
- Go back a page to the File Upload index
- Select “Create a New Upload Destination”
- Paste the Server Path into “Server Path to Upload Directory”, making sure to edit it to specify your new folder name
- Fill in the rest of the form as needed
- I’m allowing all file types since some ministries might want to post PDF versions of permission slips etc.
- I’m not applying any formatting or properties - I’d rather do that in the template
- For now I’m not going to assign rights to this destination - I’ll catch it later
- Submit the new Destination
Note - there have been times where I’ve had to work with the hosting provider to get the correct server path. This is why I like to start by copying an existing one that’s working. If you have issues here you might need to contact your host to verify the pathing requirements.
Publish Content
Now you’re ready to enter some content - for today’s purposes just make sure each ministry gets a 80x60 thumbnail image and a short description. I filled in each ministry completely - also uploading a 325px by 300px image for the details page (remember to now choose your new File Upload Destination when uploading the images), greeking for the full content, and made-up contact names etc.
I’ve uploaded images with “URL Only” option - choosing to put the actual img src tags in the template code. This will also allow me to pull the entry title and use it as the alt text for the image. Publish a couple entries per category so you’ll be able to tell if category views work and format correctly.
Creating a Ministries Template Group
OK - time to get to the template coding. By putting the ministries content in their own dedicated template group the URL’s will come out nicely - the index will be at:
http://yoursite.com/index.php/ministries/
and an individual ministry page will be at a URL along the lines of:
http://yoursite.com/index.php/ministries/detail/ministry-name
I’ve covered creating a new template group already so you should be able to do that - just name it “ministries” and save it with the default blank index template.
Editing the Ministries Index Template
Let’s do the two-step in reverse again here where I show the code and then talk you through it. As usual, I’ll also post this template in zip file below, along with the other updated templates needed for this chapter. Here’s the template code that’s driving the completed Ministries Index page:
{embed="embeds/html_header" my_title="Ministries"}
<body id="ministries">
<div id="wrapper">
{embed="embeds/page_header"}
{embed="embeds/main_nav" my_location="ministries"}
<div class="clear"></div>
<!--BEGIN CONTENT SECTION-->
<div class="interiorBox">
<h2>Ministries</h2>
<ul class="ministry_categories">
{!--Adds an obvious way to get back to the full list --}
<li>
<a {if segment_3==""} class="active" {/if} href="/index.php/ministries/">View All</a> |
</li>
{exp:weblog:categories weblog="ministries" style="linear"}
<li>
{!--The conditional in this line will cause the link to the currently-viewed category to be highlighted --}
<a {if segment_3==category_url_title}class="active" {/if}href="{path=ministries/index}">{category_name}</a>
{!--This conditional applies a separator bar to every link except the last --}
{if count < total_results}
|
{/if}
</li>
{/exp:weblog:categories}
</ul>
{exp:weblog:entries weblog="ministries" disable="trackbacks|pagination|member_data" orderby="title" sort="asc"}
{!--The switch variable handles applying the required different css to every other entry --}
<div class="{switch="staffBorder rtMargin|staffBorder"}">
<a href="{url_title_path=ministries/details}"><img src="{ministry_index_thumbnail}" width="80" height="60" alt="{title}" /></a>
<h4><a href="{url_title_path=ministries/details}">{title}</a></h4><br />
{ministry_index_description}<br />
</div>
{/exp:weblog:entries}
</div><!--END CONTENT SECTION-->
<div class="clear"></div>
{embed="embeds/footer"}
</div><!--END BODY WRAPPER-->
</body>
</html>
The first couple of differences are easy to spot - I’ve just changed out the my_title and my_location variables to reflect the new purpose for this template. Then the code moves into the category listing - which uses the same weblog categories tag as the church weblog code uses. The only difference here is that I wanted a persistent “View All” link to show on the left (rather than having it only show after a category has been selected), so that code appears before the weblog categories tag. A conditional applies the active class formatting if the URL doesn’t have any category indicators in it.
Then there is the weblog categories tag which is pretty straightforward, again using a conditional to apply the active class to the chosen category. Note that, like the weblog/index, ministries/index will also function as the category view -so the category links are pointing right back to this same template.
But then there’s this little chunk of code:
{if count < total_results}
|
{/if}
There’s some new stuff here so let me explain. Since the category names are going to appear horizontally (via some CSS rules I added to the stylesheet) I wanted separator bars between the links. What I didn’t want is a bar after the last category link. To prevent that I took advantage of two variables available within the weblog categories tag - count and total_results. The logic here is that by using this conditional I can figure out when the last category in the list is being displayed and skip applying the separator bar.
Got that?
OK - let’s move to the weblog entries tag that handles building out the list of ministries. The trick with this section of the page is that the source template uses two classes, and applies one to the entries that appear on the left:
<div class="staffBorder">
<img src="{site_url}images/interface/staff2.jpg" width="80" height="60" alt="pic" />
<h4>Exerci tation ullamcorper</h4><br />
Suscipit nisl ut aliquip ex ea commodo consequat velit esse molestie velit esse molestie.
<a href="mailto:moujaesrm@church.org">moujaesr&m@church.org</a>
</div>
and applies both classes to the entries that appear on the right:
<div class="staffBorder rtMargin">
<img src="{site_url}images/interface/staff4.jpg" width="80" height="60" alt="pic" />
<h4>Vel illum dolore eu feugiat</h4><br />
Nulla facilisis at vero velit esse molestie consequat accumsan et iusto.
Enim ad minim veniam quis nostrud exerci tation ullamcorper consequat.
</div>
and it then has a spacer in between rows:
<div class="spacer"></div>
How to handle this with ExpressionEngine?
The weblog entries tag has this handy little variable called switch. Per the docs “This variable permits you to rotate through any number of values as the entries are displayed. The first entry will use “option_one”, the second will use “option_two”, the third “option_three”, the fourth “option_one”, and so on.”
So what I did was specify the div classes using switch :
<div class="{switch="staffBorder rtMargin|staffBorder"}">
That nicely handles getting the “rtMargin” class applied to just the ministry listings that need to appear on the right.
So now, how about that spacer? That would need to go in between every two entries. Rather than puzzle out some logic to go into the weblog entries tag I took the easy way out and added a bottom margin to the staffBorder class. This let me just get rid of the spacer div altogether. Less markup is a good thing, right?
Let’s move on to the thumbnail code for a moment:
<a href="{url_title_path=ministries/details}"><img src="{ministry_index_thumbnail}"
width="80" height="60" alt="{title}" /></a>
I wanted to highlight this, as earlier I said to use the “url only” option when uploading a photo. This line of code shows the reason why - with just the url to the image (and not the full img src tag) coming from the weblog data I can use the entry title as a dynamic alt tag.
From there it’s all straightforward EE code - other than the fact that I’m pointing links to a ministries/detail template I haven’t created yet. That will be the next step in the site development.
Just as a reminder the folder names in the attached files should match your template group names, and the text file names should match your template names. Also—I haven’t covered the changes to embeds/main_nav - but it’s just updating the ministries link to be live and pointing to the new ministries/index template.
The next installment in the series will be detail pages for each ministry. Until then—here’s a question: Should the detail pages for each ministry allow comments from site visitors? It’s easy to do from an implementation perspective, but from a political/fear/what-if-someone-says-something-bad perspective it’s one of those decisions that might be tough to work through for your own church.
Years ago I implemented a church site and allowed comments on the church’s mission statement. The comment I got from a Pastor was “why would we allow anyone to comment or question that?”. My response back was “What’s it worth if you can’t or won’t defend it?”
I’ll leave you to puzzle on that one…
Category Navigation





by tzTrainEE
Date: Thursday, June 19th, 2008
Comment: #1
A certain amount of respect could be expected in the commenting but moderating a website is a learned skill, some comments just need deleted.
Did you experience any just plain rude comments that needed deleted then, Mike?
Some people have an axe to grind, not with a church I wouldn’t think. comments should be a plus sitewide. :)