September 29, 2014

ExpressionEngine Tutorial - Create a blog - Part 4: Templates

by Tad Ward

September 29, 2014

ExpressionEngine Tutorial - Create a blog - Part 3: Publishing Entries

by Tad Ward

September 25, 2014

ExpressionEngine Tutorial - Create a blog - Part 2: Channel Fields, Categories, Channels

by Tad Ward

September 22, 2014

ExpressionEngine Tutorial - Create a blog - Part 1: Installation

by Tad Ward

Welcome back to the Blue Fish ExpressionEngine Tutorial - Create a blog series. Part 3 is about publishing entries. Before we begin, if you haven't read Part 1: Installation, you can do so here, Part 2: Channel Fields, Categories, Channels, you can do so here and Part 3: Publishing Entries, you can do so here..

and as always, if you need any help with ExpressionEngine; drop us a line.

Learn more about Tad Ward

Welcome back to the Blue Fish ExpressionEngine Tutorial - Create a blog series. Part 3 is about publishing entries. Before we begin, if you haven't read Part 1: Installation, you can do so here and Part 2: Channel Fields, Categories, Channels, you can do so here.

Now that we've set up the channel fields, categories and channel its time to publish a few entries. To do so, click Content and click Publish.

IMAGE OF MENU HERE

Please note there aren't any other channels on this tutorial set up so clicking publish will automatically publish the entry in the blog channel.

You are at the 'New Entry: Blog' page. Here you'll create the entry you'd like to publish to your blog. For this entry will give it a title of MLB Playoffs are set for 2014. You may have noticed that the URL Title is automatically filled out depending on your title. Next is the 'Title Tag' field. This field will be what appears in the browser window when viewing the entry. We will leave this blank for the time being. Next field is the 'Meta Description' field. Here you'll briefly describe the entry, remember it is set to only display 160 characters, spaces included. Both of these fields are for your Blogs SEO or Search Engine Optimization. We will cover more of that in our next installment.

The next field is the 'Blog Images' using the Channel Images add-on. Within this field you'll upload any images you may want to appear within the blog entry. Channel Images allows you to upload multiple images at once and will upload them with the settings you set. The first image that is upload is known as the 'Cover Image'. This will come into play in the next installment as well. Proceed to upload a couple of images.

Last field is the 'Content' field. This field will contain the actual entry itself. Go ahead and type in some content, you'll see from the image below what we did for this entry example

And here is what our entry should look like:

IMAGE OF ENTRY

Now we need to place this entry into a category. So at the top of the 'New Entry: Blog' page you'll see 3 tabs, click the one titled Categories. There you'll see a list of the 3 categories we created in here, for this entry we will choose Sports by checking the box to its left.

IMAGE OF CATEGORIES

After selecting the category, click the pink 'Submit' button at the bottom to save this entry.

That's it! We've created our first entry in the Blog channel. You can follow the steps listed above again to create more entries. For this example we will create 5 more placed within different categories.

After an entry has been created we can now edit it. To do so, click Content and click Edit from the main menu. You will be presented with a list of entries you've published. You can edit an entry by clicking the pink Title.

IMAGE OF EDIT ENTRY LISTING PAGE

That's all there is to it. Publishing and Editing entries in ExpressionEngine is simple and user-friendly and as always, if you need any help with ExpressionEngine; drop us a line.

Learn more about Tad Ward

Welcome back to the Blue Fish ExpressionEngine Tutorial - Create a blog series. Part 2 is all about creating custom fields, categories and channels. Before we begin, if you haven't read Part 1: Installation, you can do so here.

Creating Channel Fields

Creating channel fields, categories and a channel is pretty easy to do. To begin you'll need to log in to your EE install and click Admin from the top nav. Hover over Channel Administration then click Channel Fields.

You are now at the Channel Fields screen. Channel Fields in ExpressionEngine are organized into Channel Field Groups. We at Blue Fish like to create channel field groups for each channel we create as it keeps the site more organized and manageable. To great our first channel field group click the button on the far right titled 'Create a New Channel Field Group'. Next you'll be asked to give the new field group a name, we will name ours 'Blog'. Hit submit and your field group has been created.

Now its time to start adding fields within that group. These fields will make up the sections of content we will input for each entry in the blog. To start, click the group name 'Blog' on the left. You are now at the channel field screen for the Blog group. Lets create our first channel field by clicking the button titled 'Create a New Channel Field' on the far right.

