A Newbie’s Guide to ExpressionEngine

| In Content Management Systems, ExpressionEngine

There is a lot to learn in the world of web development. From the lists of CMS’s to all the different coding languages, a total beginner can easily be overwhelmed. I know I was. I had a couple of months of school before my internship with VIM started, and I needed to build up some basic web development knowledge so I wouldn’t be helpless when I started working.

Before my interview in late March, I had heard of HTML, CSS, and JavaScript but I hadn’t used any of them nor did I really understand how they were used. I didn’t even know what a CMS was. I got a small taste of all of that during my interview, but afterwards, during my remaining few months at school, I had to teach myself. I needed to learn as much as I could to jump right in and start working as soon as I got home for the summer.

Starting from scratch was not easy, but I quickly learned there is a lot of help out there. Unfortunately I think there’s a little too much help. There are endless amounts of tutorials and lessons, but while many of them aren’t very useful, I managed to find a few that were perfect to get myself up and running.

This guide contains steps, tips, and suggestions to help anyone else that is new to the world of web development and ExpressionEngine to get started in the right direction:

  1. Installation Prep: Buying a domain name is fairly straight forward and so is finding a host. Just make sure that your host is compatible with ExpressionEngine. The host requirements for ExpressionEngine can be found here. But your host may also say on their website if ExpressionEngine is compatible or not. Once you have your domain name and web host set up and ready to go, you must create the database you are going to use for ExpressionEngine along with a username and password. Make note of the database name, server address, your username, and password. These will be required in the installation.
  2. Installation: ExpressionEngine has a great guide on installation here, but if you’re like me, visuals are much more helpful and easier to follow. I went on a hunt for some kind of more detailed guide and I came across this YouTube video, by Level Up Tuts. It is a very clear step-by-step tutorial of ExpressionEngine’s installation process that I highly recommend anyone new to the installation process should use.
  3. Learning The Basics: Not only does Level Up Tuts have a great ExpressionEngine installation video, but they also have 25 more ExpressionEngine tutorial videos, and are continuing to add more. Each tutorial follows the one before it in a very well-paced and clear manner. Through watching these tutorials and following along, you will gain a very solid understanding of ExpressionEngine and its terminology. Knowing the terminology will enable you to understand more complicated tutorials, use the documentation, and effectively use the forums.

One thing I feel Level Up Tuts left out in their tutorials is a clean and efficient way to organize content and templates in ExpressionEngine. Some of this may seem obvious, but these were a few things I hadn’t thought of originally that would have helped me when I first started my site. So here are a few tips to help beginners out:

Template Organization:

  • CSS – All CSS files should be saved in their own Template Group. (I named that group “styles.”) If you are using a template theme you downloaded, simply copy each CSS file individually into a new template under the “styles” Template Group and save it.
  • JavaScript – You should do the same with JavaScript as you have with CSS, but placed in another Template Group. (Again, I gave it a self-explanatory name, “js”.)
  • Includes – (named “include”), you may create templates for html, tags, scripts, etc., that will be included on many pages. This is done to simplify the code on each page template and to keep your pages consistent. To start, create three new templates named “.head”, “.header”, and “.footer”. The “.” in front of each name is placed there to keep that template hidden so it can’t be displayed as a page on its own.

All of the content at the top of your page from the very top to the </head> tag goes in the “.head” template, but do not include the </head> tag. Place the </head> tag at the top of the “.header” file, and then continue with everything below, down to and including the </header> tag. This allows you to add any custom head data on any page. A comment in my code shows you where to add any custom head tags. Finally place the remaining HTML starting with the <footer> tag down to the end of the file and place that in the “.footer” template.

Now on each of your pages, write the following code:

Top of the page:

{embed="include/.head"}
{!-- Insert any custom head tag data here --}
{embed="include/.header"}

Bottom of the page:

{embed="include/.footer"}

Between the “.header” embed and the “.footer” embed should be all of the page’s unique content. This simplifies your templates greatly. It shortens the amount of code you see on each template and it also updates all of your templates if you make one change to one of those include files, rather than having to make the change in all of your templates.

If there are any other pages on your site that will share code, for example a series of pages that include the same sidebar, this is also a great method to simplify that as well.

Naming Channels

The key when creating channels, field groups, and custom fields is to keep everything as clear and simple as possible. Here is a naming pattern I learned that is very simple, clear, and works very well:

  • Channel Name = Events
  • Channel Field Group = Events Field Group
  • Channel Fields – Event Content = {event_content}
  • Channel Fields – Event Image = {event_image}

The Channel Name should be something that makes sense to the type of content that will be stored in that channel. I recommend naming the Field Group by simply the Channel Name + “Field Group”. And finally, because Custom Channel Fields’ Names are unique across all channels, I recommend naming the short name by first the Channel Name and then what the field will be.

That’s it! Hopefully after this, you are able to jump right in to building any website.

Good Luck!

Helpful Links:

Level Up Tuts – ExpressionEngine video tutorials
Train-EE – ExpressionEngine written tutorials
ExpressionEngine User Guide – In-depth ExpressionEngine guides
 

Be The First to Comment

Leave a Comment

Commenting is not available in this channel entry.