May 29
The Expression Engine phase of my new blog
2006 at 01.37 am posted by Veerle
Most of you will already know that I use Expression Engine as tool for my site (further referred to as EE) and that I enjoy working with this tool mainly because of its flexibility and user friendlyness.
Today I want to unveil some of the EE implementation of my site, in particularly the template part. No real secrets there, but I can imagine that some people are considering EE as blog tool and I want to give them an introduction. I'll explain how I implemented : my header, the last 2 months on my archive page and my related links. This is of course how I did it, no idea if there are better and more efficient ways. Anyhow, this method works for me and I like to share this with you.
General setup and templates of my site
First off, let me introduce you how my site is set up in general. Maybe not that well known but you can set up several blogs with EE in a very easy way. No multiple installs etc. just click "Create new Weblog" in the Weblog Management. You can use a different weblog for each section and change the word "weblog" to the word "section" (or another word) if you like. There is a lot more to tell you how to get your site organized. The best thing to do is to analyze the structure of your site and decide from there if the sections will be treated as 'categories' or as separate 'weblogs'. It depends on a lot of factors and the main thing is to give it a serious thought before you start to set up things.
My different weblogs
These are my different weblogs:
- Veerle's blog
- Veerle's art
- Art
- Approved
As you can see I run 4 blogs. Each of those blogs have their own templates, but some of them are 'shared'. Shared in a way that I reuse them as in 'nesting' them into other templates. Templates in EE are stored in template groups. I've set up a template group for each weblog. My nested templates are stored in a group called 'includes'. This group contains: my header, my footer, my art to the right, my categories, my flickr images and the sidebar (which contains "previously", "what's cookin" and "search"). These parts are all repeated over my site. If I need to do an update in the header, footer or any other element I only need to do this once. Very clever and easy ;) Even my CSS files are stored in templates. You have total freedom over the (X)HTML code of these templates, no restrictions there. See what I mean with flexibility? These are called 'templates' but they are far from the templates that most people would call them ;)
Overview of my templates
These are the main templates for my main weblog (Veerle's blog), not including the CSS files:
- index
- contact
- about
- links
- archive
- archive-summary
- comments
- comments-preview
Since there is so much I could talk about, I decided to pick 3 interesting subjects:
- The implementation of the header
- The implementation of the related links
- The implementation of 2 latest months on the archive page
The implementation of the header
As I told you already, my header is stored in a separate template, which is used as 'nested' template and stored in a template group called 'includes'. This template is implemented in all the main templates. Updating the header means only updating this template. The header contains the illustration, the links at the very top and my main navigation. The fun part is the navigation, since I use an "active" state for the pages : home, about, archive, contact and links. This all purely done by CSS, no EE magic here, just you read on...
I use the embed EE tag for my header. So each page has this tag:
In my body element I use a different id for each of the pages. Each list element (each 'li') has a separate id, so I have <li id="home">, <li id="about">, <li id="archive"> etc. This means that if the body for each of these pages have a different id, that I'm able to give the active tab or button another style, an "active" style. For example for the about page I have this body id:
<body id="about-page">
The rest is pure CSS. You just need to style the <li id="about"> on this page, like this:
body#about-page ul#nav li#about {background-position:-66px -54px;}
That's it for the header. Now, let's have a look at how the related links are implemented
The implementation of the related links
The way my related links work is like this: I select each of them from a dropdown menu. So it's not some intelligent system, you can choose the articles yourself, which I rather prefer because I have total control over this. These dropdowns are extra custom fields created in the admin. I've created 5 of them and named them "related1", "related2" and so on. The "Field Type" option for this custom field is set to 'Relationship' with 'Relate weblog entries to other weblog entries' selected. I have added those fields to my 'Default Field Group'. Yes, you can have different field groups as well. I use this default group for all my weblogs, except my "Approved" weblog. This weblog has its own field group, since this includes just a title, a URL and a description. You can have as many groups as you like but it's probably wise to limit this to keep things as light and simple as possible.
Once the custom fields were set up I added the necessary EE tags in my 'comment' template, the template that holds my article pages.
EE template code:
I put the div, the heading 2 and the ul element between if statements otherwise they will also be rendered when there are no related articles selected and that's not what I want. So if there is a first related article selected these will be rendered, but if not than nothing will be rendered.
The implementation of 2 latest months on the archive page
Now for this part I'm not exactly sure if there is a way to do this with EE tags only. I mean, showing the last month is no problem, but showing the month before that... well I didn't find a parameter so I added a tiny bit of PHP. Please do correct me if you know another solution, one that doesn't involve adding extra PHP for example.
Why show 2 months?
Well because showing only the last month on for example June 1st would give me only 1 link, so that's rather stupid. You need at least 2 months. Since my archive goes back till 2003 I need to get things a bit organized. That's why older articles are searchable by month. People also need to be able to search for articles by category, so for this part of the page I used the nested 'categories' template.
EE template code:
Here is the code to show the month before the last month:
As you can notice I have added a bit of PHP in the 'month' parameter. This makes it possible to show me the 2nd last month. Only in the month of January I'll ran into some trouble, so it's not prefect I know :S For the last month I use the same code except that I use the 'limit' parameter:
Plugins and modules
If you want to take things to the next level you can write your own plugin and just dump it in the plugin folder. That's what I did for my Gravatars in the comments. There are a whole bunch of them available already.
If you are a PHP programmer you can consider becoming an Expression Engine module developer. Everything is modular in EE and since a lot of features are already there you can greatly accelerate your development time by focusing only on the enhancements you need.
Variables are times savers
Another thing worth mentioning is the use of variables. I use them to save time, just in case I would decide to change things later on. Here are some examples of variables:
{assign_variable:my_weblog="veerle_blog"}{assign_variable:my_template_group="blog"}{assign_variable:link="http://veerle.duoh.com/index.php/"}
These 3 lines of code are placed at the top in my template, above the doctype. The first variable is called "my_weblog". Where ever I used "my_weblog", EE will know that I refer to "veerle_blog" (and not to another weblog). I do the same for "my_template_group" and for "link". Where ever I use "link" EE knows that I mean http://veerle.duoh.com/index.php/. You can use as much variables as you like. Very handy.
Conclusion
Now, this might look all a bit too complicated for code-allergic designers, but most of this code is copy and pasted from the EE User Guide. With a bit of effort and analytic thinking you be amazed of yourself. I'm a designer myself, not a coder, well except for CSS and XHTML ;) One tip I would give you is to save a copy of the default templates that come with EE. Just copy the group and save them as "original" and use them as a back up and as an example. I did a lot of copy and pasting from these templates, they helped me a lot. Look in the User Guide, most answers can be found there, it is very well explained with examples etc. And if you are really stuck than there is always the super helpful pMachine Community Forum. Just give it a try you'll be amazed by its power ;)
One more thing...
If you're using TextMate, Chris Ruzin has written a fabulous EE plugin that makes writing EE tags a real pleasure. For those die-hard EE coders out there grab'em and have fun! I need to take TextMate for a spin too since I saw the movie and notice that a lot of people are switching from BBEdit.
49served
1
php hackers who are hesitant to use EE but still love its elegance might want to check out Code Igniter, a free MVC framework by the same people who make EE.
Everything I do in php will use Code Igniter for now on. It even made me want to recode my blog. It’s seriously that good.
2
I’m using Code Ignitor myself and loving it. I haven’t tried out EE yet, but it sounds/looks pretty damn good for pure content management.
3
Do you use one of the commercial version of EE or just the free core?
4
If you’re going to use such a pseudo-programming language just for the templates, then why not go all the way and just code the blog yourself? :)
5
If you take the following code, you will get the number of the last month, regardless whether it’s January or not:
echo date("n", mktime(0, 0, 0, date("n")-1, date("d"), date("Y")));Furthermore would I save the number in a variable and use this instead of writing the term twice, but that’s just secondary - I think the additional computation won’t kill your server :).
6
Great article veerle and thanks for the link to that Textmate plugin. This is going to open a lot of people’s eyes to the possibilities of EE…
7
Just out of curiosity:
Is there some reason why you kept the default url scheme that produces ‘index.php’? I’ve noticed a few EE users who chose to change it to something like ‘/weblog’ and I can only imagine they do so for better search engine rankings.
8
Since you’re making use of variables, you might want to consider using your path.php file to set up an array of your frequently used ones. Rather than having to declare each variable in each template (since they don’t span across parent and child templates), assigning them to that array within path.php makes them available globally.
I’ve found it real handy for including multiple templates from multiple template groups into a single file, without having to type/paste in 5+ variables per page. More info can be found here, if interested.
9
Thank you Veerle for posting this! I’m so new to EE that seeing how things are done really helps me learn how to use it on my own site.
Only problem now is developing the skill to make such an awesome layout like the one you have created ^^.
10
Thank you Veerle. Light bulb just went on! Great tip on the {embed} tag!!!
11
What I don’t understand is why you all are so lyric about a blog/content managers like EE? My personal experience is that every website is quite different and that learning how EE works and implementing it in your new site, is as much work as coding the content manager yourself in (for example) PHP & mySQL. Can someone give me an example where in EE gives the advantage in time or something?
(maybe this is a really stupid question, but I really don’t see the advantage)
12
Your kidding, right?
By the time you’ve written and tested a CMS with EE’s functionality I’ve probably already built 10 sites with it. LOL
13
Cary said:
I’m using the professional version because I needed my members list.
@Jérôme: Thanks for the code ;)
Steve Hubbard said:
Yes because I wanted to strip out the url but my host won’t let me use mod rewrite for the time being. So that’s why I never renamed it because I thought I could lose it. And now it’s too late and I don’t mind to be honest.
@Chris Vincent: Thanks for that I’ll look into it ;)
Martin Hellendoorn said:
I don’t think you grasp how much programming goes into setting up a site like this one with a custom build CMS for example. If I would have to program all this myself, something I can’t since I am no PHP guru. I am a designer remember, but let’s even forget that for a minute. This would take many weeks to accomplish and even than things will pop up that you didn’t think of. There is so much going on in the background that you don’t see. Security for example is one thing, you have no idea what you have to think of to protect your site from spammers, bots etc. Member management, template system, build in SQL managment, I’m only scratching the surface with that alone. Building something similar like EE would take months or more if you have the knowledge. Why do you think that blog systems are so popular, do you really believe that they are easy to build, I’m not. I suggest that you first check out what EE can before you make any final judgement ;)
14
Well, 100$ for the professional version. For this price, what are the advantages compare to free system like Drupal or Wordpress?
15
Cary Said:
Just download both demos and compare them. For Wordpress you need to know PHP and Drupal isn’t so flexible IMHO. I like to use a system that doesn’t limit my creativity and makes it hard for me to implement something. That’s EE for me and that combined with the wonderfull support and community makes it my preferred choice.
16
I’ll second Veerle on this, once past the initial learning curve, EE just lets you get on with designing and implementing your site. It doesn’t tie you to any preconceived notion of what your site should be and that IMO is its main strength.
17
For designers out there who already know XHTML and CSS, and don’t know a lick of PHP (like myself), Expression Engine cannot be beat.
EE gives you the dynamic capabilities that would take months, maybe years of learning programming. Trying to heavily modify WordPress without much knowledge of PHP is close to impossible.
EE does not subsitute for a career of programming, but for blogs and other moderately dynamic projects, EE is perfect.
Great article Veerle!
18
The only concern I have about EE is that if I’m setting it up for a client I want to be able to add WYSIWYG controls to the Admin side of EE.
I’ve seen guides but I feel like they are for the external web site and not the admin pages such as the Template Editor.
does anyone know of a way to add this to EE? My next project will be with EE if I can find the way to do this.
19
Veerle, I was wondering why you used Feedburner to display your RSS feed instead of just linking to the direct EE RSS template?
Do you even have an RSS template? Sorry but I’m confused on how Feedburner, Technorati, and all those other feed-thingies work.
Also, do you have EE ping Technorati? I think I set mine up to do that but Technorati doesn’t get the updates.
20
I’ve never used some EE, or wordpress. I like to make all in my way (I am depended on PHP ;)
But if you specialize to webdesign, not to programming scripts for server, then I’m not gonna judge you ;)
In future, I would like to hear about some mistakes in systems like EE (id there is any) to help improve them usability.
21
EE is a huge timesaver, and you can organise things well.
22
Jan,
Good for you. If you took the time to review the power of EE you just might realize that you CAN do it your own way with that system. You can customize EVERYTHING. The reason I would use EE rather than something built from scratch is that is has been tested, proven, and has a community of users supporting it. Using EE has nothing is do with “not being a programmer"… and programmer would love EE and its flexibility. That is what is great about EE, it is made for programmers, designers, and content providers alike. Everyone benefits.
To agree with Veerie:
The advantages is its flexibility. I recently switched most of my sites over from Wordpress to Expression Engine Core and Pro version. I left WordPress behind because there were too many limitations, too many hacks to do things that should not be so hard to do. I love WordPress, it is a terrific offering, but it is limited for my needs. For starters, try to create multiple blogs in WordPress, try to assign members and groups, try to allow different content providers on a basis deeper than admin rights ratings, hell- try to implicate a simple out of the box photo gallery (most of the plugin solutions blow).
Expression Engine might seem a bit “technical” for a first timer but really it is the best tool to use for customizing content and templates. Go to their site, read some docs, watch the videos, dig in. The basics are super easy to learn and you will be up and running in no time.
23
Hi Veerle. What tag did you use to make your <title>Article Name</title> in EE to make your title of the browser to dynamically show the articles’s title?
Thanks. :)
24
Hyunlab, I don’t know how Veerle does it, but I do it this way in my individual article/comment pages:
{ exp:weblog:entries weblog="blah" }{title}{/exp:weblog:entries }
I had to add spaces between some of the curly brackets because it wasn’t showing up in the comment preview otherwise :(
25
Stefan Hayden said:
I thought Tiny MCE Extension was an extention for EE, that works with the admin of EE. I haven’t tried this out, so I don’t know much about it.
I always have my concerns about those WYSIWYG controls. Most of them give the client too much freedom in a way that they can mess up the layout by chosing all kinds of colors and font variations etc. The content of how things look (font, color etc) needs to be defined pure by an external CSS sheet (avoiding classes if possible) and not by inline styles. It’s better to have it as limited to the styles that fit the website. Every WYSIWYG I’ve seen generates nasty inline code and even deprecated and messy code. You can customize EE’s buttons so that’s cool. I also wonder what’s so hard about this : click the ‘bold’ button type the bold text and click the ‘bold’ button again. What so wrong with that? People are just too used to this MS Word look.
Kaoro said:
The simple answer is that Feedburner republishes your RSS blog’s feed (or any RSS feed) to make it easier for the users. You can keep track of how many people are subscribed to your RSS feed. There are extra features that you can use as add on. If you ever change your blogs RSS feed, just change the orginal feed in your Feedburner account and your readers will never have to re-subscribe.
I use the EE template for my feeds, but you can do whatever you want, you can totally change it if you like. There is a Atom template as well. You can totally customize it if you like.
There is an option to ping Technorati. If you click the ‘Pring’ (tabbed) button when you publish an article you’ll see a list: Technorati, weblogs.com, blo.gs, blogrolling.com and blogshares.com
@Cpawl: couldn’t have said it better ;)
Hyunlab said:
Kaoro got it right. The code of the title element looks like this (without the spaces before of after the curly brackets):
<title>{ exp:weblog:info weblog="{ my_weblog }” }{ blog_title }{ /exp:weblog:info } | { exp:weblog:entries }{ title }{ /exp:weblog:entries }</title>26
Great tip again Veerle & Kaoro! Works like a charm! Veerle, are you planning on explaining how you set-up your awesome comment page? Especially the alternating backgrounds, gravatar, and differentiating your comments from everyone else’s comments. Regardless you show us more of your “under the hood” of your website for us or not, my skill in EE improved dramatically from this 1 article! Thanks!
27
Nice article! Made me decide to download EE Core, just to see what it can do…
I personnally like Tiny MCE a lot. I didnt’ know there was a EE version, I use it for my own news/blog modules.
I don’t like “giving the client too much freedom” either, that’s why i restrict the wysiwyg controls to bold, underline, lists, links and one or two predifinite styles if needed (you can attach a stylesheet to TinyMCE, and the classes contained in this stylesheet are made available in the Editor in the form of a drop-down menu).
The code produced by TinyMCE seems to be pretty clean (there is a built-in cleaner feature), but it is always possible to tidy it using a w3c webservice.
28
Yeah, i agree,foxxbat. I want to strip the Tiny MCE controls down to the bear minimum. bold, underline, lists, links are just enough that they don’t need to know HTML but can’t really mess up the site’s style. And the tags are basic enough that the code stays clean.
29
I am interested in EE and have no knowledge of PHP at all.
Is the free version of EE a good idea to set up a client’s technology website so they can update content? I hve looked at other CMS and very confused on what to use especially as I am not a coder but would like to know a little more.
30
Yep there is a free version of EE, it’s called EE Core. I think there’s a link to it on the pMachine website. I think a lot of features are disabled by default but I guess it can give you a good idea of how to use it.
I tried to use Joomla! in the past and about 10 minutes after installing it I was confused. I hadn’t even got to the theming part yet, I was just trying to use the CMS :X. With EE, I was able to (with a little advice from Veerle) take my layout I hand-coded in Textmate and make it work with EE. I really love the EE tags! They’re very easy to use.
But then again I never attempted Wordpress theming because php scared me away ;).
31
This is a very nice writeup. I feel like I’m always championing EE to people but I can never quite convince them of how great it really is, until they actually use it.
32
carlomarks said:
Hm, since you’re talking about ‘client’ well I assume it’s for commercial purpose, so than a free version is out of the question, since the free version’s license doesn’t allow that. The price for the commercial version is a bargain for such a powerful system, and there is room to grow too. I think EE is perfect for a business website, you can also set up different members and groups and give them different rights etc. just to mention something. The unbelievable good support is also something to consider when you run into a problem, you get served very fast. And then you have the extra modules like the photo gallery, the WiKi etc.
33
wonderful article.
i’ve had EE installed and running for a few weeks now. but due to work issues, never got it off the ground.
with this introductory/refresher, i’ll get it tomorrow!
i spent the past 2-3 hours rewriting my CSS and pages offline, which I should be able to complete online tomorrow.
thank you for inspiring us all!
34
Because of this site I tried EE and I love it. I used to code my sites myself in php, but EE is really a time saver and fulfills my demands feature-wise. A very important feature for me is the ability to save the templates as files, so they can be edited with a editor like Dreamweaver.
For the people new to EE I advise them to watch the video tutorials on pmachine.com. They take you through the basics.
35
I agree with you Roel. Because of this post, I also installed EE and I’m very impressed by its capabilities. For the sites I manage, I use self-coded php, Wordpress, Drupal or Joomla. Depending of the site and its needs. But - despite the fact that I really love coding - as a graphic designer I prefer to concentrate myself on the website design. So, due to his simple tags system, EE appears to be more flexible than the other systems I used before and a time saver compared to self-coded php. I think that I will definitely adopt EE.
36
After my post and all the positive reactions about Content Management Systems, I went on and trying a few. I found that systems like Joomla, Wordpress ect. where not easy to use and not meet my demand on customisation. Working with EE was impressive but two days ago I found a CMS that made me decide to convert all my site’s to it.
I’m talking about CMS made simple on www.cmsmadesimple.org. This is a relative small CMS, but is so easy to use, that I (a really hard person to convince) will be using it for all my site’s from now on!
37
Hm, your article gave me a motive to give EE a try.
Thanx!
38
Martin Hellendoorn, says:
My opinion is that the biggest advantage of useing EE is that most professional developers, usually prefer to hand-code most of our sites. From the layout, structure, DOCTYPE, etc. With EE, we are able to do that much AND more. With the need to ensure 100% validity on our pages, we alone are at fault if a page does not pass standards. We can’t blame a CMS or CMS-type-system for producing bad syntax. We determine the resulting URI shown in a visitors address bar. We determine when and where to embed a template and how deep the embedding goes. I’ve yet to come across a system so powerful, than EE. I’ve not tried CMSmadesimple, because I don’t need to.
I’m not stating that CMSmadesimple, does or does NOT offer any of the above functionality, but my own opinions in what I think developers seek in a CMS or CMS-type-system.
:)
39
After reading a lot about Content Management Systems this week, I totally agree. But EE is not free, it is not open source and is maybe easy in use, but not as easy as ‘CMS made simple’ (CMSMS).
For people who never heard about/used CMSMS, here is a demo: <a href="http://opensourcecms.com/index.php?option=content&task=view&id=452>
CMS made simple</a>
40
On the level of FREE -vs- PAID, there is a grand difference in funcionality, speed, and features.
It’s like comparing punBB & SMF (both free) to the giants VBulletin & InvisionBoard.
There is so much more a paid service/software can get you.
(BTW: for the unknown reader, the core version of ExpressionEngine is free for personal usage).
Everyone has there preference for free -vs- paid. MS -vs- linux. PC -vs- Mac. Intel -vs- AMD. Apples -vs- Oranges.
(Speaking of apples & oranges, CMSMS & EE are not even in the same orchard)
:)
41
I have just set up EE after all this feedback and amazed at the ease of installation and set up a simple page using XHTML and CSS as I am not a hardcore coder and know little about PHP. It’s perfect!
Really pleased as I will now use it for a client’s corporate site. Obviously there are many other things I need to find out about, including the modules but this has been a great inspiration and a weight off my mind as I was worrying about having to get a coder each time I did a CMS system for any client. And at least I can make more of the cash!
42
Veerle, specifically because of this entry, I will use EE soon. It definitely has the things that I think are missing in Wordpress.
43
now veerle, tell us how much pmachine is paying you for all this propaganda :) however much it is, it seems to be worth it reading all these comments.
44
Hi Veerle,
Just finished my new portfolio website powered by EE!
Still need to alter some stuff, but I wanted to finish it before I go to London for the @media conference!
Visit www.inflicted.nl
Will attend the “Good Design vs. Great Design” panel, so I guess I’ll see you there…
regards,
Inflicted
45
Hi Veerle
Anyway, will you be doing any tutorials? Maybe setting EE and introducing CSS/XHTML elements into it? I have looked arond and there are very few tutorials and one is about 3 years old.
46
This too is what I am looking.
There are very few developers who:
a. have a great enough design using EE
b: share with the community
We all look forware to some more toots. :D
47
Hi!
And huge thanks for sharing all this good stuff Veerle! With regards to comment 25 above:
You use the varible { my_weblog } (in the header file) in order to display the page title. Is there any chance you could spread some light over how you solve the issue of the page name for pages other that “dynamic content"-ones (ie., pages retrieved from a blog) , namely the About page, Index page and such? Where do you assign the variable(?) would be one question to at least part enlightening me I guess.
I have been trying to solve this problem for days now (on my test site) and it has quite frankly put me on the edge of insanity not being able to solve the problem. ;) I have tried assigning the variable (my_weblog) on the respetive page prior to embedding the header, but then it just shows up blank. My guess being that you must assign the variable upstreams in terms of the code execution flow before it becomes usable.
It is really hard to describe, and I dont want to write a novel in your comments either. Nevertheless, huge thanks for sharing so much wonderful stuff on this site! :)
48
@Jimmy:comment #47
I beleive what you are looking for is this: http://eedocs.pmachine.com/templates/globals/url_segments.html
I use it as well on my localhost testing station.
49
@Jammo: #48
Thanks mate! Wasn’t aware of that variable. Great stuff! I’ve tried to implement it in my header, and it works fine as long as I am viewing blog entries. However, I still can’t get it to work with for example my About page (which is a separate template file, or Index page for that matter. I use the following code in my header:
<title>{ exp:weblog:info weblog= { my_weblog } }{ blog_title } { /exp:weblog:info } » { exp:weblog:entries url_title="{ segment_2 }” } { title } { /exp:weblog:entries }</title>Any ideas?