WordPress

Jeb has moved the family blogs from Movable Type to WordPress. He did a great job of moving over my hundreds of blog posts which includes tons of pictures that also needed to come over. I hate to think what all it took to bring everything over. I found a couple of problems where pictures didn’t show up, but for the most part everything looks intact.

The appearance of the blog is pretty similar except that the picture at the top of the screen is huge, wider and much taller than the pictures I had on the old blog. I was able to fix that eventually (towards the end of this entry).

Dashboard

Behind the scenes is the Dashboard which looks a lot different than Movable Type’s, and it has taken some getting used to. I changed around the content of the sidebar on the right to show a few more recent posts. I also wanted the list of recent posts at the top. This is way easy because in the widgets screen, you can just drag and drop the order of those different components.

I also added some links to the sidebar on the right. Again pretty easy. Also started adding categories to a lot of my blog posts, though I never found that all that useful before.

I was able to change the date format on the blog to include the day of the week, which I think can be useful when a blog entry mentions something that happened by the day of the week.

When inserting an image, WordPress defaults to certain standard sizes for thumbnails of the image. The medium size is 300 pixels wide or high. On Movable Type I had picked 400 pixels because that fit easily in the column width. It seems like a good size and this can be customized under Settings and Media.

Rotating quotes (I think this is part of a plug-in that Jeb installed) were easy to add one at a time, so I pulled those over from the old blog. The only thing is the tag line become part of the page title in the browser and it seems to randomly pick a different tag than the one shown on the page. Better to get rid of it, but I don’t know how to do that yet (fixed it later, see below). Individual post pages don’t have that tag in the page title.

To make the child theme (more on that later) available, I had to go into the site admin dashboard (which Jeb gave me permission to do) and activate my child template so that all the blogs can see it (including my own). I also made a screenshot.png of my resulting blog page and put that in the child theme folder so it would show up when browsing themes. That took some doing, the best way turning out to be to view the page in full screen mode, resize to 225 height and then crop to 300 width. Then in the the dashboard for the theme I needed to change the header text to white instead of the default black. Also changed the background color from gray to olive #4E4D3A to match the old blog.

Code in posts

In some of my flashlight reviews I had pictures that would change if your cursor was over the picture. These rollovers didn’t work in WordPress, but I found out about the tag <!–-start_raw-–> and <!-–end_raw–-> which can be inserted around funky HTML code in entries and WordPress will leave it alone. I had to just copy over the old rollover code, add the raw tags, and now they work fine. However, in the editor if you look at the post in “visual” mode that code will be lost, so you can only view or edit posts like this in “HTML” mode. I need to make text backups of these type of posts just in case the code disappears.

Once I figured that out, I tackled the iPod Timeline entry which had most recently been a big table of dates and events with some styles of text defined within the page. WordPress seems quite picky about how it presents tables, so I used HTML definition tags instead and hid the styles in some raw tags. It turned out pretty well I think (compare to the original here).

BetterWP Recent Comments

In Movable Type the main page had a list of recent comments with the post title, date, author, and the first few words of the comment. In WP, there is a recent comments list but it just has the author and the post. I found a plug-in by Better WordPress called BetterWP Recent Comments (later on found WP-RecentComments, which seems to be more popular and has been updated more recently). I added the widget to my sidebar and customized the formatting by adding quotes instead of braces around the quote, added the post title, and moved the link to the post title:

<li class="recent-comment"><span class="recent-comment-single"><span class="recent-comment-author">%author%</span> <a href="%link%" title="%post_title_attr%">%post_title%</a> <span class="recent-comment-text"> “%excerpt% ” </span> <strong>%time%</strong></span></li>

Gravatar

I noticed Jeb’s avatar was showing up on his comments, so I signed up for an account at gravatar.com and then used my current Facebook picture. It shows up sometimes and sometimes it doesn’t. It is linked to my Yahoo email address which I’m pretty sure I always used when writing comments. Kind of a neat thing. Maybe others would like to do the same.

Archives Template

Now it starts to get more complicated. I created an archives page which was some trouble, but perfectly explained in a post here. That involved editing some php script and using FTP to put a file in place, but basically all I had to do was cut and paste from what the guy was showing.

Child Template and Style.css

I was able to reduce the size of the header by reading this discussion, which helped out enormously. I had to create a child template first which is just based off of the Twenty Eleven template, only with a new style.css file. The style file calls all of Twenty Eleven’s style.css first and then adds to it. In that file all I did was reduce a margin between the header and body from 2em to 0em (plus some stuff later).

#page {
margin: 0 auto;
max-width: 1000px;
}

