itergator.com

Abstract

To design a simple, personal website to describe any software or hardware projects. The website is intended as an extended Curriculum Vitae providing further details that cannot be condensed onto two pages. Another purpose is to journal current projects that are ongoing and therefore may not have been included in said Curriculum Vitae. This has been completed with the aid of WordPress both as a content management system as well as a blogging tool.

Introduction

The use of WordPress as a content management system was unknown until introduced by a client last year who was using it for their website. Until then it was always seen as a blogging tool and nothing else. The brilliance of WordPress and other content management systems is that the complexity of building a website is present, but not a necessity. Feature rich websites can a built very simply using a combination of themes and plugins to get the design and functionality respectively that one requires. Due to the blogging feature for this particular website, WordPress was chosen as the underpinning for the website.

Design & Domain

The design concept for the website was mainly around the development theme of many posts written for this website. Posts would orientate significantly around software rather than hardware, therefore the logo design and domain name would reflect this. This brought the idea of using a programming term and having a bit of fun. Several proposals were thought until it was decided that iteration – the concept of a looping structure in programming and an alligator came together. This was chosen as a logo was thought of straight away – and no-one had registered itergator.com.

Logo Design

Simplicity, scalability and transferable were all factors when considering the logo. A flat design to link with the domain name. An alligator like an arrow in a circle shape to represent looping, or iteration. The idea manifested on paper before starting the on the computer. Due to the range of form factors available the logo would have to scale in size effectively, and with traditional bitmaps this can be hard to achieve. Vector images are better at scaling therefore a vector image application that runs in the browser would be utilised – draw.io. A simple design can be achieved in vector graphics software rather than using software such as Adobe Photoshop that has a high learning curve. The design is below:

itergator-small

A requirement for the logo was to be transferable in the sense that it was not just for a website, but for use in association with numerous form factors, applications and programs.

Website Design

Many posts would be related to software programming, therefore this would be the overall theme similar to internal development environments from the choice of font to background colours. Applications and programs such as Terminal on Mac and the Command Prompt on Windows have a distinctive font choice and colouring.
As a starting point the Responsive theme by CyberChimps was used as this would allow for different form factors. From this additions would be undertaken using WordPress functionality, child themes, without modification of the Responsive theme. This means that when the Responsive Theme updates, any changes for itergator.com would not be affected.
Using WordPress blogging functionality, the structure of the website would be defined using Categories and Posts. Categories would be defined containing either sub-categories or individual posts. All categories and posts through hierarchy would descend from a single root page that would be the homepage.

Itergator Child Theme

CSS StyleSheet

Starting with the responsive theme as a template the basic styles and fonts for itergator.com were added. The hardest part of a stylesheet is sometimes finding the section of CSS that is conflicting from the parent theme to get the response and look that is desired. This can be a slow process, however, this is a skill that is improved by practise. From this process with the Responsive theme it was found that the simplest HTML tags may have additional CSS that can give undesired output and can be difficult to determine where there is a conflict.

Homepage

There were three requirements for the homepage:

  • Content will not be static.
  • A list of the main categories to explore would be displayed.
  • A “recent post” section with a snippet and link to the most recent post.

Static Content

The content on the main homepage would be dynamic, generated with functions and queries from the WordPress codex and database respectively. There are two methods to create dynamic content.
The first is to use the page creation tool on the WordPress administration pages, using shortcodes and custom functions.
The second is to produce a custom page template for the homepage.
Either of the above options are viable, as the output can be the same for both methods, therefore it can be personal preference. The custom template option was chosen as a whole page was being designed, and not just a section. This option also requires less configuration within WordPress. A page template from the Responsive theme was copied as a starting point, renamed so that it appeared as unique in the WordPress administration pages. A new page was created and the new template was configured as the pages template. From here when the template is modified, the new page would also change.

Categories

In WordPress, categories are hierarchical therefore when categories are queried it is possible to find a categories’ parent and child category ( categories above and below in the hierarchy respectively ). If a category has no parent the value defaults to zero. Using this information it is possible to identify the “main” categories – those with no parent. This is required for the homepage list. With the main categories listed it is possible to gather further information such as a categories’ URL and description so that links and the descriptions can be displayed.

Recent Post

A recent post section was desired on the homepage. The post title, snippet of the content and a link to the article would be displayed. This involves functions from the WordPress codex and standard php to achieve the functionality. This functionality is extended to include the post that is updated most recent, rather than just the newest created article.

Category and Posts

Both templates were modified from those standard in the Responsive theme. For both templates there are a couple of properties that they share.

Navigation

There was to be a navigation bar with links to parent categories and the homepage with the format:
Homepage -> Category -> Post
This was generated using the WordPress codex and standard php functions.

Category Page

A category page template was added to the Itergator theme so that both categories and posts could be included on the same category page. Usually only categories are displayed. This gives greater flexibility in the structure of the website.

Posts Page

There were numerous changes needed to the post pages compared to the category and homepage from the standard Responsive theme.

Layout

As a standard implementation, a navigation sidebar is found on all posts apart from a select few. As a custom navigation bar is implemented, this is not required. The Responsive theme allows post layouts to be chosen when editing a post. To remove the sidebar, the Itergator theme must create a custom selectable layout and add this to the “select few”. The first is implemented using basic WordPress functionality called hooks. This allows the modification of the layout array without any changes to the code in the Responsive theme. Once this is implemented the new itergator-post layout is added to a switch statement found in sidebar.php that skips the implementation of the sidebar when the itergator-layout is activated.

Post-meta

The post-meta in WordPress is the specific details of a single post such as creation time, last modified date etc. This data forms a sub-header of posts, displaying these details. This was modified for the Itegator theme so that the CSS could be modified to a greater extent compared to the Responsive theme.

Code Cleanup

The last thing to implement was a quick code cleanup including commenting and remove as much repetition of the same code as possible.

Conclusion

This project furthered the understanding of WordPress using the codex, database and functions that have not been seen in the past. Using the WordPress online reference material many aspects of this project were achieved much more efficiently when at first glance seemed had to be programmed from the ground up. The online reference material has been an invaluable resource.

Posted in Websites