Web Inception

How to Skin an ExpressionEngine Website in One Easy Step

2009-06-05T07:05:34+00:00

1. Go find a CMS that forces you to skin it.

Wasn’t that easy?

I read something earlier that got me thinking about the way people customize websites that they build in a content management system. So I laid this twegg:

I realized that my tweet comes off as sort of elitist, so I decided to expand upon the thought in this article. Keep reading and you’ll see why I took that angle.

Let’s be clear on this one major point: You don’t “skin” a website in ExpressionEngine. You start with a blank slate. Sure, you can purchase pre-built templates for ExpressionEngine, but there are not hundreds of design shops churning out templates for ExpressionEngine for sale, as there are with many other popular content management systems. The few developers that reputably sell well-built templates for ExpressionEngine (such as Marcus Neto’s eetemplates.com linked above) are integral to the ExpressionEngine community. They contribute to and learn from the EE community that exists on the forums, Twitter, Facebook and other social sites. They know the system well and the product they sell is as top notch as any client site they or I have ever built.

I’ll tell you a story that I have told several times, which has been useful in demonstrating several different points about competing CMS systems. I used to rent an office space from a web shop that had made a business decision to standardize on Joomla, much in the same way that I had chosen to standardize on ExpressionEngine. They had quite a few clients, as did I at the time, and we regularly compared notes about our chosen system.

But more vital than the conversations we had together were the conversations I heard from my office between the members of their team. I’d be working away and hear them spend hours, no, days fighting against a template they had purchased that barely resembled the design that their contracted designer had given them. They’d be tearing apart a “skin” that they had bought, revamping the CSS and imagery to try and ramrod the designer’s look and feel into it. They’d install and remove and move modules called “topupperleftmenu” and “redleftnavsearch” and “subsubfooter” around trying to get them all to line up with the shoehorned new design elements.

I finally got an explanation out of the technical director one day. They had plenty of expertise to write HTML, CSS and Javascript. But Joomla’s method of assembling the parts of a site were so difficult to work with that the company had decided it was easier to bastardize a pre-built template that had all the right functionality (drop down menus, newsletter subscribe forms, etc.) and looked completely different, than it was to build the site functionality and templates from scratch in the CMS.

The designer, after several of these types of projects with them, had but one comment, and I remember it clearly. “I am scared of CMS systems because the sites never look like what I designed.” She and I collaborate on ExpressionEngine-based websites regularly these days.

Now, I’ve never worked with Joomla, so I am not saying it can’t be done easily. But this is my experience working for months next to a shop who had chosen this platform as a business decision.

Back to the topic at hand. Exactly how does one skin an ExpressionEngine site? One doesn’t. Once you remove ExpressionEngine’s default demo “site” templates and weblog settings, you have a 100% blank slate. Call your designer and instruct them to design to their heart’s content. Make it gorgeous and abstract and functional. Meet the client’s needs. Enhance the usability. Whatever the final design, ExpressionEngine can accommodate it. ExpressionEngine assumes nothing about your site. Until you define the types of information and pages that you want to include in your website, no pre-existing elements even exist in ExpressionEngine for you to skin. When I say blank slate- I really mean it.

I have built somewhere around two dozen ExpressionEngine sites as of the time of this writing. A few have been massive undertakings with hundreds of entries, categories and custom fields. Dozens of templates and embedded templates. A few have been your average corporate site with typical business needs. And a few have been the most simple this-really-should-just-be-a-few-HTML-pages type sites that are CMS enabled for ease of future maintenance. Its pretty easy to find examples of huge, and I mean gargantuan, sites run with ExpressionEngine that perform flawlessly and conform precisely to the pixel perfect vision of the designers involved.

The process is very similar to designing a static site.

Create the design with real or placeholder imagery and data in Fireworks or Photoshop
Slice it up and build the HTML/CSS/JS files
Create a blank template in ExpressionEngine
Paste in the HTML
Setup your CSS files (either through EE or standalone)
Upload the images to the file system
Make sure everything displays correctly in a browser
Cut out the common header, footer, and other elements into their own embedded templates
View your web page in a browser, just as the designer intended

Really, that’s about it. It can become a lot more complicated, but in reality, that is the very basics of what we do on every site to get it started. There is not a single function or design element that I haven’t been able to implement using the core ExpressionEngine functions or some of the excellent community-built add-ons that are readily available.

