If you are interested in testing this out a bit just Email Me. It uses the corporate theme as the theme that it overrides. I also had to change a few of the images so make sure to back up your current corporate theme folder if I send this to you to test.

I hope to release this this week for free…

Make sure to leave a comment and let me know what you would like to see changed.

A few weeks ago I was having some issues while creating a multi-language site and Jack McDade sent me a snippet of .htaccess code that has worked on several hosts (including a dedicated mac mini, gatorhost) and is simple. I asked Jack’s permission to post the code and he said yes. So if you find this handy make sure to give him a thanks by purchasing one of his many add-ons or follow on the twitters...

AcceptPathInfo On

Options -Indexes

<IfModule mod_rewrite.c>
RewriteEngine On

# Looks for files and directories that do not exist
# and provide the segments to the index.php file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^/index.php
RewriteCond $1 !.(css|js|png|jpe?g|gif|ico)$ [NC]
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule> 

FieldFrame on this particular site was 1.4.0 which used a serialized array to store the contents of the field in. In version 1.4.1 Brandon moved to flat text values. If I had upgraded prior to upgrading the site to 2.x I would have had a smoother process. So I want to relay two things. If you have not upgraded from 1.7 to 2.x yet then you may want to upgrade your site to the most current 1.x versions of your various add-ons prior to moving on. Then when you upgrade to 2.x you will probably see less headaches. If you have already upgraded to 2.x and are seeing problems with the old FieldFrame fieldtypes then never fear… Brandon has saved the day(that is one smart dude).

Basically all you have to do is go to the GitHub page for the Pixel & Tonic Field Pack. Download the files. Open up the following file: third_party/pt_field_pack/pt_fieldtype.php. Towards the top of the file you will see an $unserialize_data variable. Set this to “TRUE”. Upload the files. And voila! you should see the data that was previously not displaying.

Short of another issue upgrading the nGen File Field the upgrade process to 2.x has been a breeze. If you have been worried about upgrading you shouldn’t be. just make sure that all of your add-ons are available and you should be ok. Famous last words right?

**EDIT: Brad Morse just sent me this link which is helpful for those that might be dealing with nGen File Field from Version 1.x.

Before you get started it may be helpful to download one of our templates (free) to help follow along

Special thanks to Greg Salt from Purple Dogfish for his help on the default content file code

Folder Structure and Files

I still prefer to to keep my CSS and JS files outside of EE so the root of my package has a css and a js folder (if I am using Javascript for anything). I also have an images directory and a themes directory. Obviously you need to warn the user not to overwrite any core files they may have uploaded as part of the default EE install.

The real magic happens inside of the themes directory. Inside of the themes folder I follow the same path that the user would have to follow in order to upload the theme and have it work on their server. So the path will be themes/site_themes/theme_name where theme_name is the name you want for the theme. For the purposes of this tutorial let’s call the theme Tudobem (one of our previously released templates). So your path would be themes/site_themes/tudobem

Inside of the tudobem folder you will have a mixture of folders and files. Let’s talk about the folders first. One of the really nice features of ExpressionEngine 2 is the capability to create a folder called site.group and have EE make a new template group called site. Inside of the folder you will want to create an index.html which will create a new template in ExpressionEngine called index. Following this same example if you want to have a blog section for the template you will have a folder titled blog.group that has files in it titled index.html, comments.html, archives.html, categories.html and so on.

If you have created a site in EE2 and want to speed up the process you can just synchronize the files on the server and the system will output of the .group folders for the various template groups and the .html files needed for the various templates. So you are 75% of the way there.

In addition to the .group folders you will want to have a snippets (snippets) and a global variables folder (global_variables). Note that they do not have the .group naming convention. From my experience the files in the global_variables and snippets folder have no extension. So if you wanted to create a new snippet that contains an Email Address just title the file email_address with no file extension, and put the demo email address inside the file.

Now let’s park on snippets for a minute. We talked in the previous blog post about how Global Variables and Snippets are parsed at different times and that if you want to be able to act against the data as part of a conditional statement it needs to be a snippet. So if you are building a template and you want to make it really easy for people to update it then you can create snippets for email address, company name, fax number, address, template color, google map code, fax number, phone number, etc etc. So when someone installs the template all you have to do is direct them to the snippets area in the control panel and they can update all of the business pertinent information without having to modify the templates.

If you’ve looked at the Agile Records example you know that there are 2 files inside of the theme’s folder. The first we will discuss is the theme preferences file. This file just tells you what modules you want installed, what some of the preferences are for some of the templates. Can certain member groups access certain templates? This is where you would set it. This file is pretty simple. If you have questions pose them in the comments as I will gladly expand on this but it seems pretty straightforward.

The more interesting file is the default content file. I’m about to make your life a whole lot easier… In the example for agile records you would have to go through the database and remove all non pertinent data but leave all tables that are needed to complete the site. This would be everything from the exp_channels to the exp_categories table and all of the associated data. If you want to make everything a little bit easier then you will just use this bit of code inside of the default_content.php file…

<?php

