How did I build my WordPress web site? (Part 2 of 2)

This is the continuation from my previous post.

Ok, so after I design my site, modify the HTML, CSS to my theme to achieve the look I wanted. I then downloaded all the plugins I needed and activated the plugins. Now it is time for some cleaning up through w3c and testing different browsers. I like to display my web sites on different browser platforms to see if there are any errors or bugs and to see if everything display properly with all browsers.

When I activated some plugins, it will sometime embed some CSS and maybe other JavaScript on the header or even somewhere inside the HTML body tag on my web pages. Sometime, these extra coding will not pass the w3c markup validation and I like to get all of the extra coding embedded by the plugins to be place externally. Which mean I will have to go in each plugin and manually find which JavaScript and CSS. Then have those all removed from my web pages and have them link externally to different files.

I will put the CSS code that were inserted by the plugins into my theme external CSS style – /wp-content/themes/my-theme/style.css and I’ll create a folder inside my theme called js, then inside the js folder there I’ll create a JavaScript file called javascript.php. I then paste all the JavaScript that were embedded on my pages into the javacscript.php and link my web page to the javascript.php with this code below.

1

<script type="text/javascript" src="http://tbxstudio.com/wp-content/themes/tbxstudio/js/javascript.php"></script>

Finally, I’ll go in and remove the JavaScript and CSS codes embedded into my web pages by the plugins, but how to find which plugin folder and which file to open to remove the codes? In most cases, when I’m looking at the source code I can see the tag like this Which tells me exactly which plugin to look for. Then I go to the plugin folder with my CuteFTP software and open all the php and css files inside the plugin folder. I’ll hit Ctrl+F to get the Find/Replace tool, check mark “All open documents” and search for the codes I want to remove.

Of course, when you upgrade the plugins the codes I have removed will come back embedded into my web pages, so keep that in mid. Also, sometime you cannot remove the JavaScript from the pages because if you do the plugin may not work. When that happen just leave it alone.

After I have removed all the embedded codes inserted by the plugins and link them to the external CSS and JavaScript files. It is time to validate my web pages through w3c.

If you want more in depth explanation why it is important to validate your web pages with w3c read here. If you ask me why I validate my web pages with w3c it is because a lot of time it’s hard to find errors in the HTML, CSS files even with the best HTML editor. With the help of w3c validation, it allows you to view the errors and if there are errors, it will show you where errors occur. I validate not only my homepage, but also other single pages, single posts, search pages, achieve pages, tag pages, category pages, and even the 404 page.

After I have cleaned up all the code and validated my web pages through w3c. It is time to validate my CSS. Again, this may take some time. Check it out here.

HTML and CSS is similar to many other web languages and each web languages have web standards. Without these standards, there will be no rules and everyone will end up making things differently. These web standards are use on most major browsers and w3c will help you check your web pages for these web standards. By passing the w3c validation, it will ensure your web pages will look the same with all current major browsers and you will know your web pages will display correctly on future browsers.

Once the entire cleanup is done and validation is completed. It is time to open browsers like Firefox, Internet Explorer, Chrome, Safari and Opera. I like to open up all of these browsers to check to see if my web pages are displaying properly. Don’t forget to check IE6, IE7, and IE8. You can use this software to display different versions of IE.

That’s’ it! That’s my process of creating web pages. If you think I miss some other important points, don’t forget to add your comment below. Happy web designing.

Related posts: