So final year has dawned and one of the requirements for our 511 module is to regularly maintain a blogging site to show our progress by the depth of our research, our ability and skills in prototyping and anything we find interesting or linked to our major projects.
So I decided, that I wanted to learn and experience WordPress for myself, as I have never had to use this blogging platform. This platform seemed liked one of the better platforms to use due to the many advanced and secured features that it offers. Using wordpress also give me the extra beneficial factor that I could host the platform, this ensures that their will be no unscheduled downtime which has been known to be traits of Tumblr and other such blogging sites.
As I was a complete novice to using wordpress, the first solution to over come this was to find blogs and articles on how to set it up. I looked through various tutorials but (the article linked below) Solostream was one of the best in-depth and step by step tutorials that helped me get through those first WP blues!

Solostream was able to explain all the fundamentals of getting your WP site downloaded, adding the correct files to your domain via ftp and so on. It then went to to explain in detail the mySql and databases. This sounded scary but was simplier than I anticipated. A database was simple created by calling it a name and adding a password to it, once this was completed, this information along with username and hostname was then entered into the wp-config-sample file. The hard part was now done and the new file was added to the other files on the server. To finish the installation I typed into my address bar and after a few simple steps, I had accomplished my first WP installation.
The next stage was to explore the wordpress dashboard and all the features it had within it. The detail within the dashboard was amazing and all of the extensions where delightfully taken in as I felt they have nailed the usability and simplicity of there product. After I had quickly came to terms with the dashboard and its features I now had came to my next climb.

The Web Design

I started this not knowing where to begin and I mean this in terms of how to implement it via WP. As a lover of blogs I took to the web to find out how to merge my site into the WP theme section. I found some really interesting blogs with great detail on where to structure your code and why you where doing it in such ways. This helped me a grave deal as I was learning how to structure my code in the WP format and also learning what the php code was doing, this enabled me to remove parts etc without the theme collapsing.
The three main blogs (listed below) I used where amazing, they provided source files so you could view the code in greater detail, they broke down the process of how to adjust your code, they explained how and why you had to do certain things within your code and much more.



After reading and researching from all of the blogs and taking notes of what I had to do and how to do it, I started converting my HTML site to a WordPress theme. From online recommendations I decided to download the BlankSlate theme created by TidyThemes, version 1.7. This theme was a great start as it had only the basic code, this making it very easy to customise. Once I installed this theme I started breaking up with code within the pages.
For example this basic coding function below, calls certain parts of my post – the title, date, month and also the amount of comments that are attached to the post. Its all very simple, once reading it, and learning it is then very easy to see what the functions are doing.

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post">
<div class="post-date">
<span class="post-month"><?php the_time('M') ?></span> 
<span class="post-day"><?php the_time('j') ?></span>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><?php the_category(', ') ?></span> 
<span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span> 


A lot of the transitions within the cross over from HTML to WP where very easy. For example the header file (below) was just copied and pasted into the head file with some additional php code within the stylesheet link. The extra coding was simple small php snippets that where very well explained within all the blogs, without these small snippets the pages would simply not load.

<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>

<meta charset="utf-8" />

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" />

Once all your files where structured they had to be linked to one another. For example if your page requires your footer, you include the below code in the correct section of your page. The most common place for the footer code is to be positioned at the bottom of the page, and the header code at the top. This code is very straight forward and doesn’t take up a lot of room within your files. The structure is the same for calling other sections of code.

<!--?php get_footer(); ?-->

<!--?php get_header(); ?-->

Once I had learnt the basics and set up most of my Wp site I then started to add other features. I had originally created a sidebar but felt it did’nt mesh with my design. But since writing this post my site has changed, so the sidebar may come back. The great thing about this, the code is still positioned within the theme, but the call functions where deleted, therefore if I add it again, it will be done quite easily.
I decided to create a contact form for my contact page, so I had created my html form and had all the code ready. I had a few problems integrating it, so I read some similar blogs and the outcome in all of them was a similar plugin. This plugin was called Contact Form 7. It was very quickly downloaded, activated, and added to the contact page, but the css was very basic and dated. So I decided to tackle this straight on and figure out how to fix this. I found the css with the plugin folder and spruced it my up my own way. Below is a snippet of what I added to the input box.

.wpcf7-form p input{

width: 200px; margin: 0 5px 10px 0; padding: 7px 5px; border: 1px solid #eee;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;


background-color: #fff;

background-color: rgba(255,255,255,0.4);

text-shadow: 0px 1px 2px #fff;

color: #111;

font-size: 14px;

font-family: 'Droid Sans', serif;


Within WP I have done numerous problem solving tasks from finding out why my Archive page was not being viewable when creating a page to sourcing problems within my posts section. All this has helped me learn more about myself and Wp, on how to solve to problems and how to fix them effectively and efficiently.
I feel I have progressed on my own my very well within the WordPress world. This has been beneficial for me as I have proved I can learn new types of code and software in my own time and have a feeling of self progression outside of the academic world.

How To Build Your Own WordPress Theme
undefined, 08/10/2011, How To Build Your Own WordPress Theme [Line25 Web Design Blog], [online]. Available: [08/10/2011].


How to Build a Custom WordPress Theme from Scratch
undefined, 08/10/2011, How to Build a Custom WordPress Theme from Scratch [Blog.SpoonGraphics], [online]. Available: [08/10/2011].


Building Custom WordPress Theme
undefined, 31/12/1969, Building Custom WordPress Theme [Web Designer Wall – Design Trends and Tutorials], [online]. Available: [08/10/2011].


How to Install WordPress | Solostream
undefined, 08/10/2011, How to Install WordPress | Solostream [Premium WordPress Themes | Business Templates], [online]. Available: [08/10/2011].

© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure