Planning your WordPress site
Planning your WordPress site : All sites grow. If you don’t plan your site from the beginning it will quickly get out of control. I always plan for growth. I have had sites grow from a few pages and then a couple of months later they had over one hundred.
Here is the overview of my work flow.
- Sketch out your pages
- Coding in HTML and CSS
- Redesign for sustainability (Code for CMS)
- Test & Upload to production server
- Launch the site
Sketching out the pages
This is basically finding out what you want to include – the various elements and how they work together. Sketches can be very simple to mock ups that include all the graphical elements. If your are working on this for yourself a simple sketch will suffice, but if you are working with a client then you will need a full rendering of the pages as most clients need to see “what it will look like”. There are various programs that can help you with this depending on you OS. I prefer to do it in GIMP because I am familiar with it. It is where I make most of the graphics anyway so it feels natural to me to use it.
Coding the HTML and CSS
This is where we actually start writing the pages so that they will display in a browser. Use a CSS Framework like Bootstrap to make your life easier. Many of the things that you would put into a CSS file are already done for you. You can modify or add your own with a site specific CSS file, but you don’t have to start out from scratch every time you write CSS.
Redesign for sustainability
 |
Once you get the site coded and it looks the way you want it you can start to redesign it so that you can quickly and easily add new features and pages to it. This involves designing it for a CMS (ie. WordPress) with PHP, MySQL and SCSS (to produce a consistent style sheet). |
Making your own theme takes a bit of time but it will give you the look and feel that you want. There are a number of starter themes that already have CSS frameworks built into them all of these are for WordPress.
- Underscores – this is put out by the WP team
- JOINTS WP – Comes bundled with Foundation (Another CSS Framework)
- Understrap – Bootstrap CSS and WordPress
- SAGE – Roots framework
You can also opt to make a child theme from an existing theme if the theme offers what you want.
The minimum that you need for a child theme are:
- style.css
- functions.php
- screenshot.png
To test your theme out you can get “dummy content” – pictures, posts, pages and such from WPtest.io . This will give you the opportunity to check out what your theme will look like when content is added.
Test & Upload to production server
Test out all of the pages in various browsers and versions of browsers. Do they look and act the same? (or at least work) You may need to adjust your CSS to accommodate various versions of Internet Explorer or Edge. Let Google and other search engines know that you are in business. The best way to do this is with a sitemap. There are plenty of SEO plugins that will do this for you and update them too. Hand submitting the important pages to Google, Bing, Yahoo and others will let them know sooner than waiting for their Bots to come your way. If you have an eCommerce part of your site test it all the way through. Do you get notified by email someone has made a purchase? Is the postage and box sizes correct for the items?
Launch the site
The final thing to do is to make your site visible to the whole world. This is the part that you can “hand over the keys” to a client.