WordPress 1.2 to 1.5 migration
Upgrading WP works like a charm following the Wordpress wiki’s instructions… For testing, I duplicated an existing installation, to see what it was like…:
copied the database- uploaded the unpacked install files
- changed the db settings in /wp-config.php to the copied database
- ran / wp-admin/upgrade.php
- in the database, manually adjusted in the wp_options table:
- siteurl to the new testurl
- home to that same new testurl
… and I got a copy of the blog up and running.
Two nice results that struck me:
- the 13 tables were being reduced to only 9
- in /wp-content/themes/ there was a subdir with the newley created theme “european-democracy”, next to the “default” (Kubrick) and “classic” theme
This means I could now safely test and edit the files in the “european-democracy” theme (a copy of the default theme) via the “Presentations -> “Theme Editor” menu, or by downloading the files in Dreamweaver . The former installation of Wordpress was a heavy hack, I wanted to do it “the clean way” now adapting the theme to the original look and feel step by step (filenames refer to files in the theme subdir: /wp-content/themes/european-democracy/). After going through the modifications described here, I was so pleased I applied most of them to this blog as well ;-) .
CSS and images
- most of the css information is in style.css , but the image css is contained in header.php (the reason for that being that the background picture depends on the presence of a sidebar or not -> hence some code is involved to check this)
- for my purpose, I could simply remove the css lines from header.php, because I wanted a permanent sidebar, and I didn’t need a background picture for page and footer
- the only image I needed were the header and page background, so I added to style.css :
#header { background: url("images/european-democracy_header.jpg"); }
#page { background: url("images/european-democray_page_background.gif"); }
(note the relative url relative to the css file) - the blog’s logo and description are inclosed in the headerimg tag, but since the picture already mentions the title, I commented out title and description:
#headerimg
{
display: none;
}
- Unfortunately, this makes there’s no link any more to the homepage in the header… My remedy: inserting a transparent image
in header.php , I added this div:
<!-- modif pvh -->
<div id="header_click_home"><a href="<?php echo get_settings(’home’);
?>" title = "<?php bloginfo(’name’); ?>"><img src="<?php
bloginfo(’stylesheet_directory’); ?>/images/1px_transparent.gif" alt ="<?php
bloginfo(’description’); ?>" border="0" width ="780"
height="145" /></a></div><!– end modif pvh –>
into the header div, but before the headerimg div
CSS and width
- to change page width: replaced the nr of pixels for the #page element in style.css, I made it identical to the width of the header background img
- I omitted the width for the footer element, it didn’t seem necessary
- the left column is on the home page determined by the class “narrowcolumn” and the text on the right is in the div sidebar, so I played a bit with widths:
.narrowcolumn {
float: left;
padding: 0 0 20px 15px;
margin: 0px 0 0;
width: 580px;
}
#sidebar {
padding: 10px 0px 10px 0px;
margin-left: 625px;
width: 150px;
}
I still don’t understand how IE deals with this… I you simply change the padding for #sidebar to “padding: 10px 0px 10px 5px;” the sidebar moves to the bottom, where as I thought padding shouldn’t influence the position of an element?!
CSS and colors
- changed background color to #fff (white in a few places)
- adjusted stylesheet link colors and indicated changes with /* modif pvh */
Adding the sidebar to single archive page
- in the stylesheet, I made .widecolumn identical to .narrowcolumn:
.widecolumn {
float: left;
padding: 0 0 20px 15px;
margin: 0px 0 0;
width: 580px;
}
- in single.php, replaced “<?php get_sidebar(); ?>” with:
<!--modif pvh -->
<?php get_sidebar(); ?>
<!– end modif pvh –>
<?php get_footer(); ?>
Metadata font size
- in order to make the metadata smaller:
.narrowcolumn .postmetadata {
padding-top: 0px;
font-size: .75em;
}
Note that I added the fontsize to this combined identifier, not to .postmetadata in order not to change the font size of the metadata under a single post!
Truncated archives and search results
- I don’t like the way the default theme truncates the entries in the archives (with an auto-excerpt to a max of characters), I would rather retain the division between summary and full text the author already put in by using the <!–more–> tag
- Easy enough… in archive.php and search.php, change:
<div class="entry">
<?php
//the_excerpt() //modif pvh
the_content()
?>
</div>
Moving post date
- in order to have the posting date under the posting, I changed a line in archive.php, search.php, index.php:
<p class="postmetadata"><?php the_time('l, F jS, Y') ?>.
Posted in <?php the_category(', ') ?> <strong>|</strong> <?php
edit_post_link('Edit','','<strong>|</strong>'); ?> <?php comments_popup_link('No
Comments »', '1 Comment »', '% Comments »'); ?></p> - no need to change code to remove the date indication under the title, this could be done by selectively making the <small> tag invisible when preceded by the H2 and H3 title tag:
/* start modif pvh */
h2 + small, h3 + small
{
display: none;
}
/* end modif pvh */
Update: hmm, as this Dutch manual indicates, IE doesn’t support “Adjacent sibling element-selector”!
Sidebar
- removed the metalinks in the sidebar by removing these lines from sidebar.php:
<li><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php
_e(’This page validates as XHTML 1.0 Transitional’); ?>"><?php _e(’Valid
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>’);
?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML
Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="<?php _e(’Powered
by WordPress, state-of-the-art semantic personal publishing platform.’); ?>">WordPress</a></li>
<?php wp_meta(); ?>
</ul> - made sure the links were displayed on the archives pages by changing
<?php /* If this is the frontpage */ if ( is_home() || is_page() /*start modif
pvh */ || true /*end modif pvh */) { ?>
in sidebar.php
Javascript to make external links open in new window
- really a great idea from Marko Dugonjic, so I adapted the header.php
Strange effects
- I had a some point replaced the #footer entries by:
#footer {
display: none;
clear: both;
}
but the funny result was that in firefox, the border around the page, only came as far down as the right menu text… another weird effect of floating div’s…
Bookmark this post:
Subscribe to future posts:
