2. Download and then install the latest version of Wordpress - I used 1.5 in this example. I created the database on my server, updated the config.php file in the wordpress folder (which I renamed to blog) and then uploaded the whole deal. If you have fantastico available through your hosting provider, use that ;).
3. Check and make sure 'sall good - I viewed my /blog directory and yup, there she is.. the wordpress installation in its full untouched glory. Hehe.. not for long ;). The installation is good to go, I've updated my admin password and saved it in a secure location, and I'm ready.
4. Time to mod! - Alright, lets get down to it. What we're going to do is create our own Wordpress theme. Wordpress runs on themes and I've gotta hand it to the boys and girls who built wordpress, its done VERY well. So, this is what we're after:
* A blog that looks like its a part of our site
* A blog that integrates seamlessly with our site
* A blog/admin interface that's cleaned up of alll the extra features we (or our client) won't need
With that in mind.. our goal is to develop a Wordpress theme that will "include" the rest of our site into it. Because we're using PHP and because this is all dynamic, it can all be done.
Alright, back to work!
5. Setup our theme workplace - Browse locally to wp-content/themes and copy/rename the "classic" theme. This is going to be our work area. Give it a name that reflects the site you intend to integrate it with. Edit the .css and change the "theme name" in the comments (not sure if this affects the installation, but it seemed to for me).. Then, upload your folder into your remote installation (your server). Finally, login to your Wordpress admin and then on over to "Presentation" and themes. "Install" your new theme. If its not there? Make sure you finished uploading it and that the folder has a unique name. Set your new theme to default, test it by visiting your blog (Your website and then /blog) and we're ready to roll.
6. Scary stuff: Modifying the theme - Alright, you've got the default working and that's great.. but we want it to look like OUR site! So, time to get messy.. For this, I'm using my own HEADER and my own CSS sheet. Alright, lets open up our theme's header.php (located in our theme's folder) and get busy. You should see all the lovely code. For this tutorial we only care about a few things. First, lets fix that CSS sheet:
Original:
""
Our Mod:
"
Great! Now lets keep going! Next we've got some CSS stuff to play with.
Original:
"
Great! Now lets keep going! Next we've got some CSS stuff to play with.
For some of you, that may have just thrown you over the edge. For others, it makes perfect sense. Let me try and explain what just happened there for the benefit of the former. In my style sheet I have already defined "container", "right_content", "right", and all that good stuff. See, that's my CSS layout. The headernav.php there contains the images and links I use to control navigation within my header. All I'm doing here is taking the elements from my other pages and integrating them into my blog. If you have no clue what's going on there, refer to step 1.. You want to make sure that you have a solid PHP and CSS based site setup :).
NOTE: As I'm sure you can tell, this is NOT just going to walk you step-by-step through the process. You have to be willing to experiment on your own and WORK at it. If you really want someone to do it for you, get some money together and hire 'em :). This stakes work and believe me, its rewarding! OK, moving on.
header.php is DONE.
7. More scary stuff: Modifying index.php
This is definitely another one of those custom tweak things. What I've done is arranged all my main content within "right_content", which is defined within my CSS sheet. Now, since I ended my header.php file with the opening up of my right_content "div".. all of index.php is now displayed within that div, EXACTLY as I want it too.
There aren't a whole lot of mods I wanted to make to index. I decided to cut out the comments and so I sliced out this line:
""
and this one:
""
Alright, now here's the big deal.. Take a look at ?>?>?>?>?>?>?>?>?>?>?>?>?>?>?> .. see that baby? That's going to pull in our footer file.. and quite frankly, we're not ready for that. We opened up a "right_content" div for our main content and we've gotta close that off. So, BEFORE the 'get_footer' at the end of our index.php, I slapped the following in:
"
Alright, at this point we're going to require some creative thinking. What I've done for this site may not be exactly what you've done for yours. Very quickly, here's an illustration of my site:
Layout Illustration
I've used CSS to control the layout for this site. All my main content is contained within "right_content" which is area 3 in the above illustration. Area two is controlled by leftnav.php and is my "left navigation". Later on, we're going to take some stuff from our blog and stick that on in there to further integrate the look and feel of our site.
And that concludes our index.php!
8. Even more scary stuff: Modifying footer.php - Alright, we're getting close to finishing this stuff up now, really.. not TOO far to go!
Original:
?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>
?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>WordPress"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?>
?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>
MY Mod:
?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>
?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>
Now, a couple of key things here. I've taken the credits out of the footer and I can put them in my OWN footernav.php. If you don't want it to show up on all your pages it can work some PHP magic and assign a section or heck, just leave it in.
IMPORTANT: The other KEY thing here is that I have taken out ?>?>?>?>?>?>?>?>?>?>?>?>?>?>?> and I have moved it to my leftnav.php file! Why? Because I want it to show up in area 2. We'll get to that in just a bit.
Alright, awesome! Header, index, and footer is all taken care of! You're linking to your own CSS sheet and so that's taken care of as well. Now, upload and lets see what you've got.
It may still be a bit messy but you should have a good idea of how things are going. Ready to move on? Awesome :).
9. Beginning Cleanup: Modifying sidebar.php
Alright.. this is where you start expressing some of your own creativity ;). What I did was quite simple.. I took the sidebar and just cut a LOT of stuff out of it. I'm designing this site for a client and I wanna keep things VERY simple. So, blogroll had to go and a good deal of the other stuff. Lets take a look:
Original:
MY Mod:
-
- ?>?>?>
?>?>?>
?>?>?> -
- ?>?>?>
?>?>?>
Wow, quite a difference. This is really something you've gotta do on your own. The IMPORTANT thing to remember is to make sure that if you cut something, that you cut all of it and that you KNOW what you're cutting. The wordpress guys have done an awesome job of making things very self explanatory, so it's not very hard to find stuff. Also, make SURE that you backup! Upload your changes and you'll know how you've done. Don't get discouraged if a PHP error comes at you.. take your time and look at it.. figure out what it could be. Often times its just the silliest little thing. Keep working at it!
Alright, now THAT is a wrap! Those are the basics. The public look is all nice and clean.
10. BONUS: Ending Cleaning up - Modifying the admin - I won't go into a lot of details here and this is an entire thing unto its own. I wanted to make things very very simple for my client so I decided to "cut out" a bunch of stuff in the admin panel I knew they wouldn't need. I did most of the cutting by adding '//' in front of the things I didn't want. I modified the files inside of wp-admin, which all control the content for the admin area. Some of the ones that are most important are:
index.php
menu.php
post.php
Here's a screenshot of one of my mods (Click for full size):
Administrative Mini
If you have any questions, just send me an email to sirjonathan@gmail.com. Have an awesome day!
- Jonathan Wold
No comments:
Post a Comment