Blog Content Management System - All The Pieces That Make It Work
I decided to build a blog content management system because hard coding and then uploading articles manually to the server was a time consuming process that made me feel less motivated to write. Secondly, I am the kind of person who does find joy in reinventing the wheel. Doing so has allowed me to create an expandable CMS that does exactly what I want it to do and no more.
Even if you feel like you are nowhere near ready to build a CMS, have a look through the complete resource list at the bottom of this page. You'll be surprised at how prepared they will make you feel. P.s. I knew very little PHP and SQL before attempting this project, but am far more confident in both now.
CSS
- CSS Tricks: A ton of bitesize tutorials for doing pretty much anything with CSS
- 10 Best CSS Practices
- Smashing Magazine: Challenging CSS Best Practices
- CSS Tricks: The art of Comments
- W3Schools -> Media Queries
- Free Code Camp: An extensive guide for using CSS variables
Comments
I used comments to logically separate my styles into categories that make sense for my website.

Media Queries
I used media queries to make the layout responsive. Particularly useful for simplifying complicated desktop blog card layouts for mobile users.

CSS Variables
I used CSS variables to store brand colours.

JavaScript
- W3Schools -> How to create a back to top button
- Counting how many elements are inside a another element (e.g. how many paragraphs inside a div)
- W3Schools -> How to create a slideshow (Carousel)
- A Beautiful Site -> Creating and removing elements with JavaScript
Back To Top Button
I followed this tutorial from W3Schools to make the back to top button. I am in the process of making my own animated and slowly scrolling version, and will update this once it is done.

Coming Soon Image
I wanted to display a friendly image to the user if they clicked on a category that didn't have any articles written for it yet. So I added an image of a panda to my page, and used CSS to hide it from the page (display: none).
I used JavaScript to check if any articles had been displayed on the page yet by looking inside the articles div and seeing if there were any h2 elements inside (for displaying article titles). If no titles were inside, then the panda would be revealed (using JavaScript to change value of display to "block"). If there was one or more titles found, then the panda would be hidden again.

Problem Solving Carousel
The problem solving carousel is an interactive tutorial I created to help people learn how to break down programming problems into input, output, sequences and decisions. The functionality for this one deserves its own article, one that is in the making and will be linked to here once it is done.

SQL
- Code Academy -> List of SQL Commands
- Web Vault Wiki -> Creating database tables in PHPMyAdmin
- How to move database from local server to website server
- Relational Algebra for writing SQL queries
- How to Design an SQL database
- Creating a categories and sub categories table in SQL
Select Statement
The select statement works on a single table, and creates a new table containing only the rows that meet a condition statement. I used it to select only the categories whose parent_id was set to NULL, which meant they were the main categories. If the parent id was set to a number, then it is a subcategory of a category whose id matches the parent_id.

Left Join Statement
The left-join statement returns all rows from the left table, even if there are no matches in the right table. I used it to join the articles and categories table by article id and category id. Allows me to access category names for each post in the article (whose category names are represented by integers in that table).

Inner Join Statement
The inner-join statement selects all rows from both participating tables as long as there is a match between the columns. This combined both of the tables so that all category names in the category table matched up to the posts in the articles table. Allows me to access all of the other attributes in both tables too, which was important for displaying blog cards and blog posts.

PHP
- PHP Connect to MySQL
- How to use foreach to display data from a database
- Simplifying navigation menus with PHP includes method
- Create pagination in PHP and SQL
- Loop through a colour aray and apply as background colour
- PHP Date Formatting
- How to make a reading time calculator for WordPress with PHP
Includes() Method
The includes() method allows you to include other files into your document. I used it to add the navigation menu to the top of each page, so if I needed to make any changes to the menu, I only need to edit the original navigation menu file. I also used it to add the database connection scripts to the top of every page that needed access to the database.

Foreach Loop and Echo
The foreach loop and echo statements are used to cycle through each of the articles and display their data values.