Welcome to the create a new channel field screen. This page lets Here you're presented with a number settings and options for the new channel field we are going to create. This page lest you create or edit fields, which has 11 types by default more via third party add-ons. The first section is the field settings; type, label, short name, etc. For our blog section the first channel field we will create will be for our Title tag (explaination of this will come in part 3). For the type select 'Text input' (should be selected by default). For the Field Label type in Title Tag. Notice the Short Name is automatically being created with what you place in the field label section. After you've inputted the field label, we will want to update the short name by adding cf_ in front of the text already in place. Some of the fields have a brief explanation of what they are and do, such as Field Instructions. Continuing with the field creation we won't add any instructions and the settings for the remaining 4 settings will remain as is.

Next section are the Field Options. This is where we can add a little more customization to the field. These have a default value in place of which we can edit. For this field we will only edit the Maxlength field, changing it from 128 to 60. Explination of this change will come later in the series. We are now done with this field, so at the bottom click the pink Submit button. You are now taken back to the Blog Field Group page, show the newly created field.

Let continue by creating another field by clicking the 'Create a New Channel Field' on the far right again. This field will have a lot of the same settings as the first field but with a few changes. The field type will be text input, field label will be Meta Description, add cf_ in front of the created short name and the rest of settings stay the same. Under options the only thing we will change will be the Maxlength from 128 to 160. Hit submit.

The next field we will create is going to be using a third-party add-on called Channel Images. This add-on was installed in Part 1. Click the 'Create a New Channel Field' on the far right and once on the create a new channel field page, select Channel Images in the type drop down.

We are going to label this field Blog Images. Again make sure to add the cf_ in the front of the created Short Name. Remain settings stay the same. Under Field Options we will make adjustments and customize this field. You'll see 4 tabs, the first being 'Upload Actions'. You are presented with 3 image sizes. A brief explanation of how Channel Images works is when you upload an image in this field any actions you have in this tab will be preformed. You can have the field preform many actions if needed but for this tutorial we will stick with the basic adaptive resize. The only change we will make here is editing the 'large' action. Click the 'Show Settings' link and remove the height, leaving it blank.

Next tab is the upload location settings, here you'll basically select the location you are uploading the images to. We will keep it as default and for the Local Server location we select 'Blog'. The last two tabs we won't be changing anything, leaving the default settings. Click the Submit button to create this field.

We are ready to create our last channel field for the blog group. Click the 'Create a New Channel Field' on the far right once again. This field is going to be our main content field. For this field type select another third-party add-on in the drop down titled 'WYGWAM'.

MORE ABOUT WYGWAM HERE

Categories

Creating categories in ExpressionEngine is pretty easy. To do so, click Admin from the top nav, hover over Channel Administration then click Categories.

You are at the Categories page, here will be a list of all category groups for this site. To create our category group for the blog click the 'Create a New Category Group' on the far right. Name the category group will be Blog, rest of the preferences will stay the same. Click the pink Submit button and the 'Blog' category group has been created.

Clicking the 'Add/Edit Categories' link (3rd column from left) will take us to the Blog category group page. On the far right click the 'Create a New Category' button. Once on the create a new category page give the category a name, for this tutorial our first category will be News. The category URL title will automatically be filled in reference to the category name. Nothing else will be added so go ahead and click the pink Submit button.

Repeat the above process 2 more times naming the categories Sports and Weather, this will fill out our Blog category group.

Channel

The last step is to create our Channel. To do so, click Admin from the top nav, hover over Channel Administration then click Channels.

The process is pretty much teh same as creating teh channel fields group and categories group. Start by clicking the 'Create a New Channel' on the far right. Name the channel Blog, again the short name is automatically created. Under the group preferences section, select 'Blog' in the Category Group row, Status Groups select 'Statues' from the drow down and lastly select 'Blog' from the drop down for Channel Field Group. Click that little pink Submit button and boom, our Blog channel has been created.

That's it! We have created everything we'll need to start publishing entries in our Blog section. Check back next week for Part 3 of the ExpressionEngine Tutorial: Create a Blog series

As always, if you need any help with ExpressionEngine; drop us a line.

Learn more about Tad Ward

Welcome to Part 1 of How to Create a Blog using ExpressionEngine. We are going to walk you through the basics of how we set up a very simple blog section here at Blue Fish. First thing is installing ExpressionEngine on your server. We will be using ExpressionEngine 2.9.0 for this install. We like to stay a version or two behind the current versions to allow any bugs to be squashed and add-ons are updated.

Before we get started, make sure your web host meet all the System Requirements for running ExpressionEngine.

Step 1 - Installing ExpressionEngine

To install ExpressionEngine you'll want to follow the instructions provided by Ellislab here.

Step 2 - Extra security

