Page 3 of 5 pages for this article « First < 1 2 3 4 5 >
How I Built One Of Us with Expression Engine
The templates
This should hopefully be the most interesting part of this article. I would have loved to see a working example of an EE template shown alongside the live site when I was developing One Of Us in EE.
The first template I’m going to talk you through is the content template from my oneofus template group. This template controls all pages under the news, articles, writing tips and features sections. It also controls the about, privacy and contact pages. View the template by downloading the text file below and open it up in your favourite HTML editor:
Header
In the head section of the HTML, you’ll notice that I use:
{exp:weblog:entries category="{static_page}" dynamic="off" weblog="content" status="static"}{meta-description}{/exp:weblog:entries}
for the meta-description. This allows me to edit the meta-description for every page via the edit page. I also use the same for the keywords.
The title tag is also populated partly by the
{title}
tag from EE, making this editable too:
<title>One Of Us Creative Writing Website - {exp:weblog:entries category="{static_page}" dynamic="off" weblog="content" status="static"}{title}{/exp:weblog:entries}</title>
Search
I told the search to look in the content and homepageblog weblogs (weblog=”Content|Homepageblog”). I only wanted a simple search and didn’t want to complicate things for my users by having an advanced search option. The
search_in"everywhere"
means that it will search all weblog entry fields (i.e. the title, the body, the recommended section etc.)
{exp:search:simple_form weblog="Content|Homepageblog" search_in="everywhere"}<label for="keywords" style="display:none;">Search:</label>
<input type="text" name="keywords" id="keywords" value="" size="18" maxlength="100" /> <input type="submit" value="Search" class="submit" style="font-size:1.1em;" />{/exp:search:simple_form}
Navbar
My navbar (the horizontal list of links showing the main site sections) consists of an unordered list which is then styled to look how it is.
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="{path="news"}" {if seg_1 == "news"}class="current"{/if}>News</a></li>
<li><a href="{path="writing_tips"}" {if seg_1 == "writing_tips"}class="current"{/if}>Writing tips</a></li>
<!--<li><a href="{path="writing_resources"}" {if seg_1 == "writing_resources"}class="current"{/if}>Writing resources</a></li> taken out until the content is sorted -->
<li><a href="{path="articles"}" {if seg_1 == "articles"}class="current"{/if}>Articles</a></li>
<li><a href="{path="features"}" {if seg_1 == "features"}class="current"{/if}>Features</a></li>
<li><a href="/forums/index.php">Discussion forums</a></li></ul>
This is the first example of the wonderful
{if}
conditionals that I use. Never underestimate how useful this can be. In this example, I wanted to style the link differently if this was the current section that you were in. As the first segment in my urls matches the sections of my site I simply told EE that if segment 1 is the same as the segment that you’re in, then apply a style to the link.
(Please note that the
seg_1 == syntax
differs slightly if you’re not using the static pages module.)
This is what the navigation bar looks like:
Click on the image to view a larger version.
I link to my forums from this menu and as it’s a hard-coded link, it works fine.
Posted by oneofus on 27 September at 10:19 AM