Pagination
I created a set of page number buttons. The number of page number buttons created depends on how many articles were selected using an sql query. The number of articles would be different depending on which category was selected. I created a variable called articles_per_page which stored the number of articles I want to display on each page. The number of articles divided by the articles_per_page, then rounded up gives the number of pages there should be. Each of the page buttons were assigned a link that takes you to "index.php?page=" + number.

I then used the $_GET method to check which page we were currently on. When we click on each of the page buttons, a number corresponding to that page gets added to the URL. If the page number in the url matches the page number of the button we have clicked on, then we are on this page so the background colour for that button is changed to purple to show that it is active, whereas the background colour of all other buttons are changed to grey to show that we are not on any of those pages. If we have just visited the index page for the first time (and no page number has been added to the url by clicking on a page button), then we set the page number to one and change the colour of page number button one to purple.
In order to display 4 articles on one page, the next 4 articles on the next page and so on, I created a variable called $start, which contained the page number we are on - 1, multiplied by the articles per page variable (which contained the value 4). If we were on page one, (1 - 1) * 4 would give us zero, which when used in the LIMIT part of the SQL query, means that we would be displaying articles starting from index 0. If we were on page two (2-1) * 4 would give us four. So on page two we would be displaying articles from index four.
Random Colour Assignment
I created an array of colours and a variable called index set to 0. I then created an if statement that said if the index number was bigger than the number of colours in the list, set the index number back to o to start from the beginning again. This if statement was contained inside the foreach loop that I used to display data from each article, so the if statement then became a bit of a loop itself. The background colour of each category was set to one of the colours inside the list, accessed using the index.

Date Formatting
I used the date_create() method to turn the date string inside the article database into a date object, then used the date_format()* method to convert the date into the right format. In my case I created three separate date_format objects for the month, day and year so that I could target them individually using CSS.

Word Count to Read Time Converter
The word count to read time converter gets article word count using the str_word_count() method, divides the result by 250 (average number of words people read a minute), and then rounds the number up using the ceil() method to get a whole read time number.

Complete Resource List
All of the resources in this list gave me aha moments when I was stuck trying to figure out a problem. If you want to build your own blog CMS, reading through these first will give you a huge step up. I have also included a list of useful tools that also came in handy during the build process, but are not directly related to the CMS.
CSS
- CSS Tricks: A ton of bitesize tutorials for doing pretty much anything with CSS
- 10 Best CSS Practices
- Smashing Magazine: Challenging CSS Best Practices
- CSS Tricks: The art of Comments
- W3Schools -> Media Queries
- Free Code Camp: An extensive guide for using CSS variables
JavaSript
- W3Schools -> How to create a back to top button
- Counting how many elements are inside a another element (e.g. how many paragraphs inside a dib)
- W3Schools -> How to create a slideshow (Carousel)
- A Beautiful Site -> Creating and removing elements with JavaScript
SQL
- Code Academy -> List of SQL Commands
- Web Vault Wiki -> Creating database tables in PHPMyAdmin
- How to move database from local server to website server
- Relational Algebra for writing SQL queries
- How to Design an SQL database
- Creating a categories and sub categories table in SQL
PHP
- PHP Connect to MySQL
- How to use foreach to display data from a database
- Simplifying navigation menus with PHP includes method
- Create pagination in PHP and SQL
- Loop through a colour aray and apply as background colour
- PHP Date Formatting
- How to make a reading time calculator for WordPress with PHP
Useful Tools
- Font Awesome: An icon set that I used to display social media icons (GitHub, Codepen, Twitter). I chose font awesome because it lets you change the colours of icons as if you were changing the font colour of text, which makes hover effects easier to implement.
- Google Fonts: Lets you add a unique font to your website that will render properly on all machines. Instead of having to rely on web safe fonts only. I used this to make my introduction text look like handwriting.
- CSS Clippy Lets you change the shape of elements (all elements are typically rectangular) into unusual shapes. I used this to turn my introduction text into a speech bubble.
- Canva: A really awesome resource for creating images and inforgraphics. All of my featured images were made using this
- Screencast-O-Matic: Used to record your screen which you can then download as a video file.
- Gif Maker: I used this to create an animated walking duck. I drew two images of a duck, uploaded them to this website and turned them into a GIF animation