In this post I will go over all the great features that I have on my new website, as well how I built it, explaining the step by step, so anyone could build their own WORDPRESS site.
I had a BLOGSPOT website where the design limitations were upsetting. Changing to WORDPRESS not only gave me better design features, but also interaction and control features that are simply um comparable with BLOGSPOT. The bad side though is that I had to learn how to build a WordPress site from scratch. I didn’t want to use any available WordPress.com templates because I didn’t like them. So I ended up building my own.
Prior to this experience I didn’t have ANY knowledge of PHP, CSS, MYSQL, and DREAMWEAVER. I had to learn everything from the beginning. At first I thought it would be impossible, but it is not as hard as it seems. Of course that I have some knowledge of computer programming. If I didn’t have it, then I couldn’t do it. I don’t suggest for a person that is computer illiterate to jump in here thinking that they can just do it. It will be frustrating trying to figure and managing the gigantic amount of new information. I am definitely not the best teacher, but I will go over how I did it and maybe, just maybe, help someone who is trying to create their self-hosted WordPress site. Please, don’t expect to get all the pieces here. If you are trying to go over this route, you will have to do a lot of research and testing on your end.
It took me one week and a half to build this website. There are many steps in order to create a website totally customized as this one. The steps are: 1- DESIGN, 2 – LOCAL SETUP, 3 – PROGRAMMING, 4 – HOSTING, 5 – EXPORTING.
Instead of designing a site from scratch I started by selecting a custom design from a library of designs that I have. The one that I liked is called Video Flick, from Press 75. I liked the feel of it and the fact that it has a lot of visual links. I started the design by changing the width of the posts and also changing the background. I changed the header for the home page to be different than the header of the post pages. I also changed a lot of little other minor things.
Most of the changes happen in the STYLE.CSS file. The best way to edit the stylesheet file is to integrate your WordPress theme with Dreamweaver.
2- LOCAL SETUP
To work your site locally and create a unique custom design, the best way is to integrate WordPress with Dreamweaver. There is a tutorial that teaches how to do this integration. I followed the steps of Lynda.com. This tutorial got me from the noob level to better than noob, but still noob level. If you want to try the tutorial before buying it, you can always look around for alternative ways of getting it.
That’s the hardest part. As soon as I got the hang of it, it became easier. The best way to learn is by trial and error. By the fact that I was working on a local site, I didn’t worry about messing up my page. I made as many mistakes as I could. I just made sure that I had a back up so, if needed, I could reset everything. The only two files that I messed with were CSS files and PHP files.
CSS files contain the styles of each element in your page divided by category. Which in noob terms means that to center a “post content” I would have to set the category responsible for Post Content on a specific CSS file.
PHP files are like HTML files. They contain the programming of each part of the page. The way WordPress handles pages is by calling a bunch of different php files for each part or function of the page. The header of a WordPress page is inside of the header.php for example. The post content of a WordPress site is inside of the single.php page.
The files that I changed most of the time were style.css (responsible for all the major styles of everything inside the site), header.php, single.php, footer.php, and functions.php. During this process, I did a lot of Googling and I messed up a bunch of times. As soon as I started to make mistakes, and fixing theses mistakes, I became more knowledgeable to a point of knowing exactly where to find my answers when I needed to change something.
As soon as I was done with my LOCAL DESIGN, it was time to transfer everything to a web host. There are a lot of good places to find a host for WordPress. The one that I selected was GoDaddy because my domain is register there and because they have a very easy to install platform. I know that you NEED a server that handles PHP5 and you also NEED a MYSQL database. It cost me 100 dollars for 3 years. For this money Godaddy gave me 10 Mysql databases, 10TB worth of space and unlimited bandwidth. Which is a lot for my small personal website.
To transfer everything to the web host was easy. At this point I already knew what folders to copy, what files to change, and how to troubleshoot. A key to this transfer is to keep the folder structure the way it is. WordPress has a unique way of handling the files. I didn’t mess with the structure since the beginning and that helped me to have the site without any code problems.