Working with WordPress – Part I

Posted on Tuesday 18 September 2007

So the decision being made to go with WordPress the next step is…. how? Being an old fashioned manual HTML designer, I really had some difficulty wrapping my mind around the inside parts of WordPress, namely PHP and CSS files and how they create the various themes that are out there!

I knew what I basically wanted. The main menu on the left, with extras and Google ad’s on the right along with other points of interest. I also wanted a layout or “theme” that reflected my retired lifestyle, and of course my love of a really good cup of coffee…

I decided that I would not try to build a theme from scratch, but rather work with something out there that I liked and try and modify it where necessary. The main reason I chose this route was that I wanted the blog up and running and not just sitting idle for a couple months while I figured out what I wanted to do… and how….

WordPress itself has numerous themes readily available, it actually installs a couple to play with when you follow their tutorials and has developed a really nice way of viewing them “up close” before you actually install them around your own data. So I experimented there first. You can actually access more of their themes within the WordPress Dashboard itself or go directly to their themes site at themes.wordpress.net.

I was amazed at the variety and depth of samples available. It was there that I found a sample that I really liked, Coffee Cup 1.01 by Zenith. It was very, very close to what I was looking for. I also found another theme that I liked on a different website that supported WordPress themes www.seo-themes.com, not so much for the color, but for the way its side bar worked.

After I downloaded and unzipped these the two themes, I then uploaded them to my themes folder within the WordPress file structure on my blog site. The really great thing about WordPress is the way that you can change your themes instantly within the Presentation portion of your Dashboard. You can actually load the different themes that you have uploaded and immediately see how they look on your own website.

You also have options, within the Presentation menu, that allow you to edit and modify all the various pieces of the theme and make them more your liking. That being said, all of them were either PHP files or the CSS file itself (see up above about me being a simple HTML builder at this point to see my concern).

One thing that I noticed right away, when I looked at the internal file names of these two sets, was that both of the themes I was interested in had a file named “sidebar.php”. So I took a chance and actually swapped in the sidebar file from the seo-themes file for the same file that existed within the Coffee Cup theme that I liked. I was both amazed and excited when it actually worked! My Coffee theme was coming reality!

The next step was to change the photo within the header of my page. While it was a coffee cup, it wasn’t my coffee cup. It took a quite a few iteration and attempts for me to get a picture I liked, that reflected me. The final result you can now see in the header, my coffee cup with my feet (reflecting my retired attitude of course), resting on my desk. 😉

The picture required some manipulation to fit the same size window that already existed within the current theme. To do this I used one of my favorite tools for picture/photo manipulation, Adobe Photoshop Elements. I was able to measure the size, pixel width and height of the original photograph and then cropped and resized my new picture (which I had already taken in Sepia) to the same approximate dimensions as the photo that was there and then replaced the original photo using the same name.

Now I had to start tackling some of the more specific aspects of my web page and to do that I would have to start diving into the mysteries of PHP and CSS. As usual, I went to Google to do my research and found two very highly rated books that I thought would help me:

  1. WordPress Complete by Hasin Hader
  2. PHP and MySQL Web Development by Luke Welling and Laura Thomson

Unfortunately these two books alone would have cost me over $80, which made it a little prohibitive for me to pursue. So I checked the library and both of these books were listed as being very high in demand, but the library didn’t have any available, so that too was out. My wife recommended that we check out our local bookstore just to see if they might have something that would suit, in the meantime I also checked out the web for free tutorials.

My Google search turned up what I think is a really great tutorial site for understanding WordPress, along with several others that I might use later for PHP:

  1. www.thejunglemarketer.com – this site offers a lot of free tutorials related to web marketing subjects. I used their free downloaded video tutorials (registration required) to learn a lot about manipulating WordPress. I was able to decide that a book on WordPress wasn’t necessary based on this website, along with all the great material available from WordPress itself. Unfortunately it doesn’t seem to have anything on PHP itself.
  2. www.w3schools.com – they start off with the assumption that you know HTML/XHTML and some scripting knowledge. Thankfully I do, but others might find it intimidating.
  3. www.freewebmasterhelp.com – this site also requires that you be knowledgeable in writing scripts and assumes you understand the basics of building databases it focuses a lot on the interaction between MySQL and WordPress.
  4. www.tutorialized.com – also offered a wealth of various PHP tutorials, but was very specifically, in my opinion, aimed at those who knew more than the basics of programming and scripting. It contained a lot of ideas, tutorials and suggestions for different projects you might want to tackle. But not for the faint of heart.

So I had two great free sources for WordPress, and a lot of information about PHP but nothing that I got excited over. I had also, during this process of investigating PHP resources, taken a closer look at the code behind my web theme and realized that I had overlooked the power of CSS entirely!

We went to the bookstore to see what was available. There I found two very affordable books, written at the entry level, but both quickly moved to cover more advanced techniques. One on CSS, and the other on PHP and the cost was under $35 for both! I highly recommend these for anyone starting out. They make a great quick reference, are easy to read and you can even download their examples off the web. They are:

  1. CSS in easy steps – by Mike McGrath
  2. PHP 5 in easy steps – by Mike McGrath

These books, source material and many other books on various computer topics are all listed on www.ineasysteps.com. Based just on what I have already read and used, I would highly recommend any of Mike McGrath’s books. They are actually published in the U.K., and you can find them at amazon.com or by clicking on my links below. They are absolutely worth the purchasing. They are a great resource for both the beginner as well as the more advanced user.

So, now armed with a better understanding of CSS (not yet quite ready to tackle PHP, yet) and that great coloring tool, that I talked about earlier (Absolute Color Picker)I was able to change and adjust the colors of the links within my website to a more, for me, appropriate color.

I’m still reading my book on CSS and am amazed that I hadn’t discovered this great tool earlier. I’ve written and help publish more than 6 websites over the past few years and a tool like CSS would have helped immensely!

I still don’t have a second panel on the right hand side of my blog, for Google and other sites that I might want to put there. I also have not decided if I want to keep my panels available in all pages or just some, the same goes for my header on top…

Obviously my website isn’t quite perfect yet, but it is personalized enough now to call it my own. Stay tuned, as I tackle the rest of the site over the coming weeks, I suspect there may be a few tidbits or stories out there that you may enjoy…. Till then…

End Article

Please Add Your Comment. PLEASE NOTE: Your comments WILL be held until authorized by the webmaster.


Google
 
css.php