Free WordPress theme: NomeBlog

autoimage
Posted in Theme Development | Tags:

themescreenshot

Recently WordPress has had a huge popularity surge, with the rise of ‘magazine themes’. At the same time that WordPress’ popularity has soared, people have forgotten about what WP is all about: fundamentally, it is a blogging system. Trying to keep that in mind, I’m releasing my first WordPress theme, NomeBlog. NomeBlog is as simple or as complicated as you’d like it to be.

What makes this theme different to the ton of other themes out there at the moment?

Functionality. Nomeblog has been designed to make your life easier; features include:

  • XHTML valid code
  • Gravatar support
  • iPhone support
  • Auto-image resizing
  • Breadcrumbs
  • jQuery navigation
  • Widgetised sidebar
  • Author info at the bottom of posts
  • Related posts
  • ‘Login’ option displayed on the navbar to those logged in
  • Customised default gravatar
  • Support for WP-Pagenavi
  • Sidebar blog
  • Built in archive
  • 125×125 ad ready
  • Feedburner subscribe by email ready
  • Self explanatory code: no options page, instead the code has explanations on what it is doing and how you can customise it.

Diving into the features:

Ease of use

No more silly custom fields. No more uploading an image of just the right size. No more editing the code because it was customised to the original author’s site: NomeBlog just works. Displayed on the homepage can be the whole post, or alternatively (and what I’d recommend), you can cut off how much of the post is displayed on the homepage using the <!–more–> tag.

Nometet.com, I’ve found this feature to be a lifesaver. You don’t have to use it, but it’s there if you want it to be. You can get an image to appear on the homepage, as shown in the image above by adding a custom field ‘Image’. To save yourself using FTP, just upload the picture into a post, click the ‘html’ tab and copy the img src and paste it in the ‘Image’ custom field. Then delete the image from your post. Simple :D. Just to make that clear – add a custom field ‘Image’ and a thumbnail image will appear on the homepage.

You don’t just have to limit your auto-image resizing to the homepage – the following bits of code you can insert into posts and images will be resized. The image risizing is done by a neat script called phpthumb, so more info (and find about whether your host supports it) on the soundforge site. Anyway. The code. This snippet will resize the image to fit in the post area:

<img src="/wp-content/themes/nomeblog/scripts/phpthumb/phpThumb.php?src=[whatever your image source is]&w=590" alt="" />

or alternatively, if you want to have a smaller image, this piece of code will create a 200px x 200px image, aligned right:

<img src="/wp/wp-content/themes/nomeblog/scripts/phpThumb.php?src=[whatever your image source is]&amp;w=200&amp;h=200&amp;zc=1" alt="" align="right" />

There is a ton of stuff you can do with the script, so check out the example page.

iPhone support

screenshot

As I wrote on WPHacks a while ago, iPhone support is becoming increasingly a necessity. So I thought I’d integrate it into my theme. This requires a plugin, but I’ve zipped it all up for you so it is really easy to install. Check out this blog post for detalis of how to install it.

Archive setup

Included with the theme is an archive page template, to set it up, just create a new page, using the page template ‘Archives’. Publish the page (without any content in it), making sure the url is /archive/.

Customised gravatar

You can choose to haveyour own custom gravatar to be displayed when people don’t have a gravatar. Just upload your gravatar in .gif format to /wp-content/themes/nomeblog/images/ , replacing the current file. To activate it, click on ‘Discussion’ under the settings tab in wp-admin. Scroll down and choose your default gravatar.

Author info / Related Posts

relatedpostsandauthor

Again, something I do on Nometet.com is show related posts. But on Nometet I use a plugin. In the NomeBlog theme, related posts is built in (thanks Jean!). How does it work? By findingĀ  posts with similar tags. Thats how. But I don’t use tags! Then the related posts will magically disappear. As I said earlier, NomeBlog is as complicated or as simple as you want it to be.

The author section, as you can see above, shows the author’s gravatar, along with a link to their site. The text description is taken straight from the ‘biolgraphical info’ field in the ‘your profile’ section of /wp-admin/.

Navbar

You know when I said earlier the theme doesn’t require any setting up? Well that isn’t 100% true – you will need to link up the navbar; there probably won’t be room to fit in all your categories, so you’ll need to edit the header.php file, putting in your own linnks. Don’t worry though – it’ll all explain itself once you’re editing.

Sidebar blog

You’ll need to edit the sidebar.php file and the index.php so that the right category is displayed on the sidebar blog – find the category ID (Google how to find it) and change the number in the sidebar and set it so that it is not displayed in the index.php file. Like the navbar, the code explains itself.

Feedburner subscribe by email

In the sidebar.php file are details on how to enable this feature.

Recommeneded plugins

WP-Pagenavi is highly recommended

IntenseDebate is also a handy commenting system that I use here on Nometech.com. I recently wrote on WPHacks how to get started with IntenseDebate.

Something else I use on Nometet.com is the Drop Caps plugin. I’ll post a tut soon showing how to make it look a bit nicer. Grab the RSS feed or subscribe by email to be notified when I do. Its a pretty cool thing to have on your blog.

The Tweetmeme wordpress plugin is also pretty cool – if you’re on Twitter would recommend it.

Download the theme or view the live demo.

I’ve got plans to make amendments and release more themes in the future, so make sure you subscribe to the Nometech RSS feed so you’ll know when I post more themes. Oh, and feedback appreciated – comment below.

CHROME/SAFARI ISSUES ARE FIXED! THE DOWNLOAD HAS BEEN UPDATED WITH THE UPDATE


35 Responses

