[Note: This was originally three posts, and applied to my previous Wordpress blog]

Great, the integration is going well. I made my own theme and have been modifying its index.php and header.php files. I’m mostly posting this just so I have two posts to work with in making the theme. Cheers!

I think I’ve mostly incorporated the blog! I’m pretty happy with the results, really. I have to figure out what to do about that stupid sidebar with all the archives and everything. It’d be easy enough just to remove it, but it’s pretty handy.

Getting it to float off to the right is trickier than I would have thought. Now it’s just kinda hanging out down below. Oh well. That’s for tomorrow.

Then I have to fix up the comments and a few other little tweaks, but all-in-all, I think it’s looking pretty nice. You should have seen this page before! It was just the generic theme. Now it’s got a nice gray background, a crazy dog at the top, etc.

Okay, I'm going to say the blog is nicely mixed into my site now. It wasn't so bad, really, but I really had to brush-up on my CSS. As I mentioned before, I made a new theme to integrate it. Probably about 95% of the changes were done in the theme's index.php, header.php, sidebar.php, footer.php, and my stylesheet.

I had to dip into the wp-includes directory to modify just one file category-template.php, and that was only to change the wp_list_categories() function. Ordinarily it outputs a list with class - I'm forgetting now - but I changed it to my "sidebar_item" class, so that it would behave the same as the other items in my sidebar. I'm afraid that change will get wiped out if I update WordPress, though (which is part of the reason I'm making this post!)

In case you're interested, this is the state of my php files:

(First, let me say that vim's :TOhtml command is absolutely brilliant. I just highlight the contents of the files that I want to show, type :TOhtml, hit enter, and BAM!, I've got some nice HTML to paste into this wordpress textbox. It seems to work in Firefox, don't know about any other browsers.)

index.php


 1 <?php
 2 /**
 3  * @package WordPress
 4  * @subpackage Default_Theme
 5  */
 6 get_header(); ?>
 7     <div id="content">
 8     <h1>Blog</h1>
 9
10     <?php if (have_posts()) : ?>
11         <?php while (have_posts()) : the_post(); ?>
12
13             <div class="blogpost" id="post-<?php the_ID(); ?>">
14                 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
15                 <small><?php the_time(F jS, Y) ?> </small>
16
17                 <div class="entry">
18                     <?php the_content(Read the rest of this entry &raquo;); ?>
19                 </div>
20
21                 <p class="postmetadata"><?php the_tags(Tags: ‘, ‘, ‘, ‘<br />); ?> Posted in <?php the_category(, ) ?> | <?php edit_post_link(Edit‘, ”, ‘ | ); ?>  <?php comments_popup_link(No Comments &#187;‘, ‘1 Comment &#187;‘, ‘% Comments &#187;); ?></p>
22             </div>
23
24         <?php endwhile; ?>
25
26         <div class="navigation">
27             <div class="alignleft"><?php next_posts_link(&laquo; Older Entries) ?></div>
28             <div class="alignright"><?php previous_posts_link(Newer Entries &raquo;) ?></div>
29         </div>
30
31     <?php else : ?>
32
33         <h2 class="center">Not Found</h2>
34         <p class="center">Sorry, but you are looking for something that isn't here.</p>
35         <?php get_search_form(); ?>
36
37     <?php endif; ?>
38
39     </div> <?php // this div closes the content div ?> 
40     <?php get_sidebar(); ?>
41     </div> <?php //this div closes the container div opened in header.php ?>
42
43 <?php get_footer(); ?>

header.php


 8 <html>
 9 <head>
10     <title>Gabe Durazo . com – Blog</title>
11     <base href="http://www.gabedurazo.com/" />
12     <link rel="stylesheet" href="styles.css" type="text/css" />
13     <link rel="shortcut icon" href="/favicon.ico" />
14 </head>
15 <body>
16     <div id="container">
17     <?php include 'http://www.gabedurazo.com/includes/header.php‘; ?>

sidebar.php


 7 <div id="sidebar" role="complementary">
 8     <ul id="sidebar_items" role="navigation">
 9         <li class="sidebar_item"><h3>Archives</h3>
10             <ul>
11                 <?php wp_get_archives(type=monthly); ?>
12             </ul>
13         </li>
14         <?php wp_list_categories(show_count=1&title_li=<h3>Categories</h3>); ?>
15         <li class="sidebar_item"><h3>RSS</h3>
16             <ul> 
17                 <li><a href="<?php bloginfo(rss2_url); ?>">Entries (RSS)</a> </li>
18                 <li><a href="<?php bloginfo(comments_rss2_url); ?>">Comments (RSS)</a> </li>
19             </ul>
20         </li>
21         <li class="sidebar_item"><h3>Meta</h3>
22             <ul>
23                 <?php wp_register(); ?> <?php //this functions makes <li>'s ?>
24                 <li><?php wp_loginout(); ?></li>
25                 <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">Thanks WordPress</a></li>
26             </ul>
27         </li>
28     </ul>
29     <?php get_search_form(); ?>
30 </div>

footer.php


1 </body>
2 </html>

styles.css


 71 /* WordPress Styles */
 72 div.blogpost {
 73     padding: 0.5em;
 74     margin-top: 1em;
 75     border: dashed 1px black;
 76     background-color: #ddd;
 77 }
 78 div.blogpost h2 {
 79     padding: 0;
 80     margin: 0;
 81 }
 82 div#sidebar {
 83     padding: 0;
 84     margin-top: 0.5em;
 85     background-color:white;
 86     border: solid 1px black;
 87 }
 88 div#sidebar h3 {
 89     margin: 0;
 90     padding: 0;
 91 }
 92 ul#sidebar_items {
 93     list-style-type: none;
 94     padding: 0;
 95     margin: 0.5em;
 96 }
 97 li.sidebar_item {
 98     margin: 0;
 99     padding: 0;
100     margin-right: 1em;
101     float: left;
102 }
103 li.sidebar_item ul {
104     list-style-type: none;
105     margin: 0;
106     padding: 0;
107 }
108 li.sidebar_item li {
109     padding: 0;
110     margin: 0;
111 }
112 #searchform {
113     padding: 1em;
114     clear: both;
115 }
116 textarea#comment {
117     width: 700px;
118 }


Sat, Aug 1, 2009 | For updates follow me on twitter