All posts by scotty

Change/Resize the height of the Header Banner of the Twenty Ten Theme in WordPress 3

WordPress 3 and the Twenty Ten theme are very easy to modify through the Appearance section of the dashboard. Buy clicking Header in the Appearance section you can very easily choose a different image or upload one of your own.

The image size is 940 x 198 pixels and there is no obvious way of changing these dimensions.

I can live with the width setting but I find a graphic header banner of ~200px too big and takes up too much screen space. I often use 100px for a banner and for this website I wanted to use 130px, so how do you change the height?

A quick search on Google lead me to this link –

http://www.bloggerstemplate.com/2010/06/20/how-could-resize-the-header-of-twenty-ten-theme

Which tells you what to do, which is –

  1. Click on Editor in the Appearance section (left)
  2. Click on Theme Functions in the Templates section (right)
  3. Scroll down until you see the height and width definitions and change 198 to the value you want

Editing Functions.php to change height of header

How to show/set/display an Icon (Favicon) in Browser Tabs, Favorites, Bookmarks, Address Bar etc

Making the Icon

Use your image editing software to create or modify your image (Google image search will find lots of icons for nearly any topic). Use your image editor to make the background transparent and resize it to 32 x 32 px (resizing may not be necessary as browsers will do it). Save the image in a format that keeps the transparency i.e. gif or preferably png.

Note: I suspect that all you need to do now is rename the file ‘favicon.ico’ and upload to the root directory of your website and that most modern browsers will pick it up, but to be safer do the following.

Use Gimp or another program to convert the file into the Microsoft ICO format. Gimp the free image editor has the option to save in the Microsoft ICO format which has become a standard for icons. Gimp is an interesting program and is free but if you do not want install on your computer you can run it from a usb drive. To run it from a usb drive get it from portableapps.com

Load Gimp and open your image file. In the File menu click Save As…

Change the Name of the file at the top of the dialogue box to ‘favicon’

Click the + sign – Select File Type

Gimp Save As Dialogue Box

Choose Microsoft Window Icon (this will change the file extension to ico)
I accepted Gimps’ choice of details for the ico format
Click the Save button

Installing the Icon

Upload the file (favicon.ico) into the root of your website.

Insert the following line into the head section of your home page –

<link rel=”shortcut icon” href=”http://www.thenameofyoursite.com/favicon.ico”>

Cycle Ride

I am riding from Lands End to Chepstow this summer with two friends. This is the first leg of eventually, hopefully riding to John O’ Groats.

On Friday morning I passed around a sponsorship form at Pontypool College and raised £71.  This is a fantastic start, thank you all very much. All the money raised will go to the Helen Keller Institute for the Deaf and Deafblind.

http://www.helenkellerinstitutefordeafanddeafblind.org

Add an Amazon aStore to a WordPress Website A Reasonably Simple Way to Add a Shop Free and without a Plug-in

As you can see from my links I have added a shop to this website. It did not take long and it is easy to add/remove categories and items.

I searched for how to incorporate an aStore into a website and went to this article –

http://www.mydigitallife.info/2006/10/01/incorporate-and-integrate-amazon-astore-with-wordpress-page/

Before I worked through the instructions I read some of the comments, one that was useful was about custom page templates. I did not know how to create a custom page template so another search led me to this article –

http://www.expand2web.com/blog/custom-page-template-wordpress/

So, taken from both articles, the following are the steps I took to set up my aStore –

1. Go to Amazon affiliate program set up your aStore, at the end of the process you get the code (selecting – Embed my store using an inline frame)

2. I then followed the instructions from the second article and created an empty file in my theme folder called cover_page.php

This is what I put in cover_page.php

<?php

/*

Template Name: Cover Page

*/

?>

<?php get_header(); ?>

<div style=”padding-top:5px”>

<iframe src=”http://astore.amazon.co.uk/fredbloggscou-21″ width=”100%” height=”800″ frameborder=”0″ scrolling=”no”></iframe>

</div>

<?php get_footer(); ?>

Note: You have to paste in your Amazon code, I changed some settings and should change more but it works.

3. Finally go to the dashboard in WordPress, add new page. All you have to do is add a suitable title for the page and then in Attributes on the right hand side, under Template, select your custom template.