Making EE a little extra secure is something we like to do for all the sites we develop. No site can be 100% secure but these few techniques provide some extra protection for your site. Out of the box ExpressionEngine is solid and doesn't have any major security flaws. But with the extensibility of EE, introducing a flaw during custom modifications can happen.

Please makes sure to check permissions on the folders and files listed in the Ellislab instructions after you complete the following steps.

First is move the 'system' folder above the web root.

Installing ExpressionEngine above the web root

Here you see the web root is (/var/www/public). This means anything in the public directory can be seen by the public via a web browser. So pushing the 'system' folder above web root, it is completely inaccessible to the internet.

After moving the 'system' folder we like to rename it. You can name it anything you like, for this example we are naming it 'sys'.

Once you've moved the 'system' folder or 'sys' as we renamed it, you'll want to make 2 slight changes in two files, the admin.php and index.php. Opening both of those up you'll see '$system_path = './system';'. This is targeting the old system folder before we moved it. Now that we have you'll want to change that to "$system_path = '../sys';". Notice the extra . and again the renamed folder. This allows EE to access the system folder but keeps the folder from being accessed via web browser.

1
$system_path = '../sys';

Next step we like to take is creating an 'admin' folder, placing the admin.php file in the folder and renaming it 'index.php'. This provides us with a cleaner, more user-friendly url for our clients. Once you move that file, open it once again and look for "$system_path = '../sys';" and change it to "$system_path = '../../sys';". This will allow the control panel to go up 2 folders to the 'sys' folder.

1
$system_path = '../../sys';

Last step in the process is editing the config.php file to point to the location of the sites themes folder. You'll want to open up config.php in the config directory located via this route:

sys > expressionengine > config > config.php

In the config.php file you'll see a number of config items. Directly underneath the 'index_page' config item around line 25 you'll want to paste the following underneath

1
2
3
4
5
$config['site_url'] = 'http://domain.com/'
$config['site_path'] = '/var/www/public';
 
$config['theme_folder_path']  = $config['site_path'] . 'themes/';
$config['theme_folder_url'] = $config['site_url'] .'themes/';

Please make not that your 'site_path' may be different than listed above.

After doing so you're ready to begin installing a few add-ons

Step 3 - Installing Add-ons

Now that we have ExpressionEngine installed and ready to go we can now install a few add-ons. These add-ons are a part of our default EE installs. The following are the add-ons we are going to install.

Installing add-ons is pretty easy, first you'll want to follow the uploading instructions for each of the add-ons; Channel Images, WYGWAM and TruncHTML; then log into your newly installed EE site. Once logged in hover over Add-ons and click Modules in the dropdown. Click install for Channel Images and WYGWAM to the right and they will install automatically. TruncHTML is already installed as it is a plugin (Add-ons > Plugins).

Step 4 - Creating Upload Directory

After installing EE and the add-ons listed above, we want to go ahead and create a file directory for our blog. This is where any images we upload when posting to the blog will go. We also want to do this now instead of during our Channel set up so we don't have to double back to create it when we are creating any channel fields.

To create this directory setting in EE click Content, hover over Files and click File Upload Preferences.

On the File Upload Preferences page you'll notice there isn't any upload destinations created. To create one click the button title 'Create New Upload Destination' on the far right.

Now assuming you've already created this directory on your server, you'll need to put in a few items so that this upload destination points to that directory on your server. Name the upload directory Blog, server path should stay the same except remove admin/ at the end and add the path to the folder (see image below), do the same for the URL as you did for server path (see image below). For this directory we are only uploading images so the 'Allowed File Types' stays as is as well as the rest of the settings. Click the 'Submit' button at the bottom and the upload destination has been created.

Please note our upload directory was created in 'assets/uploads'

The Wrap Up

By following the 3 steps above you'll be well on your way to creating a blog section using ExpressionEngine. Be sure to check back next week as Part 2 of How to Create a Blog using ExpressionEngine will cover Channel Fields, Categories and Channels.

As always if you're in need of ExpressionEngine help, hit us up.

Learn more about Tad Ward

These Entries are like brother and sister

September 18, 2012

ExpressionEngine Demo

by Marcus Neto

September 16, 2014

10 Cool Things You Can Do With ExpressionEngine

by Marcus Neto

September 18, 2012

ExpressionEngine Demo

by Marcus Neto

September 16, 2014

10 Cool Things You Can Do With ExpressionEngine

by Marcus Neto

August 1, 2012

30 sites that use ExpressionEngine

by Marcus Neto

September 16, 2014

10 Cool Things You Can Do With ExpressionEngine

by Marcus Neto

May 15, 2012

ExpressionEngine Templates

by Marcus Neto

August 1, 2012

30 sites that use ExpressionEngine

by Marcus Neto