Comments

  • That is an awesome theme. I'm always looking for themes that are easily customizable, most of the ones I have encountered are locked up where one change can destroy the design. The iPhone feature is awesome, I hate zooming in like 4 times to bring up content. Very nice theme and i'll probably try customizing it since I am stuck in my cubicle all day at work.

  • HicksOnline says:

    looks really good. I may have to add this to my theme "rotation"

  • Nice Theme, I really like the navigation..
    Well if give me the opportunity I can build upon your theme to look more appealing.
    Hit me a mail if interested.

  • Conseils SEO says:

    Hi, this is a great theme, I'll use it for one of my new project!

  • Awesome theme! Looks like you've thought of just about everything. Are the post titles SEO'd automatically or is an SEO plugin required?

  • indie says:

    its broken in chrome, seems to be a problem.

  • I just downloaded this theme because its all I am looking for (and I am Swedish), clean look, secured bottom-line accessibility (taborder and headin structure), I also added the RSS för future follow up, but one question remains.

    Situation: for a screanreader (like Jaws) the main page can be quite hard to "talk the user thorugh" with all them links connected to each post. Tag links, catagorys and comments. So, is that really to plave it on the main page? After each single post it´s quite necessary, and usfeull, but according to me, not on the main page. So if I use this theme, I will strip that information from main page. Your oppinion on this issue?

    For the same screanreader, the link "Read the rest of this entry »" will be read many times, but whare does it lead?! If links are read out of context (one of Jaws features) the linkt to the entry will say noting about where it leads. Your opinion/solution? I have experimented with som "perma-link/link-title php code in the more tag to resolve this.

    And finally, is there a way to more easyly follow the "tab-order" when tabbing through the links? Is there a way to make higlighted links the same red as on focus?

    Thats it for now.

  • Piet says:

    such a great theme! I wonder why you left threaded comments out of it?

  • Alex Denning says:

    I did?! Oh well. Do yourself a favour and install IntenseDebate and that'll sort it for you :D

  • Piet says:

    hmmm, or hardcode it in it :)
    haven't seen Intense Debate yet, will have a look.
    thx

  • Piet says:

    cool, so I have seen it then :)
    gonna read yr article now
    cheers

  • Paolo says:

    Very nice theme. I've inserted it in WordPressGala, my WP themes gallery site.

  • Joey Mills says:

    I downloaded the thing, but how do I change my wordpress blog to be like the one here?
    Nothing has changed and I don't know how to change it.
    Any help would be great, thanks.

  • SaurabhStar says:

    ya…. the theme is nice.. also with d flexibility to cutomize it to suit one's own needs… keep it up…

  • Thales says:

    That's awesome! Highly customizable, just what I needed, thanks a lot! :)

  • Joshua says:

    Awesome theme, but your H tags are all over the place, especially for an SEO fanatic.

    Homepage should be h1, h2, h3 (title, tagline, post names) maybe even an h4 for the widget titles. (I never go below h3)

    then on the post pages the title and tagline should be without an h1, h2. post titles should get an h1, h2 should be in the article, h3 should be the widget titles.

    :o)

  • Joshua says:

    To the guy that replied to my comment, but I assume it hasn't been approved yet… yes, it is true.

    H tags tell Bots (google bots , yahoo bots, etc) what the meaning of the page is about.

    So say you have a blog called… "My family online" (random, I know), and My Family Online is in H1 tags, and then you make a blog post about "Opening a Starbucks restaurant". Now, your H tags are supposed to describe the page in question…. does H1 around My Family Online describe this page? No. Not at all. Therefore, it is a waste, and does not help you. H2 on the blog post title CAN help, (better than nothing) but to be proper AND the best, you want H1 on the post title except for on the homepage, where you should use H1 on the Blog Name.

  • Iva says:

    Wow, mad props for the last thing. I am sick of themes that could be built on, yet they actually have to be enabled to work, as they're options-page dependent. Bravo. :)

  • Looking great, I will use it. I haven’t tried intense debate yet.

  • Raief says:

    Does this theme have any updates now?
    I am curious because I like the theme and am thinking of trying it on one of my niche sites.

  • AlexDenning says:

    Thanks! Glad you like it! Be sure to grab the RSS feed to be notified of any new stuff I post.

  • Alex Denning says:

    You're welcome to edit the theme. I've focused more on the functionality and not the looks, but I might swap that around next time I release a theme.

  • Alex Denning says:

    It just needed a clear:both after the header; fixed now.

  • AlexDenning says:

    They're not totally SEO'd for usability's sake, but they're pretty close.

    Thanks for the compliments :D

  • AlexDenning says:

    Hi Lars,

    I think the tags etc are useful to have on the homepage, and the \\'read the rest of this entry\\' is also useful, and yes, whilst it could be read out of context by a screenreader, 99.99% (roughly) of your users won\\'t be using them, so bear that in mind. You can change the navbar\\'s colours by editing the images – find the two images starting with nav in the /images/ folder.

  • Alex Denning says:

    I'm using IntenseDebate on Nometech (ie this is it!), and something I wrote on WPHacks.com a while ago will guide you through installing it – http://wphacks.com/get-started-with-intensedebate… – enjoy!

  • AlexDenning says:

    You\\'ll need to upload it to /wp-content/themes/ and activate it in the \\'Appearance\\' section.

  • AlexDenning says:

    You think? I normally just have the main page title as H1, then post titles as h2 and sub sections of the post h3. Looks like I\\'ve got some reading to do!

Pingbacks

Shares
Share This

Share This

Liked this post? Help us by sharing it!

Shares