Where things are in WordPress

In my initial struggles with WordPress, namely the PHP that I am not versed in… I was going a little bonkers. Where do things go? I was using a nice editing/design suite, Artisteer, but that still didn’t get me where I was trying to go with logos and such.  Ok so maybe I was looking @ doing some heavy customization, that isn’t applicable to a basic blog, BUT… that is what I wanted to do.  So you surely have seen the dashboard for WordPress, right? LOL … I decided to just whack away @ the PHP code until I figured out where it was going and how it would affect my page(s)/design(s).  For me the command line is how I work best and it is basically instant for changes so I would suggest having a browser open on your site/page and dive in using SSH to the root of your wordpress theme files. This is one of my favorite themes, Bloxy Two:

[root@centOS54 bloxy-two]# pwd
[root@centOS54 bloxy-two]# ls -l
total 192
-rw-r–r– 1 root root   233 May 22  2009 404.php
-rw-r–r– 1 root root  3510 May 22  2009 archive.php
-rw-r–r– 1 root root  3783 May 22  2009 comments.php
-rw-r–r– 1 root root  1141 May 22  2009 footer.php
-rw-r–r– 1 root root  2969 May 22  2009 functions.php
-rw-r–r– 1 root root  3017 Mar  4 16:43 header.php
drwxr-xr-x 2 root root  4096 Feb 19 20:21 images
-rw-r–r– 1 root root  1750 May 22  2009 index.php
-rw-r–r– 1 root root   704 May 22  2009 page.php
-rw-r–r– 1 root root 64078 May 22  2009 screenshot.png
-rw-r–r– 1 root root   532 May 22  2009 searchform.php
-rw-r–r– 1 root root  1380 May 22  2009 search.php
-rw-r–r– 1 root root  2127 May 22  2009 sidebar.php
-rw-r–r– 1 root root  2652 May 22  2009 single.php
-rw-r–r– 1 root root 10398 May 22  2009 style.css

So being in this root theme directory, you can now make changes to all of these files using your favorite editor.  It is worth mentioning (I really shouldn’t have to though) that the wp-admin page provides you with the ability to edit these same files.  OK, now although it may seem straight forward, this part may or may not be.  It depends entirely on how the Author created the template/theme.  For example, the footer.php file my not even exist?? Say what?? LOL No worry, you can always create it, but first get to know the theme and how it works.  The best way to do that, if you are not PHP savy, would be to just start making some basic changes to see how it all works.

A good point of note here would also be to take a look at the /images dir under your theme root. This can be quite revealing in terms of the layout; i.e. what was created with Photoshop and what is based on just background colors and texture simulations.

So in keeping with the footer, lets take a look @ it shall we?  Honestly, most of it means nothing to me.. and most of it you can just leave alone.  I wanted to add some navigation to the file so here we go trying. I ended up with this:

<a href=”http://annlee-entertainment.com/”>Home</a&gt; | <a href=”http://annlee-entertainment.com/?page_id=1″>News</a&gt; | <a href=”http://annlee-entertainment.com/?page_id=6″>Contact Us</a> | <a href=”http://annlee-entertainment.com/?page_id=23″>Terms of Use</a> | <a href=”http://annlee-entertainment.com/?page_id=25″>Trademarks</a&gt; | <a href=”http://annlee-entertainment.com/?page_id=38″>Privacy Statement</a><br /><br> <font color=#000000>Copyright &copy; 2010 <?php bloginfo(‘name’);?> Entertainment, LLC. All Rights Reserved</font></p><br>

Which renders as this:

Which was exactly what I was looking to do. See not so bad.  The funny thing is that this code, as I am sure you can see, is HTML not PHP.  LOL… What took some time was figuring out where to put it, and how to format the HTML, cause I don’t really know that very well either… (What am I doing designing websites???) Who knows… All this took was a bit of time and playing around with formatting to get it exactly as I wanted. Trial and error. Basically, well not basically, exactly, this is a theme that someone else made/designed and with a bit of playing I was able to determine where they put things and then I changed them to suit my needs.  The logo on top was a bit more difficult to say the least.  Well I had to design it first, which I am not really versed in Photoshop… (damn, what do I actually know how to do here???) but in any event I created a cool logo and now I want to plop it somewhere on top of the header, where it belongs…

As you can imagine, this is in fact the header file.  I said what i did above because in playing I have found that the logos don’t always go in the header, especially if one is not present in the design. One theme I was messing with actually used the comments in the header space. So just be sure to understand your design before you start editing files.  So this is what I ended up with for a header.php edit:

<!– Testing point here for logo graphics –> <– This is the ‘comment out’ syntax in PHP… <!– all commented out between these characters–> so I moved this closer around a lot while testing.

<div id=”header”>
<div id=”sitetitle”><h1><a href=”http://annlee-entertainment.com/”><img title=”Annlee Entertainment, LLC” src=”http://annlee-entertainment.com/wp-content/uploads/2010/02/annlee11.png&#8221; alt=”” width=”500″ height=”190″ /></a></h1></div>

And again, here is what was rendered:

You can go take a look @ the whole site in larger view to get a better idea… But here is the whole layout:

The logo on the right is just a widget with the HTML text pointing to the .png file on the server. Nothing big there. So anyway… This should at least get you started as I did in customizing some pre-built themes and/or your own themes outside of the design suite.  Enjoy…


, , , , , , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: