Putting it all together

In class up to now we've been looking at using our local machines to view HTML, CSS and Javascript. We've written our HTML and CSS by hand and we've looked at it in a local browser.

Obviously this isn't the way that any websites work in the real world. In the real world we have a server or some hosting, and our website is accessible by a domain.

In most cases, we don't really write the raw HTML and CSS of each page, we use a CMS or Content Management System to display our content to the world.

What is a CMS

A CMS is the system that manages and displays the pages of a website. If you consider a 'traditional' site, before the CMSs became the most common way to make a website, the contents of a site were coded directly in the HTML and PHP code of the site. This had many problems, including updating and modifying content, and it was very difficult for a novice to contribute to such a site, because for each modification it was necessary to manipulate code.

Fortunately, this is no longer the case: CMS have made editing and updating tasks easier and faster, and it allows novices in any institution to contribute directly to the site and make changes and content additions.

The CMS completely separates the 'Content' (ie text, images, and other content from your site) from the 'Container' (that is, the structure of the pages displayed on your site , Layout, fonts, colors ...basically HTML, CSS and Javascript). For the majority of CMSs this container is in the form of a page template or 'page type' which is a template that is used by the CMS to generate any page of a certain type.

A CMS then has two access interfaces - the front-end (the public site that everyone sees) and the back-end (the administration interface, protected by a login / password).

How does a CMS work ?

In practice, when the user navigates to a page of the website, the CMS does several things:

  • It looks at the type of page requested, and it looks for the template that matches (for example the page type 'Event').
  • Then it searches a database to find the content that corresponds to the requested page (eg 'Music concert in Strasbourg').
  • It puts these two elements together, injecting the contents into the template at predefined places, in order to display the complete page to the user.

Types of content

Most CMSs can handle a certain number of content types by default, and can be expanded to handle more. Here are some common ones:

Posts (articles)

Posts are items that appear in your site's news feeds and in other locations. They are information that is time-sensitive and will be displayed usually as a feed of information. On most CMSs, posts can be categorized. A single post can have several categories at the same time. It will be displayed in all categories selected in the site. You can specify one or more categories at the time of writing, or afterwards.

Pages

Pages provide a place to put static information that probably won't change much. This is information such as the 'About Us' page, or the Terms and Conditions and Legal Information. Pages can't be classified. They are usually organised in a menu.

Introduction to some common CMSs

Wordpress

It would be impossible to talk about CMSs without mentionning Wordpress. Wordpress is currently the N˚1 CMS in the world.

Wordpress exists in two editions: a commercial paid-for version called Wordpress.com and a free 'download and install yourself' version called Wordpress.org.

For the rest of this article we will focus on the free Wordpress.org version which is the most commonly used version.

A CMS for small to medium-sized websites

Wordpress is a very versatile CMS. It began life as a platform for blogging, and this is still evident by the fact that a lot of Wordpress basic functions are set up to deal with posts, categories and tags.

However nowadays Wordpress is the most used CMS in the world used to create websites for small to medium businesses.

Advantages and disadvantages

Wordpress has many advantages compared to other CMSs available:

  • It is widely used and so there is a huge community driving the Open-Source project, which publishes regular security updates and lots of extensions, themes and plugins.
  • It is extremely fast to set-up and install, and can be ready in just a few minutes for your first website.
  • Because of its history of being a blogging platform, it has a really simple and flexible system for creating and publishing news articles.
  • All updates are incremental. This means that an update to the system is unlikely to break existing functionality.

It also has some disadvantages:

  • It is not a very performant solution for websites that have a lot of traffic. Wordpress doesn't use caching by default and so every request for every page is processed by the server each time a visitor visits the page. Caching plugins are available but it remains fairly poor in terms of performance for high-traffic websites.
  • It is not multilingual by default, and although third-party solutions exist, they aren't great and often have compatibility issues.

Drupal