Plain and simple, ExpressionEngine does not limit your creativity by forcing you to use pre-built templates or functional elements on your page. There is no skinning. What there is, is taking any website design you can imagine, and knowing that ExpressionEngine will allow you to use it exactly as it was intended. With no skin off your back.

(No Joomla devs were harmed during this article writing.)

Starting Point: My List of Default ExpressionEngine Extensions, Modules and Plugins

2009-05-27T18:35:03+00:00

I start each ExpressionEngine site with a much larger bank of add-ons than most (if not all) of the blog posts you have read along this topic. My point of view is that it doesn’t hurt to have them in place in the file system of a website, and if I need them, it’s much quicker to just enable them and get back to work.

I used to keep a fresh ExpressionEngine website install on my machine, with all my favorite add-ons in place in the correct system folders, ready to FTP up to a new dev site. But each time EllisLab updated the ExpressionEngine build, I’d have to build the fresh install all over again.

These days, I keep a folder called ee_files on my system, and in that folder I have these subfolders:

english
extensions
icons
js
modules
plugins
themes

Discussing the icons and js folders is outside the scope of this article, suffice to say that I use a common set of icons on most sites and drop that folder into the /images/ folder, and the js folder houses jquery plugins that I commonly use.

The english folder holds the english language localization files for all of the ExpressionEngine add-ons that offer them, so there isn’t much to tell about that. This leaves us with extensions, plugins and modules. Below, I’ll list each that I install by default and why.

Extensions

Accessible Captcha - This simple extension transforms the standard ExpressionEngine captcha into a more accessible version in that screen readers and low vision users can process it more easily. As of this writing, this type of captcha is also a little harder to crack than the default one, as the type of Q&A it involves is typically something a bot can’t process. The extension allows you to enter up to 8 questions and answers for use in the captcha. A good example that I typically use is “The colors of the American Flag are red, white and ?”.

Advanced Captcha - I leave this in my default install for times when the client doesn’t want the above Q&A type captcha. This makes the default ExpressionEngine captcha a little more spam proof by adding in more numbers and letters.

Akismet - Akismet is one of the longest running spam prevention tools, and I think it still works pretty well. This will check comments left in your ExpressionEngine install against the Akismet spam algorithms and automatically hold any suspected spam comments in quarantine for approval.

Cloner - This extension comes in handy when you need to fill in a lot of demo entries in a development site. Simply install Cloner and you’ll see a new column in the Edit entries list. Click the ‘clone’ link for the appropriate entry and it gets cloned and you are taken right to the edit screen for the new version. A quick way to make dozens of dummy entries to test with.

Comment Spam Prevention - Like Akismet above, this extension helps to quell comment spam on an ExpressionEngine site.

DC Required Category - Forces the user to select at least one category for every new entry in a given weblog. Very useful!

DC URL Field - A nice little tool that creates a URL text field. It will validate the field as a URL on submission. Also links an icon next to the field to the URL for easy link checking.

Disable News Feed - In the never ending quest to simplify the CP, this extension automatically hides the EllisLab newsfeed on the CP homepage from any user who has CP access.

Edit Tab Ajax - A true must-have. Uses ajax to quickly reload the list of entries on the Edit tab whenever the filters at the top of the page are changed. Really speeds up your time finding entries in the CP.

Entry Notifications - Solspace made a gem with this one. Allows granular customization of email notifications sent out when entries are added or updated in any given weblog. I don’t need it often but its really useful when required.

EZ Category Checkboxes - Turns the category list into one with checkboxes to select each category rather than a multi-select list. Much more user friendly.

Edit Menu - Adds a javascript drop down menu to the Edit tab allowing you to enter the Edit screen already filtered into a specific weblog.

Fieldframe - Brandon Kelly’s killer custom field wrapper. Includes quite a few default field types like radio group, checkbox group and checkbox, and allows people like us to make new fields really easily.

File - Mark Huot’s File extension is probably Titanic of ExpressionEngine- some people love it, some hate it. Me? I love it most of the time. I build a lot of sites with stand alone entry forms and it is still the best choice for file uploads in that situation.

Hidden Weblogs - Allows you to hide certain weblogs from the Edit menu. This can help keep some users from seeing specific weblogs in the CP.

LG Add Sitename - Clients always like to see their name in lights.

LG Htaccess Generator - Automates the process of removing index.php from your URLs. Also allows you to insert other custom htaccess rules.

Low Seg2Cat - Loops through the segments of the current URI, matches them against existing categories, and registers the matching categories as global variables, which you can use in your templates. On a site where you need this, you can’t get by without it.

MD Character Count - Allows you to limit textarea fields in the CP to a specific number of characters. Provides a counter next to the appropriate textarea as well.

MD Dulee Noted - Place informational text and images into a non-editable field within your weblog entry/edit form. Allows you to add any CSS formatting to the field and really works well to divide up long forms into sections.

MD Live Search - Places an ajax search box in the upper right corner of the CP that searches entries.

MD Simple Relation - As opposed to Playa (below), this is the most simple entry relationship tool out there. Just places the entry_id of the related entry into the database, skipping the relationship lookup table.

Playa - The mother of relationship extensions. I think this one is certified to marry you.

Publish Improve - Another extension that allows you to simplify the CP for your clients. Includes quite a few options.

SAEF Enctype - Used in combination with MH File or another SAEF file upload extension, this changes the form attributes to multipart so that file uploads can occur. Don’t forget to make it smarter using Masuga’s modification.

Simplify Edit Table - Another way to simplify the CP. If your site doesn’t use comments, this will hide a few columns on the Edit tab.

SL Freshview Subscribe - If you are a Campaign Monitor fan, this ingenious extension allows you to subscribe new members to a CM subscriber list when they sign up on your ExpressionEngine site.

Plugins

Form Helper - Solspace’s brilliant (and free) Form Helper is your best friend if you are working on a site with stand alone entry forms. It allows you to grab information from existing entries in the database for use in SAEF edit forms, as well as other handy functions.

ImgSizer - Possibly the best add-on around. Resizes and caches images on the fly throughout your site. Once an image is cached, that version is used in the future when the page is loaded, cutting down on load times. The beauty is, your client can upload images as large as they want in the CP, and they always look perfect on the front end thanks to ImgSizer.

LG Replace - I used Reeposition for quite a while, until I ran into a situation where it wouldn’t move the data for me. Luckily LG Replace does exactly the same thing, but a little bit better. This allow you to grab data from the database and store it in one or more variables, and then place it anywhere you want farther down the page (after you have closed out your weblog tag). Extremely useful!

MD Detect Page Type - Analyzes the URL structure to decide if the page is a category list, a non-category list, or a single entry page. Then, show specific content based on what type of page it is.

Pops - I bet most of you have never seen this one. Its a beaut! If you create stand alone entry forms, this allows you to easily grab data from your custom fields and display it in your forms. Some of the functionality overlaps with Form Helper, but Pops is simple and quick to use.

Title - Another hidden gem! Place this on a single entry page and specify which weblog you want, and this plugin grabs the title of the entry with a minimum of overhead.

Modules

Deeploy Helper - Places most of the configuration options for your ExpressionEngine install on a single page where you can easily and quickly edit them without clicking around.

Freeform - A versatile form collection tool that allows you to take forms on your site above and beyond what ExpressionEngine provides in its default system forms.

Fresh Variables - A nice tool where you can store snippets of content for use on your site. These variables are parsed early so they can be used on weblog tags and other functions of your templates.

Reeorder - Allows you to specify a field (and hide it from CP users) that holds the entry ordering data for any given weblog. Then, just enter the Reeorder screen and move entries up and down to create a custom order for them. In your templates, you can now sort the entries by your custom field.

Sitemap - A great tool for automatically generating an XML sitemap of your website whenever entries are added to the system. Also allows you to add static pages to the sitemap.

User - If you need to allow members of a site to add or edit profile information, email addresses, passwords, etc, this is the only way to go. It makes child’s play of allowing members to edit their own information on the front end.

Had Enough?

I’ll reiterate that having all these add-ons in place on a site doesn’t add any overhead to the site’s processing. If you leave them disabled, they don’t hurt the site performance in any way. So there is no reason, if you use an add-on relatively frequently, not to have its files in place on every site you start. It really does save time.

Since Devot:ee launched, I’ve uncovered a few more add-ons that I haven’t placed into my fresh files pile yet, so I’ll probably revisit this post in a little while and add a few more to it.

Until then, I hope you find something new here that helps you get your job done faster and better. I tell everyone who will listen that ExpressionEngine has the most solid and knowledgeable community of developers in the industry, and there is some fine peace of mind knowing that when I turn to these add-ons to extend ExpressionEngine, that they will work well, and that the people behind them will be there to help out if necessary. So, thanks EE community… they can’t stop the bum rush!

Creating Text Snippets in ExpressionEngine Sites

2009-04-08T06:32:00+00:00

