Yes you read it right. By the time this series of posts related to creating your own custom CMS is done you will be able to code your own Custom CMS. Forget those spammy MFA turnkey sites. Get something unique for yourself. I will also put in steps that will give you more flexibility to make your CMS little bit different then the others.
This topic cannot be covered in just one blog post, so there will be a series of blog posts for some weeks specifically focusing on making your own custom CMS. Sorry forgot to mention that those who don’t know what a CMS is… It’s a A content management system (CMS) which can be used to create, edit, manage, and publish content in a organized manner.
So we will start with brainstroming. What we want and how we will achieve it.
We want to make one CMS that can allow us to post lets say news items and upcoming events in your city.
The very first step would be to design a template for the CMS.
We will use Photoshop for it.
So get your Photoshop ready and create a new document with a width of 780 and height of 200. Forget the rest we will manage it with the existing design by resuing the same images.
For this tutorial I have made something like this below: (The image has been resized to fit)
Here is the PSD of the demo design if you want to download and see how I have made it.
I have it sliced and ready to be exported. So all you have to do is open it up change things if you want to. Go to File >> Save for Web and export it.
You will now have one HTML file and one images folder with 3 images in it. the 3rd one is just for the sake of it.
You will also need to have a localhost set on your own PC. If you do not have localhost set on your PC then read my recent post: Setting Up a Web server on your PC
You have to move this HTML file and the images folder in your localhost folder. Name the folder as “citycms” [We will use this folder for this whole series]
Just to confirm that everything is in right place. See that you have “citycms” folder in your “site” folder of localhost. In that “citycms” folder make sure you have citycms.html and “images” folder with its images in it.
Rename the citycms.html to index.php
Go to your browser and visit the URL http://localhost/citycms/
In next post I will continue with coding and setting up the skeleton for the whole thing.