About WordPress & Themes

A simple explanation of the technology use to build this site.

First a little personal account of web history.

I first browsed the internet in 1996, signed up for my first Hotmail account in 1998 (there’s still some emails in my inbox to prove it) and built my first website in 1999.  It was something akin to the very first web page in terms of structure, although it had far more graphical elements as the web had developed somewhat. However, the concept was the same, each web page was a static individual HTML file which contained the HTML structural and inline formatting tags as well as the content.

Back then, if your website had 50 pages, you had 50 HTML files in your web directory which sat on the server. If you needed to change the content on one page, you had to open up the individual HTML file which contained the content to be changed and edit it. If you had to change the logo in the header across the whole website, you had to open up all 50 pages to change the code to the image.

Images were brought into the page using the <img> tag, usually from a sub directory logically, but not necessarily, called “images” .

Wysiwyg (what you see is what you get)

Wysiwyg editors became the next new thing making the building of pages and websites a little easier by allowing you to script the HTML and see your results as you went (well, almost, you had to load the page in a browser). The first wysiwyg editor I used in work was Microsoft FrontPage 3.0. It could also be used to construct a dynamic site using ASP script. Later, maybe the year 2000, Macromedia Dreamweaver, was becoming the hip way to construct a site. Dreamweaver was later taken over by Adobe and is still part of their suite of packages.

The web was fast developing and taking shape, with CSS (Cascading Style Sheets) allowing design formatting, such as fonts, backgrounds, paragraphs and colours, to be defined in a separate .css file, outside of the .html file. Dynamic pages were also starting to change how website were constructed utilising databases and scripts such as asp and php to separate the content from the architecture of the site, including pages, by placing the content into databases.

This structure of separating the content from the architecture and the formatting is still the basis of most website today and forms the basis of this website which is a WordPress site.

WordPress

WordPress is a web blogging and content management system. It is free and open-source, meaning that it is developed and maintained by a community of volunteers.

WordPress is a dynamic database driven system which utilises php and javascript to make requests to a MySQL database. WordPress must be installed on a server capable of running MySQL. Requests are made to the database through php pages. In other words, when you click on a link a series of quires are made to the database containing the content and the data is returned through php files which construct the webpage and populate it with the requested content from the database. Php files make up the various parts of the sites interface (web pages).

For example, each “webpage” or php page returned to the browser is a combination of other php files which constitute the various parts of the  structure (header, navigation, body content, side bars, and footer) and the content all brought together by wordpress php scripts to create a “webpage”  from the request made by the user.

Therefore, if you click on this page, “About this site” the code will construct a page by calling in the header, which includes the main navigation links; a content area, which includes the main content from the database and widget areas for side menus, metadata, and other content; and then the footer area, which also contains widget areas. The content to populate this page “About this site” will be pulled from the database into the appropriate position by the script. It is what you are reading now.

The use of “include files” to create a page “on the fly” makes dynamic sites very efficient. Each page served to the browser is constructed by the php from the various template parts and populated with the content based on the users request. A wordpress website might contain the potential to open 50 pages/posts, or 500 web pages/posts, but on the actual back end of the site (the file directory on the server) the number of files remains the same. The files in the back end are simply to construct the structure of the site, the “architecture” of the pages, site hierarchy and how it relates and interacts with the database content.

The database is what holds all the actual content for the site, including textual content, navigation urls and names, media including images, and comments.

The functions.php controls the functionality of the system, providing the code to execute the PHP scripts on the individual pages and returns to the browser PHP files with HTML embedded. The aesthetics and formatting of websites is handled by the .css files.

In WordPress, as with all contemporary blog and content management systems, advantage is taken of the separation of content from structure and aesthetic formatting to make changing the style and functionality of a site instant and easy using what are called themes. WordPress themes contain a series of files and scripts, including javascript and php files, which are used to construct the web pages from various page parts such as the header, content area and footer. Two of the most import files in a theme are the functions.php, which add .php functionality to a site, and the .css files, which control the styles of all elements and formatting ( the look of the site).

Child Theme

The theme I am using on my blog is a child theme of the default Twenty Seventeen WordPress Theme. A child theme is the best practice for making changes to an existing theme or customising a theme. Instead of editing the original theme, which will lose all the changes made when it is subsequently update, it is best practice to make a child theme which is what I did for this site.

More information on the theme for this site can be on the page Child Theme.