Over time I have developed a tool I call Text Snippets within ExpressionEngine sites I build. Between my text editor’s (Textmate) snippet-pasting ability and ExpressionEngine’s flexibility, this has become one of my favorite tools to use.

Why not use Pages, Global Template Variables or Fresh Variables? A few reasons.

Pages I tend to reserve for full pages of text that may need to be editable by a client. My Text Snippets are usually chunks of text that are somewhere between a sentence and a few paragraphs. One of the most useful placed for Text Snippets is on a page with any kind of form. You may have a form with some textual content above the form, or a disclaimer below the form, or something else, and these may be chunks of text that you want to allow the client to edit. With Text Snippets, they can easily edit this content without affecting the form or anything else on the page that you don’t want them touching.

Fresh Variables and Global Template Variables work great for this type of chunky text, but when was the last time you wanted your client in the Templates tab of the Control Panel? And frankly, I like to keep them out of the Modules tab as much as possible as well. Beyond that, two benefits of Text Snippets over Fresh Variables and Global Template Variables are that they allow XHTML formatting, as with any typical ExpressionEngine entry. Secondly, Text Snippets live where the client is used to going to edit content, in the Edit tab. By using simple naming conventions for your Text Snippets, the client can search for all Text Snippets on a particular page, or in a particular section of the site.

Despite all these benefits, the main shortcoming of Text Snippets is that they become parts of pages that aren’t searchable. You can make the “content” field of Text Snippets searchable, but if it shows up in a search result, where exactly would you send your user to view the page where it lives? I’ve used a few different methods, but it differs based on the client needs.

Well, please enjoy this 10 minute screencast that shows you how to setup and use Text Snippets. I hope you find this to be a useful tool for your ExpressionEngine websites. Also, if you click through to the Vimeo page where the video is hosted, you can download a larger, .mov Quicktime version of this screencast for better viewing if you wish (look on the lower right side of the page).

Here is the code for my snippet in Textmate

{exp:weblog:entries weblog="snippets" url_title="snippet_url_title" disable="categories|category_fields|member_data|trackbacks|pagination" rdf="off" dynamic="off"}
    {content}
{/exp:weblog:entries} 

This code should work in any editor, and if you editor allows you to place your cursor automatically, be sure to place it between the url_title quotation marks. For best results, be sure to name your weblog “snippets” and your custom field “content”. With these in place, the code above should work flawlessly.

SXSWi 2009 Wrap Up, Specifically, ExpressionEngine 2 Preview

2009-03-19T21:53:00+00:00

My first SXSW has come and gone, and let me tell you, it’s the gift that keeps on giving. I caught a fever on the plane home and am still suffering from the “SouthBy Scurvy” two days later. Nevermind though, as the sickness is totally worth what I got out of the conference.

The rookie mistake my friend Bill Johnston and I made was staying at the Sheraton, which was way down on 11th st. That added quite a few $6 cab rides into the mix. Next year, its the Hampton Inn (close, free wifi and free breakfast). We didn’t let it bother us, though, and went with the flow, which was the best way to deal with the entire week.

As for the panels and talks, I could have taken or left them, as most were not terribly engaging. I certainly understand that these people can’t be expected to be everything to everyone, so I hope some other people derived more value from the sessions. The best one I attended was the Spec Work panel, in which the insult slinging between the Threadless (99designs) guy and Crowdspring guy was pure entertainment, and the crowd loved it.

The CSS3 panel made me mad, and I really wish I had gotten up and spoken my mind at the microphone. While these panelists from Opera, Mozilla and IE showed off what can be done with full CSS3 implementations, they then proceeded to beat around the proverbial bush about getting consensus on a number of issues. By the end of it, I felt like we had a lot of people at a lot of companies with a lot of engines thinking about a lot of methods for implementing a lot of features. And were supposed to feel like this is helping us? I challenge you, Molly, and your CSS working group to help me. Help me be more efficient for my clients, help me pay my mortgage and feed my kids. This stuff shouldn’t take multiple years.

The parties were insane. Frankly, I am a 34 year old married guy with a 1 and 3 year old, and my nights end about 7:30pm every night. It was so much fun to stay out so late and remember the old days… I went to a mix of parties and dinners with new and old friends. I had a pretty unique experience because my travel buddy Bill is very well known in social media circles and ran into people he knew everywhere. So I met a lot of people outside the development circle that is my comfort zone, and ended up having some really enlightening conversations that expanded my knowledge of the space, and people were interested in what I had to say as well, as an outsider. By far the best night was being on the rooftop at Six at the Mashable party. It was a gorgeous night and it was such a great time. I hear that is Lance Armstrong’s place, and that was kind of neat in that my son’s middle name is Lance, after one Mr. Armstrong.