$original_url = '**Insert the URL to your demo install here**';
$tables = array(
        'exp_categories',
        'exp_category_fields',
        'exp_category_field_data',
        'exp_category_groups',
        'exp_category_posts',
        'exp_channels',
        'exp_channel_data',
        'exp_channel_fields',
        'exp_channel_titles',
        'exp_comments',
        'exp_fieldtypes',
        'exp_field_formatting',
        'exp_field_groups',
        'exp_global_variables',
        'exp_relationships',
        'exp_snippets',
        'exp_statuses',
        'exp_status_groups',
        'exp_templates',
        'exp_template_groups',
        'exp_upload_prefs'
    );

$thepath = '../themes/site_themes/**Insert your theme folder name here**/template.sql';
$template = file_get_contents($thepath);

$pattern = "/^(CREATE[ A-Z]+`(".implode('|', $tables).")`.*);/Ums";
preg_match_all($pattern, $template, $matches);

foreach($matches[2] AS $table)
{
    $this->db->query("DROP TABLE ".$table);
}

foreach($matches[1] AS $sql)
{
    $this->db->query($sql);
}


$pattern = "/(^INSERT[ A-Z]+`(".implode('|', $tables).")`.*);\\n/Ums";
preg_match_all($pattern, $template, $matches);

foreach ($matches[1] AS $sql)
{
    $sql = str_replace($original_url, $this->userdata['site_url'], $sql);
    $this->db->query($sql);
} 

code

In the above example you will need to modify it per template in two places. The first is on line 3:

$original_url = ‘**Insert the URL to your demo install here**’;

The original URL may be an actual URL like http://demo.eetemplates.com/tudobem (doesn’t exist anymore but that is the old location) or it could be on your localhost if you developed the template locally.

The second location you will need to make a change is line 28:

$thepath = ‘../themes/site_themes/**Insert your theme folder name here**/template.sql’;

Obviously your folder name will not have any spaces in it. An example might be:

$thepath = ‘../themes/site_themes/tudobem/template.sql’;

If you are a PHP developer and you think you can expand or fix something in the above code then please contact me. I would love to see a robust theme installer be built for EE. If this code can be the seed for that then so be it.

What you do next is take a sql export of your database and place it into the final file we need to discuss which is the template.sql file. Make sure to synchronize the templates before exporting though. And also make sure that you change your password for the template before exporting. I would imagine if you wanted to you could also use a tool like Deeploy Helper from Hop Studios and change all of paths in the template and then export it. Just depends on how far you want to take it. So export your database. Make a file called template.sql and paste all of the exported sql into the file.

Now all that is left to do is test the install. I typically do this a couple of times just to make sure. You are bound to find some things that are wrong. Perhaps you forgot some files. Or you forgot to sync the templates prior to exporting. Or you messed up the folder names in the default_content.php file. Whatever it is just keep reinstalling it till it works 2x without issues.

As part of all of my templates I always take the time to create a readme.txt that typically has basic instructions in it of what to upload where and license.txt file in the root of the main folder. You might also have source photoshop files. Make a folder called Source Image Files and put all of the .psds or layered .pngs in this folder. More power to you if you want to include a fully outlined pdf of how to install the template.

Then just name the main folder something meaningful and zip up the package. Oh… and don’t forget to send us a copy to post here for all to see.

At the time I was selling templates (and making a killing I tell you) so releasing this blog post was something I wanted to do but was torn about. But, in the effort to show how this site is changing, I am now happy to provide what I have learned about creating installable templates for ExpressionEngine 2.x. If you find this useful please let me know. And if you have something to add to the code or to the process definitely give me a hollar and let me know.

Typical warnings apply too. If you grenade your server doing something in this article it's not my issue. If you blow up your EE install as part of this process no whining to me.

I am disseminating this information but since I am not a programmer working for EllisLab and there are no docs on what I am about to describe YMMV. Typical warnings apply too. If you grenade your server doing something in this article it's not my issue. If you blow up your EE install as part of this process no whining to me. I have used this process over and over so I am confident in it but things can go wrong.

Step 1: Build out your EE website

That's right. Build it out. No shortcuts here. Start with your content. Make your design. Think about whether you want there to be color options. Think about all of the little details. Also if you are going to be releasing the designs so people can customize their design then the photoshop or fireworks files need to be organized. Slice up your designs and code them out. Verify that you are using valid HTML and CSS. Bring the code into EE and chunk it out. Make all of your custom fields, categories and channels. Insert your dummy content into entries. Test for cross browser support (sound like fun yet?).

Step 2: Think about the n00bs

Make sure that you think through things that will make life easier on whomever uses your template. For instance email addresses and phone numbers that are displayed in various places on the site. They can be made into a variable that is assigned a value by using a Snippet? Yes I said snippet. Why a Snippet and not a Global Variable? Well from what I can tell Global Variables cannot be acted against using conditional logic as they are lower in the parse order. So if you want to wrap some HTML with a conditional that checks to see if a bit of information like a phone number is available you can't do that with Global Variables. But you can with snippets. For instance:

{if phone}<p><strong>Phone:</strong> {phone}</p>{/if} 

