Why/How I ditched WordPress in Favour of learning HTML....

[BigBird]

...And it was easier than I thought. (">

Don’t know if any of you remember the site I created for my mate's garage business a couple of years ago. It was created using WordPress. Well earlier this year I needed to add a few items into the right sidebar widget, but it wouldn’t let me. A google or two later I found that others had experienced a similar problem.
The advice was to deactivate the widget and then reactivate it. Problem is it wouldn’t let me do that either. I suppose I could have removed it completely from the widget folder (don’t know how the WordPress interface would have reacted) but then it would have to be reconfigured and the content added all over again. I did another google search to see if Drupal was more reliable. Would have been another learning curve but now I was pissed off with WordPress and determined not to rely on it any more. Well it seems Drupal isn’t much better. Some people were experiencing similar problems with Drupal.

Decided it was not a good idea to rely on a CMS like WordPress or Drupal any more. Apart from widgets that sometimes stop responding for no apparent reason you have the problem of sometimes needing to update them when you update the main CMS interface. Then the new version of the widget may have issues with the new version of the CMS or create a conflict with another widget that you are using so then you end up experimenting with similar widgets that may or may not do the same job. Creating the initial website may be relatively easy but could become a right pain to sort out somewhere down the line when something goes wrong.

Looked at a couple of WYSIWYG drag and drop editors but each had different limitations which put me off. Then decided to load up CoffeeCup html editor which is a free program. This had the added benefit of not having to install ripped off software and feel like a guilty criminal every time I loaded it up...LoL as if.

Fired it up and clicked on File - New from theme/layout - Default layouts. From the list I selected 'Three column Fixed 2'. Then clicked on: View - Split screen preview(F12). From that point I never looked back. Found it as easy as learning WordPress but much more rewarding. Click anywhere in the preview window and it highlights the corresponding code in the editing window above. The preview window also shows in real time every change I made to the code in the editing window. At that point I knew that this was the way to go. I found that watching in real time how my edits were changing the page was a great way to learn html code. Any html tag or code I didn’t understand was easily explained by a quick search on the w3schools.com website. Things were slowly happening in the way I wanted them and I was hooked and enjoying the learning experience. I was stuck for a couple of hours on one or two things but by now nothing was going to put me off because I was getting results.

One important thing I found was to name all files with the 'php' extension rather than using 'html'. I used some freely available php code for a contact form and named the file with the 'php' extension but couldn't call it into my 'contact.html' page. Renaming the 'contact.html' page to ‘contact.php' solved the problem. A .php file does not need to contain any php code. It can contain just simple html code, so just name all the files with the php extension from the very start regardless of whether you intend to use any php code. The exception is a CSS file which needs the CSS extension.

Didn’t take long to find out that it was easy to create a CSS file, I called it ‘mystyle.css’, and move the page formatting code from the index.php file into the CSS file. Then I could just link to that from any/all php pages using the simple line of code shown below. I could then clean up/reduce the amount of code in my php files.

---------------------------
<link rel="stylesheet" type="text/css" href="mystyle.css">
---------------------------

I could now modify the style of all my pages by simply making changes to the one CSS file. I already knew what CSS files were for but didn’t realise it would be this easy to implement. You could even create more than one CSS file if you wanted a different formatting or layout for one or more of your pages. You could also change the whole site formatting and layout with a CSS file you created in advance. Not by editing every page to link a to a the new CSS file but by simply changing the name of the new CSS file to the name of the original (after renaming the original CSS file to something like ‘mystyle_old.css’ obviously – just in case you want to switch back at any time).

The header, left sidebar, right sidebar and footer contents are also contained in separate files which are then 'included' into the main page using:

---------------------------
</div>
<div id="navigation">
<?php include 'side_left.php';?>
</div>
---------------------------

</div> defines a separate section on the page and "navigation" is just a name for that particular section which in this case will contain the side menu. I created the menu using simple html in a file I called 'side_left.php'.
The ‘navigation’ section is positioned using a simple line of code which is contained in the CSS file:

---------------------------
#navigation { float: left; margin-left: -960px; width: 200px; }
---------------------------

And the menu which I created in the ‘side_left.php file is placed inside that section using the ‘php include’ command. It really is much easier than I thought it would be.

I included the navigation section on all pages because I want the menu visible on the left of all my pages. For the right sidebar however I wanted different content for different pages.

Correct me if I'm wrong but in my experience WordPress is restricted to having the same content in the sidebar widget regardless of which page is being displayed. Now without that restriction I could easily have different content in the right sidebar of different pages. In my WordPress site I had to place the images for the 'Service', 'Repair', 'MOT', etc. pages below the body text which made the page longer, which required scrolling to view them, but now I could have the different images for different pages displayed in the right sidebar thus reducing the page height.
I could also create other php files with different content and name them something like 'special_offer01.php', 'special_offer02.php', ‘autotrader_award2005.php’ ‘opening_times.php’ etc. and include any one or more of them in the right sidebar area (or anywhere else for that matter) of various pages.

Had good reviews about the design of the original WordPress site so for now I wanted to create the new site to look something similar to it. I have achieved that and more because I wasn’t confined by the restrictions imposed by using WordPress. I would seriously recommend to anyone wanting to build a website to consider using something like CoffeeCup and learn to code it themselves.

The one massive improvement is the page load speed. WordPress pages were taking a couple of seconds to load, even if they had already been visited before. At the time I put it down to the hosting company, but, still using the same hosting account, the new pages load almost instantly so the problem was WordPress. I’m not surprised. The same or very similar site I created with WordPress was just over 50MB. The new site is 8MB. That’s a huge difference and is probably down to the interface and widgets and also the thousands of lines of redundant code which WordPress contains. When creating the original WordPress site I still had to manipulate some code to get it to work properly and that can be a nightmare because there is so much code to look through to find the part you need to change. The pages I created using coffeecup are easy to edit because they are clean, don’t contain unnecessary code, and I created them myself with my own comments for future guidance.

If you plan on creating a web page and are put off learning some html, and possibly some php, then I hope I have inspired you to have a go rather than confuse you and put you off.
I was initially put off by the thought of learning html and php but if you use CoffeeCup as the editor with one of the built in layouts as a starting point, and the w3schools.com website as your reference for any html tag you don’t understand, then I don’t think you will go far wrong. Also remember to comment your code so when you come back to it later you will understand what you did before.

Here is the site created using CoffeeCup html editor. http://www.revsmotors.co.uk