ExpressionEngine was a recurring theme throughout the week for me, whether it was Saturday night’s EllisLab party, Monday’s Kaylee preview, or just talking shop with EE devs all week long. The funniest thing was that several people came up to me out of the blue and wanted to meet me, knowing who I was when I didn’t know them. Thanks for feeding my wannabe rock star ego, you have no idea what you started The best thing was meeting people I look up to in the industry and feeling like an equal- it was clear that all opinions and levels of experience were respected. I spent an hour with Ryan Irelan and Mike Boyink in the Hilton Lobby and we discussed quite a few intricate details of being an EE dev. On a different day I talked for an hour with Kenny Meyers of Blue Flavor and Mitchell Kimbrough and his Solspace team where quite a few other topics surfaced.

Though the EllisLab party got overrun with moochers, about twenty of us had the pleasure of attending the World Domination meeting off in a different room where some big ideas from EllisLab were discussed with big wigs and little wigs alike. Lots of great information all around. Of a different value was Monday’s lunch with EllisLab, followed by a demo of ExpressionEngine 2 by Derek Allard. Derek showed us lots of control panel bling and how functionality mapped to underlying controllers and functions in CodeIgniter. Suffice to say, already knowing some CI, i could see exactly how things were happening and I’ll be able to jump right in to customizations. You will all be very happy. The enhancements to the CP were welcomed and will easily trim 20-40% of your setup time off by making multi click tasks doable in one or two clicks without leaving the page you are working on. The organization of the new CP is also a welcome change. Boyink has summarized some other functionality changes in his blog. Along the way, Derek took notes about our ideas and concerns and invited us to send in some further suggestions. EllisLab is very committed to making us happy. I have no doubt they will succeed.

All in all, it was a fantastic experience, not for those that get nervous around germs. People are very friendly and just as anxious to meet you as you are to meet them. And we all have something in common… getting out from behind the monitor once a year to be “social”. See you next year, Austin.

Premier Land Advisors

2009-02-11T21:41:00+00:00

Premier Land Advisors is a recently formed company that will focus on evaluating, packaging and helping to find buyers for distressed land investments. The four partners approached Web Inception to produce a website for the new venture with designs provided by one of the partners’ long-time print graphic designer.

This site, historically, would have been built with HTML pages, as it is really just a simple brochure style site. However, the partners wanted the ability to quickly edit the site content and add case studies without intervention from Web Inception or any other technical resource.

To achieve this goal, we set them up on an ExpressionEngine site, which merged beautifully with the designs they had already created. Though many of the website pages won’t change very often, the ability to quickly make changes is very important as the company grows out of it’s infancy and defines its place in the market.

While creating editable pages in a website built with ExpressionEngine is no real trick, we built this site to be 100% editable. Using the Fresh Variables module, every piece of content from the names of the global navigation menu choices to the names of the field labels on the contact form can be updated by the client. Even the image on the homepage resides in its own editable weblog entry in the control panel.

This effectively makes every single piece of content on the site editable, which makes the site easy to maintain. We not only met the goals set by Premier Land Advisors, but went beyond the scope to allow them maximum flexibility with minimum effort.

Displaying Entries and Pagination in our ExpressionEngine Website

2009-01-24T23:24:01+00:00

I’m embarassed to say that its four days shy of four months since the last article in this series. Between travel, kids, client work and the holidays, who has time to write? Well, I am back and have re-read all of the previous installments to this series on BabyFilter.com. I am happy to say that, other than a few minor changes to my workflow, everything you’ve read still is current and completley applicable to the project.

Way back in September, I wrote in the last article about listing out our Topic categories in the left sidebar of the site. To refresh, take a quick look at the staging site.

Today, we’ll focus on getting Topics onto the homepage, the main Topics page, and the individual Topic pages. I spent a couple of hours creating member accounts for all the members of the old site and entering their old topics. This gives us some nice data to work with as we set up the site. I haven’t brought any comments over yet, so all of our topics will reflect 0 comments for now.

Showing Entries on the Homepage

Let’s quickly take stock of the current homepage code:

{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}

    <p>Content</p>

{embed="includes/footer"} 