Drupal is a very complete CMS, which is adapted for medium to large-sized projects. It is very modular and performant and can be used for anything from a news platform to an e-commerce website or a business showcase website.

It is kind of a jack-of-all-trades, in that it isn't really specialized in any one thing. As such it is very well adapted to projects that have a lot of different functionalities and might not be suited to a single CMS otherwise.

Advantages and disadvantages

Advantages:

  • Drupal is probably the most 'complete' and flexible solution available on the market.
  • The community is very active and new versions are released regularly.
  • Architecture is very flexible and you can do pretty much anything with Drupal.

Disadvantages :

  • Most functionality requires coding knowledge to implement.
  • New versions are not very incremental and there can be many problems caused by upgrading to a newer version. This keeps the code base very modern and performant but can pose problems of future compatibility.

Prestashop

Prestashop is not a CMS such as Wordpress or Drupal which focuses on presenting static content: Prestashop is an e-commerce CMS.

It is basically an out-of-the-box solution for a small to medium-sized online store: it features everything necessary to start an online shop.

Advantages and disadvantages

Advantages:

  • It is very extensible
  • It is the simplest and easiest-to-use and setup solution for a small to medium online store

Disadvantages :

  • It is not performant enough to manage a large online store
  • Most of the plugins and themes for prestashop are paid-for and can be expensive.

Magento

If Prestashop is the 'Wordpress' of e-commerce sites, then Magento is the 'Drupal' for this domain. Magento is a very large and complex open-source CMS for creating and managing an online shop.

Advantages and disadvantages

Advantages:

  • It is very extensible and is the biggest and most professional online-store solution.
  • It can manage huge catalogues of thousands of products
  • It is the most used e-commerce platform in the world

Disadvantages :

  • Development for Magento has a steep learning curve as the database structure is extremely complex.
  • It has serious server requirements and if the server is incorrectely configured will be extremely slow.
  • Needs the largest budget of any of these solutions and a team of developers to implement a new site.

How to install a CMS

For this exercise we'll be learning how to install and use the CMS Wordpress.

I'm assuming that you have either a 'Web hosting' platform available. If not, you can set up a web server on your local machine for testing purposes. To learn more about that, check out the following tutorials :

Once you've finished these tutorials you should have a 'Document Root' or the folder where the files served on your web server will be. You should also have a database installed.

If you followed the MacOS tutorial you might also have installed your Wordpress already :) Good job. For the rest of you, the instructions follow.

Instructions

To install Wordpress once you have a database and FTP check out the following simple instructions : Installing Wordpress Locally.

Depending on your install your steps are pretty much :

  • Create a database
  • Download Wordpress from wordpress.org
  • Extract the files in your web directory
  • Navigate to the directory in your browser and enter your database information to start the install.

If you're having trouble, try this YouTube video which takes it step by step:

First steps with Wordpress

Once you've got wordpress install up and running, you should already be able to see that the website works. If you navigate to the Website you'll see the default wordpress theme which looks something like this:

TwentySeventeen

If you're using an older version of Worpdress you might have a different theme. Don't worry because we're going to change it all.

Everything you can see in a Wordpress site is managed in the theme. It defines the layout of the page by providing the HTML, CSS and Javascript for the template for each of the pages of your website.

Head over to the back-office of your website:

  • If your site is installed at localhost/mysite/ then this will be at localhost/mysite/wp-admin

After logging in with the credentials you created during the installation, you should see some different menus on the left-hand side:

  • Posts
  • Pages
  • Media

Try creating your first 'Post':

  • Posts -> Add new

On this page you will see some different information related to your post:

Wordpress post

Here you can set the post title, the URL, the content, and the publication status of the post.

Wordpress is a CMS that allows you to set different statuses for your posts.

Setting a post to 'Draft' or 'Waiting for approval' will allow only logged-in users to see the post. Setting a post to Public will enable it to be seen by anyone on your site. Setting the post to 'Private (Password)' will mean it can only be seen by typing in a password.