The word “Search” in the search box in the banner is gray (I guess so it will show up against a black or white background) but this is nearly invisible with a picture in the background. Based on this tip, add to the child theme style.css for #branding #s to color: #fff; to get white (works in Firefox). To make this work in Safari and Chrome browsers, I had to change the color of input::-webkit-input-placeholder (based on this post) (Internet Explorer doesn’t even show the word “Search” in the bar). However, now when you click on the search box, the box background goes from transparent to an opaque white background and the white text disappears. To get black text, you have to change #branding #s:focus to color:#000; To make “Search” even more visible, I also gave it a font-weight: bold; and then returned to font-weight: normal; with the focus (works in Firefox, Safari, and Chrome). To get really carried away, I thickened up the box using border-width: medium; The magnifying lens is a png graphic stored in the theme’s image folder. I tried making a copy of it in an images folder in my child them, but lighter and renaming it searchw.png, but I don’t know that it helped that much.

#branding #s {
color: #fff;
font-weight: bold;
background: url(images/searchw.png) no-repeat 5px 6px;
border-width: medium;
border-color: #fff;
}
input::-webkit-input-placeholder {
color: #fff;
}
#branding #s:focus {
color: #000;
font-weight: normal;
}

Eventually I started writing some entries about wiki’s and I was putting code on the page. To make it stand out as separate, I made it green. At first I did this with a style defined in that entry, but I had to surround that by Raw tags to preserve it. So since I already had a style.css of my own, I just added code {color: green} to it and got rid of the style stuff in the posts.

To get the camera and archive icons in the header in the right position (more about this later), I used this:

div#my_header_widget1 {
position:absolute;
right:15%;
top:120px;
}
div#my_header_widget2 {
position:absolute;
right:9%;
top:120px;
height:32;
}

Function.php

To further reduce the size of the header, I wanted to change the image size to 1000×180 instead of 1000×288, which required a function.php file which just works in addition to the Twenty Eleven’s function file. I played around with a few different sizes and decided an image 180 pixels high gave me a pretty interesting image without taking up too much of the page. The old blog’s header image size was 702×136 which has about the same proportions as the modified banner but half as many pixels. I went back and re-cropped a bunch of the original pictures I had used on the old blog for the new size and found a few new ones to add. These are added in the header dashboard. To delete a banner image, I used the media dashboard. It was fun going through old pictures, but time-consuming.

Header.php

I wanted to get rid of the blog description (really just a random quote) in the title of the page (appears in the browser title bar), which I was able to do by copying the entire header.php file from Twenty Eleven and commenting out the code for that. And in my final tweak to save space, I wanted to get rid of the navigation menus across the bottom of the header so I commented that part out of the header.php file as well. The only trick there was using the correct commenting tags (<!-- and -->) and then getting rid of one that was nested that was messing me up. You can still see the commented out code in the page source, so I probably should just delete it.

I was checking the site out later with Internet Explorer 7 at home and the name “Ted’s Blog” wasn’t showing up, though the quote underneath was. Jeb had modified the header.php file in Twenty Eleven with some code he found, and it was causing an error in IE. He was able to fix that and I’m using that again. In the meantime I found a site that said add these lines to the child style.css file, as described here:

#branding { position: relative; }
#branding hgroup { position: absolute; top: 0px; }

After creating a post about all of the different banner images, I thought it would be neat to put a link to the banner image post in the header in case someone wonders where a picture was taken or what it is. So I added a camera icon to the header that you can click and go to that post, but this did not work in Internet Explorer 7 (though it seemed to in IE 9). Also I had to tell the blog where to find the camera icon, which was in the images folder of my child template. At first I used theme_directory to point to the image, but I think that gives the parent theme directory, so I used stylesheet_directory. In addition to what I added to style.css above, I added this to header.php, though it only activates if someone is using greater than (gt) Internet Explorer 8. Only IE recognizes conditional comments like this, so there are some tags around the IF’s that make them invisible to other browsers, so they will still see the code that IE 7 skips.

<!--[if gt IE 8]><!-->
<div id="my_header_widget1"><a href="http://fiveforks.com/ted/2012/01/banner-images/"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera.png" title="About this banner image"></a></div><div id="my_header_widget2"><a href="http://fiveforks.com/ted/archives/"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/archive.png" title="Blog Archives" height="32"></a></div>
<!--<![endif]-->

Single.php

Another thing mentioned on that page I just linked to is changing Next and Previous to the names of the entries, which I was able to do with their instructions, but that meant copying over the single.php file from the main theme and modifying it. I also changed the arrows to double greater than and less than brackets. I tried to put a vertical divider between the two like Movable Type does, but it didn’t look right. I don’t like copying entire php files because if those files are updated when Twenty Eleven is updated, I will miss out or have to do the changes again.