Pretty simple. We’ll want any content on the page to fall between the header_bottom embed and the footer embed. On the current site, you’ll see we have a boxed in introduction paragraph, followed by a date-based listing of topics, with the most recent one at the top. We’ll skip the intro paragraph for now and concentrate on the topics.

The first thing I will do is replace the placeholder Content paragraph with a typical ExpressionEngine weblog entries tag.

{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}

    {exp:weblog:entries weblog="topics" disable="categories|category_fields|member_data|pagination|trackbacks" rdf="off"}
        
        <div class="topic-list-box">
            
            {title}
            
        </div>

    {/exp:weblog:entries}

{embed="includes/footer"} 

Some things to note: I have specified the weblog and disabled quite a few types of data in order to speed up the rendering of this list of Topics. One thing I didn’t include in the disable parameter is custom_fields. We’ll be relying on quite a few custom fields in the Topics section.

I’ve created a div called topic-list-box to wrap each topic in so that we can style each one as necessary. I won’t show you the full code from the old site; since it is PHP its pretty long. But, here is the format we want to get to for each topic-list-box div:

<p class="datehead">May 14th</p>

<p class="postsum">Does anyone know of a travel website that has recommendations of places to rent for vacation that are kid-friendly?  We are currently looking for a place in Lake Tahoe, CA and I cant find anything that specializes in &quot;kid-friendly&quot; (ideally somewhat childproofed) rentals (homes or condos).  I am also looking for something in Kauai.  Does anyone know of a website that can help?</p>

<p class="postbyline">posted by smj1 to <a href="/category.php?id=25">Travel</a>  at 5:10 PM PDT - <a href="/post/?id=91">0 responses</a></p> 

I’ll likely clean up those class names later to make them more appropriate to the data we are showing, but for now let’s just keep them. I’ll skip the p class=“datehead” date header right now and focus on the topic data.

So, by combining our new ExpressionEngine template with the content from the old site, here is the framework for the div with the static data:

{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}

    {exp:weblog:entries weblog="topics" disable="categories|category_fields|member_data|pagination|trackbacks" rdf="off"}
        
        <div class="topic-list-box">
            
            <p class="postsum">Does anyone know of a travel website that has recommendations of places to rent for vacation that are kid-friendly?  We are currently looking for a place in Lake Tahoe, CA and I cant find anything that specializes in &quot;kid-friendly&quot; (ideally somewhat childproofed) rentals (homes or condos).  I am also looking for something in Kauai.  Does anyone know of a website that can help?</p>

            <p class="postbyline">posted by smj1 to <a href="/category.php?id=25">Travel</a>  at 5:10 PM PDT - <a href="/post/?id=91">0 responses</a></p>
            
        </div>

    {/exp:weblog:entries}

{embed="includes/footer"}

Now, to take this one home, let’s replace the static data with the correct fields that we created earlier:

{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}

    {exp:weblog:entries weblog="topics" disable="categories|category_fields|member_data|pagination|trackbacks" rdf="off"}
    
        <div class="topic-list-box">
        
            <p class="postsum">{title}</p>

            <p class="postbyline">posted by {author} to <a href="/category.php?id=25">Travel</a> on {entry_date format="%D, %F %j%S"} at {entry_date format="%g:%i"} - <a href="/post/?id=91">{comment_total} responses</a></p>
        
        </div>

    {/exp:weblog:entries}

{embed="includes/footer"}

I didn’t replace every single variable yet, but I did get the basics in there. You can see here that we are already well on our way:

Limiting the Number of Entries

The next thing that needs attention, though it is unique to this situation, is the entries being shown. Typically, ExpressionEngine will show all entries with a status of Open and an entry date prior to right now. When I recreated these topics in the new system, I forward dated them exactly two years. That means that some of them have an entry date of late 2008/early 2009, and some have an entry date after today. The system is not showing any entries in our list that have an entry date after today. In order to show these, I will add show_future_entries=“yes” to the weblog entries tag.

{exp:weblog:entries weblog="topics" disable="category_fields|member_data|pagination|trackbacks" rdf="off" show_future_entries="yes"} 

That’s better. You may or may not want this functionality based on the needs of your application.

Linking to the Author’s Profile

Finally, we’ll want to add some if/then code to allow a link to the author’s profile. If the viewing user is logged in, they’ll be able to click the author’s screen name to find out more about them. If the user is logged out, no link. Here is the code we’ll be working with:


posted by {author}

We’ll need to change it to this:

posted by {if logged_in}<a href="{path=member}{author_id}">{author}</a>{/if}{if logged_out}{author}{/if} 

