Week Three
Written on June 23, 2009 at 11:56 pm, by alexmansfield
I got a pleasant surprise today when I looked up my Google pagerank. It appears they’ve updated their ranks and this site went from a 0 to a 3. Not bad for 3 weeks. It looks like putting in the time and effort actually leads to some visible results. The results are not stunning by any stretch of the imagination, but at least I can see them. Eventually I would like to find clients through this site though, not just check my pagerank and look at pretty Google Analytics graphs.
Anyway, I’ve started submitting some of my posts to various social media outlets, but none of them bring in the traffic like Twitter, that’s for sure (at least not yet). The number of visitors grew from 12 last week to 82 this week, which was pretty substantial, at least if you look at it in percentage form (583%). I don’t think I’ll be able to keep that up :] My Feedburner subscriber count went up as well (to 9), and this time it looks like some of them are actually humans, not bots.
That’s it for now. I’ll try to give a little more in depth look at traffic sources etc. at the one month mark next week.
Super Twitter Stats with Su.pr
Written on June 20, 2009 at 11:39 pm, by alexmansfield
There’s a new service from the guys over at StumbleUpon that acts as a Twitter update client, a stat counter, a URL shorter and more all rolled into one. I’ve been using it for a couple days now, and it’s pretty cool. It’s still in private beta at the moment, but they post invite codes fairly often on their Twitter feed. It was developed with input from Tim Ferris of “The Four Hour Work Week” fame and it promises to take care of many of the issues that come with promoting your blog on Twitter. According to StumbleUpon, it is a…
…brand new short url service designed to drive more traffic to your site. Su.pr provides real time analytics for all of your generated links as well as the ability to post your Su.pr links to other social media services such as twitter and facebook.
Not only does it count how many clicks you recieve from Twitter, but also from StumbleUpon itself, which is handy. It keeps track of when you posted and how many clicks you recieved, so over time it can suggest when the most profitable time to tweet would be. What? You’ll be away from your computer at the most profitable tweeting time? No problem. Just schedule your tweet for later. Here’s a screenshot.
On the URL shortening side, the best features are still in the pipeline. The plan is to allow blog owners to use their own domain name rather than su.pr domain in the shortened URLs. They’re also going to allow site owners specify if they want a 301 redirect for SEO purposes.
All sorts of interesting things are happening with this application at the moment, so you might want to check it out.
Wordpress Custom Headers
Written on June 20, 2009 at 5:22 pm, by alexmansfield
This post is about adding the custom header functionality to a Wordpress theme. If you were looking for existing themes that support custom headers, I suggest you try the Wordpress free themes directory.
Since version 2.1, Wordpress has allowed custom headers to be added to themes. I don’t really have a use for it on my own blog, but I’d like to offer that functionality in the themes I release to the public. So last night I waded though some documentation and existing code to figure out just how it’s done. It’s actually pretty simple, so even if you don’t have much experience with Wordpress theming, you should be able to follow along.
1. Define the header properties
First you need to tell Wordpress a few things about your header. There are four things you should specify:
- Header image location (the path to the image)
- Header width
- Header height
- Text color
These definitions go in the function.php file in your Wordpress theme. Here’s what it looks like:
define('HEADER_IMAGE', '%s/images/header.jpg');
define('HEADER_IMAGE_WIDTH', 960);
define('HEADER_IMAGE_HEIGHT', 150);
define('HEADER_TEXTCOLOR', '444444');
As you can see, I use a file called header.jpg and I keep it in a folder called images within my Wordpress theme. You’re free to name your image something else if you prefer, or even put it in a different folder. You’ll want to leave the “%s/” as it is though, since it points to the location of your theme directory. The next two lines specify the width and height of the header image. Wordpress will allow the user to crop any picture they upload to the dimensions you specify to make sure their images fit perfectly into your design. The last line is for setting the color of the header text. The user will have the option of changing colors or hiding text all together, so just set the color to whatever works best with your default background and rest assured that if they change the background, they can change the text to match.
2. Add some style
Now you need to create a function that will provide the styles associated with header image in your theme. All you’re really doing is wrapping some CSS in a PHP function like this:
function header_style() {
?>
<style type="text/css">
#header{
background: url(<?php header_image(); ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#header h1 a{color:#<?php header_textcolor();?>;}
</style>
<?php
}
That’s the very minimum for styling the header. All it does is set the header styles you defined earlier. Notice the closing PHP tag before the styles start and the opening PHP tag after the style ends.
3. Admin styles
You’ve styled the header for the web site itself, but there’s a little bit more to do still. You see, Wordpress allows the user to preview their changes in the admin panel, so you have to set some styles for that as well. You can use (almost) the same code as before, but make sure to add any code that you have in your regular style sheet that applies to the header so that they admin preview and the actual site display the same way. For example, the code for the theme I’m working on at the moment looks like this:
function admin_header_style() {
?>
<style type="text/css">
#headimg{
background:#ffffff url(<?php header_image() ?>) bottom center no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
text-align:center;
text-transform:uppercase;
}
#headimg h1{font-size:2.5em; padding:25px 0 0 0; margin:0 0 15px 0;}
#headimg h1 a{border-bottom:1px solid #dddddd; color:#444444; text-decoration:none;}
#headimg p{color:#777777; font-size:1.2em;}
</style>
<?php
}
The most important thing to note is the function name. Make sure it’s different than the name of the first function. Other than that, just use the styles from the first function along with any header related styles you have in your stylesheet.
4. Add it to the theme
Finally, you need to alert the theme about all the work you just did, so it can use all that code you wrote:
if ( function_exists('add_custom_image_header') ) {
add_custom_image_header('header_style', 'admin_header_style');
}
5. Test it out!
Now you can save your functions.php file and go to your Wordpress admin panel. Go to Appearance>Custom Header and test your new creation!
If you have any questions or comments about the process, leave a note below.
Wordpress Image Sizes
Written on June 19, 2009 at 9:37 pm, by alexmansfield
By default, Wordpress has four sizes that you can choose from when displaying your images. They are:
- Thumbnail (150×150)
- Medium (300×300)
- Large (1024×1024)
- Full Size (Whatever the image dimensions are)
That’s great that they give us choices, but what if we want a diffent size? I really wanted my images to be the same width as my content, so I went searching for a way to easily do that. It just so happens that Wordpress has an option in the admin panel for changing the default sizes. Just go to Settings>Media and you can adjust sizes to your hearts content. I set my large size at 560×1024 (560 being the width of my main content area). If you want your image to always match the width of your content, make sure you set Max Height significantly larger than Max Width. That will keep pictures that are longer vertically from being trimmed smaller than the content width. That’s all for now!
Custom Wordpress Theme
Written on June 19, 2009 at 8:50 pm, by alexmansfield
This theme is barely usable, but I’m tired of using someone else’s theme, so I figured I’d upload it. I built it on top of my Sanitary Wordpress theme this afternoon. It really has no features at all, and I’m not super excited about it, but at least my blog doesn’t look exactly the same as 30,000 other blogs now. I’m sure it will evolve over time.
Have any comments or suggestions regarding the design? Comment below!
Adding Google Analytics to Wordpress
Written on June 18, 2009 at 3:49 pm, by alexmansfield
Adding Google Analytics to your Wordpress blog enables you to see how many people are actually visiting your site. You can also find out where they came from, what they were searching for, what they read, and how long they stayed. There are tons of options when it comes to analytics software, but Google Analytics is one of the easiest to set up and it does everything I need (my only complaint is the lack of real time stats). Today I’ll walk you through the process of setting it up. All you really have to do is add a small chunk of Javascript to every page that you want Google to track. It is possible to manually add it to your theme, but if you were to switch Wordpress themes, your changes would be gone. So I’m going to show you how to use a plugin to add it instead. This way theme changes won’t be an issue.
1. Sign up for Google Analytics
It’s pretty straight forward. You can use an existing Google account to sign up, but it’s not required. Go here to sign up: http://www.google.com/analytics/sign_up.html. At the end of the sign up process, you will get a piece of code. We won’t actually be using all that code, but it’s not a bad idea to save it anyway (it’s not the easiest to find later on if you ever end up needing it).
2. Install a plugin
There are plenty of choices when it comes to Wordpress plugins for Google Analytics. I prefer to use Google Analytics for Wordpress by Joost de Valk. Not only has this plugin received great reviews, Joost is an active member of the Wordpress community. Download the plugin, unzip it, and upload it to your Wordpress plugins directory.
3. Configure the plugin
Login to Wordpress and go to your Plugins page. Find the plugin you just uploaded and click Activate. Now for the plugin to actually work, it needs to know your UA string. This was buried in the code that Google gave you when you signed up. However, there’s an easier way to find it. While you’re logged into Google Analytics, go to the home page by clicking the Google Analytics logo in the top left corner. The home page will list all the sites that you’re using Google Analytics on (there will just be one at this point if you’re setting up analytics for the first time). Just to the right of your domain name, there will be a number. That’s your UA string. Copy it. You’re almost finished. Now go back to Wordpress and go to Plugins>Google Analytics. There will be a warning alerting you that Google Analytics is not active because you haven’t entered your UA string. The UA string goes in the first textbox (it’s labeled Analytics Account ID). Make sure that the Where should the tracking script be placed? option is set to In the footer. You don’t want the user to have to wait for your analytics script to run before viewing your page, so it’s best to load it in the footer. You can adjust all sorts of other settings if you want, but it isn’t really necessary. Click Update Settings and you should be on your way.
Keep in mind that Google Analytics does not give you real-time statistics, so you might have to wait a day or so before you can check on your traffic.
Two Weeks
Written on June 16, 2009 at 12:19 am, by alexmansfield
It looks like my traffic has more than doubled since the first week! From 5 visitors to 12 isn’t too much to get excited over though. I’ve gotten a little traffic from social media sites like Twitter and StumbleUpon, and the rest is from people typeing “Alex Mansfield” into Google (probably just other people named Alex Mansfield, there are a bunch of us). I also had my first iPhone visitor this week, which was sort of cool. Also, according to the Hubspot Website Grader, which grades website SEO/marketing effectiveness, I improved my score from 45/100 to 57/100. So to keep you up to date on what I’ve been doing with this blog, it looks like I’ll need to be writing a post on social media and link building in the near future. Good stuff.
The Sanitary Wordpress Theme
Written on June 16, 2009 at 12:01 am, by alexmansfield
Update: Version 0.2 is now available.
I’ve been thinking for quite a while now about creating a blank Wordpress theme as a starting point for myself as I develop new sites. I’ve gotten tired of stripping down full themes or reworking some of the other blank themes available. What I wanted was a theme with no formatting, no bells, no wistles, and no work to be done before building a new theme. There is one exception though. I don’t want to have to write all my typographical styles out each time so I added a stylesheet for type (it’s in a seperate stylesheet, so if you’d rather write your own, just get rid of the “import” line in the style.css file).
I based this theme off the Whiteboard theme by Brian Purkiss. He did a great job breaking the theme down to its most basic components. I stripped it down just a little bit more and cleaned up some code so it would validate. I borrowed my typography (with a few changes) from the SenCSs framework by Kilian Valkhof.
This theme is meant to be used. Use it for personal projects. Use it for commercial projects. Use it in whatever way you’d like.
If you find an error or have a suggestion, please mention it in the comments. I’d love to get some feedback as to what you like or dislike about this theme as a starting point for your own designs. I’m definitely open to making changes. This is just the 0.1 release. If you use it in a project, I’d love to see what you created. Feel free to leave a link in the comments. Enjoy!
Wordpress RSS with Feedburner
Written on June 15, 2009 at 12:32 pm, by alexmansfield
So to be honest, I don’t know the real advantages to using Feedburner to distribute your RSS feeds, but I’m about to find out. I know quite a few major Care to learn with me? I’m going to sign up for a Feedburner account, set it up, play around with it, and if I don’t see the benefits, I’ll go do some more research.
1. Claim your feed
Go to feedburner.com and sign in using your Google account. If you don’t have one, go ahead and get one (it’s free!). Type in your blog or feed address and hit next.
If you have a seperate feed for your comments, Feedburner will ask you which feed is your source. Choose your regular feed (not your comments feed) and continue. Next you’ll have the opportunity to change your feed title and feed address.
Make some changes if the defaults don’t suit you, then click next.
Record your new feed link. You’ll need it a little later on.
2. Feed stats
Now we’re getting to the good stuff. It looks like Feedburner is analytics for you RSS feeds. According to their website, they track:
- Subscription data (e.g. number of subscribers by day, previous week, last 30 days and all time) and Reach data (the estimated number of individuals clicking or viewing your feed content in a given day)
- Breakdown of feed readers and aggregators, email services, web browsers and bots by which subscribers are accessing your content
- Clickthrough tracking
- Uncommon uses — sites where your content has been resyndicated including other blogs, directories and even spam sites
- Item enclosure downloads (podcasts)
- Live hits, conveniently translated to your local time zone
They track a number of things by default, but give the option to enable additional tracking points. I’ve checked all the additional points (all two that is) except the one that involves podcasting, since I’m not doing any of that at the moment.
3. Integrate with Wordpress
Finally, they even offer a Wordpress plugin for easy integration.
Clicking the link will take you to a page with instructions for installing the plugin. Once you have the plugin installed, go to Settings>Feedburner and enter the feed URL that you recorded in step one and click Save.
4. Test it out
Alright, now that everything is set up, go visit your blog and click your RSS link. It should send you to your brand new Feedburner RSS feed. You can also visit Feedburner and login with your Google account to view your stats.
So it looks like the advantage to using Feedburner is that you can track your RSS subscribers. That’s definitely an essential part of understanding your traffic. I already use Google Analytics to track my website traffic (and I’ll write about that in the future) and now I’m glad I have Feedburner keeping track of my subscribers.
Do you use something other than Feedburner to publish your RSS feeds? Tell us a little about what you use and why in the comments below. Thanks!
Fighting Blog Spam with Akismet
Written on June 12, 2009 at 11:54 am, by alexmansfield
It’s been about a week and a half since I started this blog and I’m beginning to get spam comments as well as pingbacks from blogs that are just posting the first paragraph of my posts. Since I don’t want to have to moderate each individual comment, especially as the site grows, today I’m going to activate the Akismet spam filtering plugin that comes with Wordpress. The Akisment plugin requires an API key from wordpress.com. As long as you’re not making more than $500/month from your personal blog, you can get an API key for free by signing up for a wordpress.com account.
1. Sign up at wordpress.com
If you don’t already have a wordpress.com account, you’ll need to go sign up. If you do, just skip to step two.
2. Retrieve your API key
Sign in to wordpress.com and click My Account>Edit Profile. Your API key will be listed at the top of the page. Copy the API key, you’ll need it in a minute.
3. Activate Akismet
Login to Wordpress on your website (not wordpress.com) and click Plugins. Find Akisment and click Activate (it’s on the right). You will get a message at the top of the page saying “Akismet is almost ready. You must enter your WordPress.com API key for it to work.” Go ahead and click enter your WordPress.com API key.
4. Enter your API key
Enter the API key you copied earlier into the textbox. I also chose to to check the “Automatically discard spam comments on posts older than a month” checkbox as well. I don’t see a point in letting them take up space in the database. Click Update Options and you should get a message saying “Your key has been verified. Happy blogging!”
So… Happy blogging!