In this same place you can also set the publication date. If you set a date in the future, Wordpress will publish the post after that date ! Neat, right?

Adding content

You can add content to your website using the Content Editor.

Here you can use the buttons to add formatting, images, links and you can add text.

Wordpress has two separate editors. The visual editor that allows you a (limited) preview of your content, and the text editor that allows you to insert HTML and other tags. If a page contains a specific layout, using HTML tags, it is important to make any changes to the page using the 'text' editor.

  1. Try adding a 'Featured Image' to your post. Publish the post with the 'publish' button. What effect does this have?
  2. What happens if you try and enter HTML into the visual editor? What about in the 'Text' editor? Preview your results with the 'Preview' button.

Now you've had a bit of a play with Posts, try adding a page. You'll see it doesn't show up on your site yet.

Menus

Menus in Wordpress are managed in the Appearances > Menus tab. Head there now, and find the main menu.

Try adding the page you just created to the menu. It should be under 'Pages' on the left-hand side.

Themes for Wordpress

Head to Appearance > Themes. You should see there are some other themes available.

You can download more themes and install them very simply. Check out Wordpress.org for some nice Free wordpress themes.

To install a theme, take a look at the Wordpress documentation.

In the past lessons on this course, we learnt how to write HTML, CSS and Javascript.

Developing for Wordpress

In order to apply your own HTML and CSS to content delivered by Wordpress there are many ways to go about it.

Two of the most common are either by:

  • Creating your own Wordpress Theme
  • Customising an exisiting Wordpress Theme.

Although we won't be actually learning how to develop themes for Wordpress in this course, it's good to understand the principles.

Creating your own theme.

If you're interested in going further, check out the following tutorial on creating your own theme for Wordpress :

Customising a Wordpress theme using a Child Theme

One of Wordpress's strengths is that, even if we choose to use a pre-existing theme, we can customise this theme without editing the theme itself.

Although there is nothing to stop you from editing a downloaded Wordpress theme or even the source-code of Wordpress itself, you should never do this.

The problem with editing the source code is that as soon as we update the theme or the Wordpress base, the edits we made will be overwritten!

'So just don't update the theme or Wordpress' you might be thinking, but this is really bad practice, as it means we won't be applying security updates and our site would be potentially exposed to hackers!

As such, Wordpress provides us places where we can add our own functionnalities through plugins, or where we can edit a theme, using a child theme.

What is a Child Theme ?

A child theme is a Wordpress theme that, by default, will inherit all it's functions from the theme you set as a parent.

Wherever you provide a template in the child theme, it is used instead of the same template in the parent theme, but if you don't provide a template, the parent theme template is used.

Imagine we have a template for showing the categories in our parent them called category.php. If we place a file category.php in our child-theme folder, Worpdress will use that file, and not the parent one. If we don't provide category.php, Wordpress will use the file from the parent theme.

We can define a child-theme by editing a specific line in the style.css stylesheet in the theme directory.

In this way we can override specific parts of the theme we're using, to change how it works. But when we update the theme, we won't erase our own changes.

If you want to learn more about creating a child theme, take a look at the following tutorial:

Exercises

Now you've (hopefully!) got a Wordpress installation up and running locally, I'd like you to do the following exercise.

Ungraded Exercise : Using wordpress

This is an ungraded exercise for practice only, you don't need to submit it for grading

Using your locally (or FTP) installed Wordpress site:

  1. Create 3 new posts.
  2. Create 3 new categories (hint: in Posts > Categories). Assign one category to all the posts. Take a look at how the posts are presented with their categories in your theme
  3. Create an 'About Us' page. Add some content, and an image. Make sure the image has an 'Alt' attribute (hint: it's in the image insert box).
  4. Download a free theme that you like the look of from Wordpress.org. Install this theme and see how it changes the look of your website.