This simply shows a link to the author’s profile if the user is logged in. Note the link syntax; in order to get a slash and then the author_id correct in the URL, separate the path call and the author_id call into separate ExpressionEngine tags.

Linking to the Single Entry Page

Now we just need to update the link to the individual topic itself. We’ll use the URL Title so that we get readable URLs, so we need to replace this


<a href="/post/?id=91">

with this


<a href="{url_title_path=topics/view">

Very simply, if we have a topic with the URL Title “my_topic”, the link created by ExpressionEngine will be /topics/view/my_topic/.

The Date Header

The only thing left to do is display the date header. I’ll tackle that, for the most part, in a later article. For now, we’ll just add each topic’s date above it so the layout element is in place. Above the topic data, I’ll place this code:


<p class="datehead">{entry_date format="%F %j%S"}</p>

For the homepage I only want to show, say, the 10 most recent topics. This is easily accomplished by putting a limit into the weblog entries tag:

{exp:weblog:entries weblog="topics" disable="category_fields|member_data|pagination|trackbacks" rdf="off" show_future_entries="yes" limit="10"} 

I’ll throw a link at the bottom of the list, after the closing weblog entries tag, that allows users to read more topics (on the main Topics page) so there is a call to action at the bottom of the page.

So, here is our entire code for the homepage, which is, for now, done:

{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}

    {exp:weblog:entries weblog="topics" disable="category_fields|member_data|pagination|trackbacks" rdf="off" show_future_entries="yes" limit="10"}
    
        <div class="topic-list-box">
            
            <p class="datehead">{entry_date format="%F %j%S"}</p>
        
            <p class="postsum">{title}</p>

            <p class="postbyline">posted by {if logged_in}<a href="{path=member}{author_id}">{author}</a>{/if}{if logged_out}{author}{/if} to {categories}<a href="{path=topics}">{category_name}</a>{/categories} on {entry_date format="%D, %F %j%S"} at {entry_date format="%g:%i"} - <a href="{url_title_path=topics/view}">{comment_total} responses</a></p>
        
        </div>

    {/exp:weblog:entries}

    <p><a href="{path=topics}">Read more topics ></a></p>

{embed="includes/footer"}

It’s really quite simple.

The Main Topics Page

Now, since it is so easy, I’ll use this same code to show entries on the main Topics page. Right now, the /topics/index template blank. I’ll first copy the entire homepage template and paste it into the /topics/index template.

To make the main Topics page do what we want, we just need a few adjustments.

Change the “title” variable in the header_top embed to “Topics”
Change the “loc” variable in the header_bottom embed to “topi”
Change the “limit” parameter in the weblog entries tag to 15
Remove “pagination|” from the disable parameter of the weblog entries tag
Add paginate=“bottom” to the weblog entries tag
Remove the “read more topics” paragraph tag and link from the bottom of the page

Save it and upload, and click over to the main topics page and you should see a page identical to the homepage, but with a different title, more topics, and if we had a style for the “you are here” main menu item, an indicator of that. Really, this is all we need on this page, except for pagination.

Pagination

ExpressionEngine pagination is pretty easy. I have a pre-written block of code I use for it:

{paginate}
    {if "{total_pages}" != 1}<p class="pagination">Page {current_page} of {total_pages} pages {pagination_links}</p>{/if}
{/paginate} 

This, along with the changes we made to the weblog entries tag above, places a nicely functioning set of pagination links at the bottom of the page. Since we’ve wrapped it all in a p tag with a class of “pagination”, we can easily style it later. The links will update automatically based on how many pages worth of topics are in the system. You can use the “limit” parameter to show more or less topics on a page and change the total number of pages for the section, if necessary.

Well, I think that is quite enough for this resurrection. Here’s to hoping I can continue this next week!

Series Introduction
Previous Article in Series

Web Inception Joins the ExpressionEngine Pro Network

2008-12-31T22:56:00+00:00

Web Inception has been admitted into the ExpressionEngine Pro Network. This is an elite group of web development companies and freelancers that are recognized for their expertise in building websites with the ExpressionEngine content management system. The community of designers and developers using ExpressionEngine is very large and passionate, and only about 50 organizations have been labeled ‘Pro’ by EllisLab, the software development company behind ExpressionEngine.