Wordpress Custom Page Template
Selecting a WordPress Custom Page Template

What’s new? freesims.com

The date of my last post was the 15th August, the new term at college completely wiped me out.  Now that things have finally calmed down a bit, I can do a bit more experimenting and developing.

Freesims.com is one of my domains with lots of potential for development.  I have had a ‘coming soon’ page there for a few weeks and I have just started to develop it properly.  To see it develop go to www.freesims.com

Google Analytics versus WordPress.com Stats

I went to put Google Analytics into this site and hit a snag straight away – where do you paste the code in a WordPress data driven site? where are the web pages?

Originally the first websites I made consisted of pure HTML pages. JavaScript offered client side scripting and Flash offered multi-media. Then I had a server that gave me PHP and MSQL. Now I could design sites with pages that could do anything, but were still structured around a set of HTML pages (albeit now with the file extension .php).

Then I started to experiment with content management systems (CMSs) like Joomla and WordPress (originally blogging software, now CMS?) that are data driven. With a data driven site all the site content is stored in a database and the CMS extracts it and presents it to the user.

Google analytics gives you some JavaScript code that you paste into the pages that you want to track. I pasted the code into the index.php file (the first file that is loaded) and it did not work. I was hoping not to use a plug-in, I think you learn more by altering the code yourself, but if I used a plug-in I would try to see where it altered the code.

Looking at popular plug-ins there are two for Google Analytics and a Statistics plug-in from WordPress themselves, too much choice!

My plan is to try the WordPress.com Stats on this site, and one of the Google Analytics on watch.freemovies.co.uk and compare them. Watch out for future blog entries for my comparisons.

Adding a ‘Tag Cloud’ to a WordPress Sidebar

I wanted to change the content of the sidebar for the default theme that comes with a WordPress installation. I wanted to add a ‘Tag Cloud’, which are built into WordPress and I think are a really good way of accessing information.

The file that you have to edit is called sidebar.php and you will find it in folders /wp-content/themes/default

You have to look at the listing and look at sidebar it created and spot the code which bit does what.

There is a list of navigation items that starts with –

<ul role=”navigation”>

I added the following list item –

<li><h2>Tag Cloud</h2>
<?php wp_tag_cloud(‘smallest=8&largest=16’); ?>
</li>

I also moved and deleted some other items to get the sidebar how I wanted it.

I also went into the admin Dashboard of WordPress, to the Links section to change the Blog Roll to a list of my links.

Ubuntu on an Acer Aspire Revo

Did my first Linux installation, putting Ubuntu onto the Revo (which only cost £150). The installation was complicated by the Revo not having a CD/DVD drive but in the end it was easy and so far I am very impressed with Ubuntu. The critical things you need to do to successfully install are-

  1. Download Ubuntu, the .iso disc image (you do not need to burn a CD).
  2. Use unetbootin to make the usb stick a bootable Ubuntu installer.
  3. Go in to the Bios of the Revo, under Advanced Bios features, disable – Boot to RevoBoot and choose the usb as the first boot device.

The first two steps are described on the Ubuntu site.

Follow these steps and you should be able to install Ubuntu and it works fine. If you want to watch full screen video you will have to install Nvidia graphics drivers, I haven’t done that yet!

Day 2 of a New WordPress Installation

I was thinking about what  to do next with this site and I thought I would make my plan into a blog entry.

The obvious first thing to do is choose a theme. Having spent time modifying a theme I may delay this and have a go at designing my own theme (big head).

So my plan is

  1. A bit of housekeeping – upload old blog entries.
  2. Have a go at the side bar, I want a tag cloud (more on this later)
  3. Research ‘creating WordPress themes’

Hello world!

The story of this site so far – Upgraded my host package, now could go from a static site to a dynamic site (with PHP and MySQL).

Decided to try WordPress, quite liked it, biggest problem was I could not log on in work, the college filter blocked it.

Then tried Drupal (Content Management System, CMS), quite liked it.

Then I saw a site that used WordPress as a portal, copied a lot of the ideas to create http://watch.freemovies.co.uk and learned a lot about WordPress. I decided I had to go back to WordPress for my main blog, for reasons I will go into in another post (first I want re-upload my old posts).

So here we are, back in WordPress!