code

The above code will only show the HTML and text if there is a value in the Snippet titled Phone (even though that value can be anything but I digress). If you tried that with a Global Variable it would output the HTML and text as it gets parsed prior to Global Variables. Not showing the item and the unnecessary HTML if there is no value make for a cleaner looking site.

So think through the template. Is there any place you can make it simpler to make updating it easier?

Step 3: Thinking through Color Packs

If you are not going to offer different colors then you can skip over this section.

If you are going to offer color packs for a particular template the while you are creating your CSS you will need to separate out any CSS that has a value that is a) a color or b) is an image that has color in it. When creating template I typically develop my sites with a single color in mind and then once I am done I go back and duplicate the main CSS file. Once duplicated I go into the main CSS file and delete any Selectors and Declarations that have to do with color. I will then go into the color CSS file and delete everything but the color pertinent information.

One of the ways you can make it easier for people to change the look and feel of a template is to have a Snippet that assigns a variable that represents the different color packs. So for instance if the user types in style1 then they get the grey and red version and if they type in style2 they get the orange and purple version etc. The way this works is you have to have a CSS style sheet for each of the colors. You can even name them style1.css, style2.css etc. You also need all of the corresponding images for the various color packs. I typically create folders for each of the styles with the images and CSS in them so it is easy to track what CSS file and images go with each color pack for the site.

Wrap up for Episode 1

So that should get you started. In the next episode (should be a day or two) I'll explain the process for packaging up the templates. I'll also provide some code that will make your life a bit easier when doing this type of thing. Make sure to comment with any questions or thoughts.

If you are looking for the templates they are still available. I will be releasing another blog template this week after I package it up. I am removing the demos as it was becoming a bear keeping them up to date and locking them down so spammers couldn’t use them as their play place.

If you are interested in blogging about how you use ExpressionEngine just contact me and we’ll make it happen. I am looking for add-on reviews, tutorials, code tid-bits, new add-on previews and news.

I still have a passion to help others with ExpressionEngine though so with this next (3rd) version of the site I am going to focus more on blogging about ExpressionEngine template code. I want the site to be a repository of building blocks and a discussion about the best practices for EE. I do not have all of the answers so if you are a community member and have an idea for a blog post email me. I am not like the big blogging sites that can afford to pay for posts so if you do this it will because you a) want to give something back to this community and b) want to see your name and links on a site that gets fairly decent traffic.

As for Templates… I will still on occasion release a template but will feel less guilty about the time between releases. And more than likely I will be releasing them for free (donations are welcome though). All of the previous templates will be maintained as well. So just give us a few days to get the new site up and running and we’ll have those available for FREE. Did I mention they are free?

Yours Truly,
Marcus Neto
The Management

I am kicking around the idea of changing the focus of this site to deal more with snippets of code for ExpressionEngine rather than selling templates. I just have not had the time to focus on them like I should. So until further notice all of the templates are free. I hope it helps some of you.

OK now that I have that off my chest there has been an awful lot of registration spam hitting ExpressionEngine websites lately. While I cannot consider myself an expert (although I do think Greg from Purple Dogfish is) I do think I have some to share. I have come across a few things that I do to help fight registration spam.

So Bjorn Borresen just tweeted about a site that has a list of ExpressionEngine sites that has paired the list with some information on how to spam these sites with backlinks. A similar ping of Google shows that this monster is rearing it’s ugly head and is not going to die anytime soon. So what is the community to do?

First take a simple step to fight registration spam by changing the trigger word.

If you go to Admin->Members and Groups->Membership Preferences you will see at the bottom a Trigger word. Most people dont bother to change this. If you have a site that will never use Membership templates or functionality then just type in “aw;okfhoiahv” and be done with it. Oh. And you can also just set the “Allow New Member Registrations?” at the top to no But the changing of the trigger word makes me feel better.

Invest some Shekels.

The aforementioned Greg has an awesome add-on for culling spam registrations from an ExpressionEngine site. If you go to the Purple Dogfish website and purchase his module called member utilities it will help. Everyday I run Member Utilities to see all of the Bios on this site and change the members group to Banned. This bans their IP address, email and empties their profile and deletes any posts that they may have made. Of course this requires action (you doing something) but at least your Ranking wont take a hit for being a link farm.

Invest some more Shekels

Low has another great add-on that is worth a mention. It is called Low No Spam. Through the use of some of the larger lists of spammer (Askimet or Typepad Antispam) Low’s add-on can block these pesky spammers from being able to register or comment on your site.

Invest a few minutes and use a valid ExpressionEngine license

Lisa Jill wrote an article on the ExpressionEngine blog about stopping Registration Spam. It covers some of the items above. But one of mention is the Blacklist Module. If you go into the modules portion of the control panel the very first module is the Blacklist Whitelist module. You have to have a valid EE license to use this one (I would hope you would be using a valid license anyway). But if you click to open the module you are able to download a file of known spammers from EE and write their information to the .htaccess file so that they cannot even access the site.

Others? Share em with us in the comments

I know there are other methods. Leave a quick comment. Let us know what has worked for you.