To be considered for the Pro Network, specific requirements must be met and certain standards of web programming and design adhered to. Web Inception lead developer Chad Crowell is “overjoyed to have some recognition that all those years of learning web standards and all those late nights pouring over the ExpressionEngine docs and forums have resulted in our admission to the Pro Network. We are certainly in fine, fine company. I’d like to thank Rick, Derek, the other Derek, Leslie, Lisa, and the whole team at EllisLab for building such a fabulous, flexible product that makes our development lives so much more enjoyable.”

View Web Inception’s full Pro Network profile.

Web Inception Launches New Website ‘Bellevue First Congregational Church’

2008-12-22T07:32:00+00:00

Web Inception has launched anew website for client Bellevue First Congregational Church, of Bellevue, Washington, USA. The site is built on the ExpressionEngine content management system and features a site design that emphasizes organization of information, earthy, grounded colors and a strong tie to the faith history of the church.

The site replaces a manually-updated HTML site that required regular maintenance in order to stay up to date. The new site allows over a dozen content managers to create and edit information on the site using ExpressionEngine’s exceptionally secure membership system.

Web Inception built several custom plugins for the site to add functionality beyond ExpressionEngine’s core system. These functions, along with typical core functions, allow FCC BEllevue to bring the strong ties of their community-based church onto the website. Some sections of the site that emphasize social aspects are the Community Groups area, the secure Members area, and the Events and Volunteer Needs areas.

Church sermons are also being made available as a podcast in iTunes or through Feedburner. Site visitors can also listen to the sermons on the website through a Flash audio player.

Please visit fccbellevue.org, or read our case study for more details about the project.

Bellevue First Congregational Church

2008-12-22T04:49:01+00:00

Bellevue First Congregational Church in Washington has a long history, and the city of Bellevue has grown up around it. David and Bob approached Web Inception having already figured out that ExpressionEngine was the right tool for their new site. In fact, they had spent almost a year planning a site before deciding that they needed professional assistance to create the site they were hoping for.

We took over and, after some extensive getting-to-know-you meetings, provided three rich designs for them to choose from. The design they chose is rich and engaging while providing plenty of room for the vast amount of information on the website. A few revisions later we had a solid design that was ready to be integrated into the ExpressionEngine template system.

The site is a combination of static pages and dynamic data. Lots of dynamic data. Announcements, events, sermons, pastor reflections, members directory, and much much more. Combined all that data with over a dozen content managers on staff, and and regular website could turn into a disaster of content management. Instead, with ExpressionEngine, different content managers can access just the sections of content that they need access to, reducing confusion. When content is created or edited, managers are notified via email so they can verify and approve the changes. The result is a multi-level system for creating and verifying information as it goes live on the website.

Some of the features the church requested were not native to the ExpressionEngine system. Thanks to the flexible architecture, we wrote several custom plugins for the website to create the desired results. These functions really helped to bring the community aspect of the website into focus. Members can join church groups, right on the website. Once joined, the member automatically will receive mass email messages from the group leader to the group. The member can also leave a group at any time, or even create a new group that suits their own interests.

Calendaring is very important with the church. We developed a standard events calendar, and a more advanced volunteer calendar that allows members to volunteer for events where help is needed. The event coordinator is always kept in the loop on their volunteer list via email.

We also wrote a neat plugin for the sermons and pastor reflections sections of the site. By supplying a short list of biblical verses referenced in a given sermon or reflection, the website will display the entire text of the verses referenced. As well, we implemented a podcast of the weekly sermon audio, allowing members to subscribe to new sermons and be notified automatically of new sermons in iTunes or any other feed reader.

The beautiful design, in concert with advanced functionality and social elements have resulted in a rich, engaging new experience for members and visitors to the Bellevue First Congregational Church Website.

Forum One Networks

2008-10-02T22:41:00+00:00

Forum One Networks came to Web Inception for our help with the design of a new logo. The Green Enterprise Unconference is a gathering of professionals leading social responsibility, sustainability or environmental concerns and social entrepreneurship programs in their organizations.

Those involved with green initiatives in the Enterprise are faced with driving change within their organization, while simultaneously learning. The best source of information for green professionals is the perspective and experience of other green professionals. The Green Enterprise Unconference is inspired by the “open space” conference format, which puts control of the event content in the hands of the attendees. (For a good description of an unconference event, see http://is.gd/21Nf). The Unconference format allows the best ideas of the group to come forward, facilitates extensive networking, and ensures thorough documentation of the proceedings.

The event will be held on December 3rd, 2008 in Mountain View, Ca. For more information, or to register, visit http://greeneu08.eventbrite.com/.