frontendbook.com » Wordpress

Setting up a website with WordPress 3 in 10 minutes

mattias — Thu, 13 May 2010 09:29:46 +0000

A good friend of mine is setting up a website about watches and I think he has made a good choice of software for the site, he uses WordPress 3 for the development of the site. I think he takes on a good way for a non-tech to solve the evolvment of a website. Start with a lot of content, add functionality, create better searchability/findability and usability as you go. WordPress 3 will make it easy to create great landing pages for things such as barefoot running with garmin gps watches because of WordPress 3′s ability to support custom taxonomies and more good stuff will make it possible to gradually create a better user experience with websites such as my friends. With WordPress 3 WordPress is turning into a CMS-platform and less a blogging platform. And it is just a 10 minute work getting up and running, even the default theme Twenty Ten is looking great! Keep up the job Dave, and if you need help, call me.

10 Web Development Links for You

mattias — Sun, 12 Jul 2009 16:12:44 +0000

It has been a good week for all people working with web development, below I have listed some of the things I think stood out this week.

Google Chrome OS

When Google announced that they were about to launch an Operating System, a lot of people said that they “knew it” and some said that “they had to” and some reacted to that the OS was not built on Android. I felt like when I watched Sixth Sense with Bruce Willis, if I had looked close enough, maybe I could have realised that it was coming, but I was actually pretty stunned by the news that Google will enter the OS-market. The best thing from my point of view is of course the tools people will be using for building applications on top of it, plain web development tools! The Google OS is the Web Developer OS. I will write a longer post on Google Chrome OS later this week where I try to analyze how Google Chrome OS will change how we look at Web Develoment and Web Developers.

BBC Future Media Standards & Guidelines

BBC released their JavaScript Library Glow as Open Source and the library is part of a bigger web development strategy from – BBC Future Media and Guidelines.

Specialist Working Groups, with representation across the BBC, are responsible for considering industry trends and developments in their respective divisions, and defining appropriate standards in response to these developments.

From what I have seen, the documentation and size of the project can only be compared to the YUI-project driven by Yahoo.

Custom Taxonomies in WordPress 2.8

I believe that WordPress will become a big player in the Web Content Management area the next coming year. A lot of people see WordPress as a blogging platform only and complain about the code quality. I think that we are starting to see really good features such as Custom Taxonomies which opens up for very specific solutions built on top of the WordPress platform.

Web Form Validation – Best Practices and Tutorials

I have always liked the problem of client-side form validation on the web and wrote a piece on the subject a couple of years ago, best practices for web form validation, and last week I noticed a peek in traffic as I was linked (somewhat hidden though) from an article on Web Form Validation by Smashing Magazine. The link was to my form validation framework jForm who are in the idea-stage.

Interactive jQuery Selector Test

The guys at the jQuery Blog blogged about this interactive selector test script for jQuery. I like the idea, but would like to see a bigger selector (XPath, XSL, Regular Expression) as an add-on to my favorite editor TextMate

Online Regular Expression Testing

Like a natural law, you will turn to documentation when you need to write a regular expression. This online tool for testing regular expression are the best one I have seen yet, but as mentioned earlier, I would like to see a bundled solution not only for the web but also as plugin to different editors.

SlickMap CSS

Very niched design solution to problem a lot of designers, developers need to solve from time to time, how should we present our Sitemap in a slick way that do not force me to write HTML to scare the kids with. SlickMap CSS solves that problem for you. These small design solutions often becomes standard toolsets as both developers and users find it very handy to use them (Lightbox). Go visit SlickMap – A Visual Sitemapping Tool for Web Developers.

Google Page Speed

Google hired Steve Souders to work on Web Performance, he earlier worked as Chief Performance on Yahoo. Yahoo has done a great job with YSlow Firebug extension making it easier to find bottle necks and easy to solve performance issues on your website. Now Google launches a similar program and add-on for Firebug, Google Page Speed, I bet Steve has something to do with it.

Raphaël JS

This library helps you with your work online with vector graphics using JavaScript. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. The demos are really neat. I think that the good support for different browsers together with the ease-of-use API can make this a hit. It is about time we start seeing bigger use of non-flash vector graphics online.

JavaScript Regular Expression Library

XRegExp is an Open Source JavaScript library that provides an augmented, extensible, cross-browser implementation of regular expressions, including support for additional syntax, flags, and methods. Go check it out.

Adding a header image to the Mumrik theme

mattias — Sun, 16 Nov 2008 10:16:00 +0000

A lot of people have asked us how to add a custom header image to a page using the Mumrik Theme so the page you are using will look something like this.

In order to achieve that page layout you will have to create a page (not a blog post), add and edit some custom fields and finally select the proper page template. We will guide you through the steps in this post

1. Create a Page

First you need to create a page, or edit an existing page.

2. Set Custom Fields Values

When writing or editing an existing page or post, you have the possibility to add custom fields with values specific for that post or page. These values can then be used by themes or plugins in order to achieve whatever the theme or plugin author have in mind. When it comes to the mumrik theme we use custom fields for layout on pages. Scroll down to Custom Fields in your Write Post UI and expand and add the fields full_image and puff where full_image should point to the image you would like to add (preferrably the image is 938 pixels wide) to your layout, within puff you can specify the markup you would like to be added in the semitransparent area in the bottom of the page.

3. Choose Page Template

When the custom fields are set, you have to choose the correct page template. Mumrik is delivered with a custom page template named Section First Page. Choosing the template is easy, all you have to do is scroll down in the Write Post UI and expand the section Page Template and choose Section First Page from the drop-down.

4. Publish and enjoy

When all this is done, all you have to do is publish your page, and you are going to have a brand new layout on your Mumrik-driven page.

Mumrik Theme

mattias — Thu, 06 Nov 2008 20:21:05 +0000

Today we have released a new theme for you to download free of charge. Mumrik is a theme in blue and white with a lot of focus on content management, static pages and easy setup of tools such as Google Analytics and FeedBurner.

Go take Mumrik for a test drive now.

Introducing the NeeWee WordPress Theme

mattias — Fri, 31 Oct 2008 19:05:33 +0000

I just released a new free wordpress theme the other day on Wordpress.org, NeeWee, my goal with NeeWee is to build a good theme for quickly set up a website (not only blogs) built on WordPress, in the first version, I have only added support for Google Analytics and Feedburner, but I plan adding support for more things that I addressed in an earlier post about how to build the perfect wordpress theme. NeeWee is also i18n-enabled and distributed in two languages and a translatable pot-file for adding more languages. In short NeeWee features are:

Blueprint CSS design
jQuery for JavaScript
jQuery UI for interaction elements such as tabs
i18n enabled
Three color schemes (blue, black and orange)
Featured Category
Google Analytics Support
FeedBurner Integration (Feeds and Stats)

Enjoy, and comment and give me feed back on what you would like to see in this theme next.

Front-End Book is a Comment-friendly Blog

mattias — Mon, 20 Oct 2008 08:50:56 +0000

I have added three new features to this blog in order to give people who comment a little extra back whenever they take some time and add a comment to my postings.

1. Remove nofollow on comments

We are using the plugin NoFollow Free by Michele Marcucci. That plugin removes the nofollow from author links in comments when a user has submitted x number of approved comments. On Front-End Book you must have 5 approved comments before the nofollow attribute is removed from author links.

2. Automagically add back link to commentors blog

CommentLuv by Andy Bailey lets you automagically add a link to posters last blog post if a feed is found on the site the athor of the comment has in its author link. We use CommentLuv on Front-End Book and when you comment and use an url where your blog is, CommentLuv will show last blog post.

3. Top list of commenters

To the right we are from today starting to list our best commenters with their name linked to their website and with the number of comments next to them.
Keep up the commenting!

Introducing the NeeWee WordPress Theme

mattias — Sun, 19 Oct 2008 14:23:46 +0000

We at NeeWee are glad to present our first free WordPress Theme NeeWee. The theme has a clean design and comes in three different flavours (blue, black and orange) with an admin interface for enabling featured news, Google Analytics and more. Check out this free wordpress theme now.

WordPress 2.7 Looks Good

mattias — Fri, 17 Oct 2008 17:57:53 +0000

Today the design of the upcoming release of WordPress 2.7 was released, and I really like it.

Mad props to Matt Thomas and Andy Peatling for their visual talents. You can expect these designs to be extended to the rest of the 2.7 screens and implemented over the coming weeks.

The new navigation seems like it is going to reduce number of clicks dramatically.

Building the Perfect WordPress Theme

mattias — Tue, 16 Sep 2008 08:38:03 +0000

I am looking for a Wordpress theme for this blog. The problem with 90% of all themes available is that they focus only on design, not so much on all the other aspects you have to take care of when running a blog/website. Instead of just complaining, I decided to try to define what I believe is needed in order for a Wordpress theme to be professional and worth installing and maybe even buying (Who the hell pays for themes with just a slick design and no functionality added to it?). Now you may ask me why I write this article instead of creating a theme that fits my purpose? Maybe I will, if I find the time, for now you have to stick with me ranting on about why we need better themes for Wordpress.

Admin section

One of the most important things in order to offer a professional wordpress theme, is to create an admin interface, enabling the publisher to manage functionality, look and feel and performance settings. Ideally in this section you could drag-and-drop containers for different types of templates and setup thing such as areas for widgets. Build page templates, edit headers, footers, navigations etc etc. The theme should also implement some kind of frontend cache on top of WP Cache in order to keep database connectivity to a minimum for widgets and template data.

Integrated functionality out-of-the-box

No one thinks it is great fun to enable 25 different plugins and set them up, whenever they are installing a new Wordpress instance. Why not integrate functionality for the most popular plugins into the theme, and make that functionality managable from the admin interface.

Designed with ad standards in mind

Whether you like it or not, a lot of people will show ads in some sort on their blogs/websites whenever they start to get visitors to their site. The theme should make this easier by adapting to standard for ads. Ad Unit Guidelines at IAB.

Allow functionality for integrating with 3rd party data providers

A lot of people will use their WordPress installation as a Web Content Management System and there are few sites out there that do not provide dynamic product data or other data provided by a 3rd party data source.

Navigation solution that can handle both wide and deep structures

In order to be able to manage larger websites, the theme should offer either very flexible templates for pages or several templates to choose from in order to achieve different types of navigation depending on depth in site.

i18n and l10n enabled

Not all websites are written in english for an american market. Some sites even target multiple markets. A professional theme should take care of this with translations enabled and the possibility to show specific content for specific locations/markets.

No need for editing files

There should be no hardcoded values in a professional and useful theme. There should be no need at all to change anything in any file distributed, this should be taken care of by adding admin user interfaces for things that can be changed/modified/edited.

Object Oriented MVC approach to coding

In order to make it possible to extend the functionality of the theme it is good programming practice to strive for object oriented code even when programming themes for WordPress.

Make use of only standard libraries for CSS and JavaScript

A big problem when it comes to frontends is the compability problem with the browser clients that will request your sites. By using standard libraries such as BluePrint CSS and jQuery you will make sure that you are building your frontend code on foundation that will work on a large number of clients. And I guarantee, no matter how good you are at JavaScript or CSS, you will not create as good code and you will not test it as thouroughly as those libraries have been tested.

Delivered with variations available

What it all boils down to is the look and feel and people have different opinions about this and in order to increase the spreading of your new professional theme, you should add variations in look and feel for your theme, or themes within the theme if you like.

Conclusion

Today 99% of all themes are just designed simple xhtml/css/javascript themes with no extra attached for those who see and use WordPress as Web Content Management System. There are even people charging for this kind of themes (AND PEOPLE BUYING). What will happen now is that publishers will have higher expectations and requirements for the themes they are using on their websites. A lot of the things I have discussed in this article is somewhat difficult to add to a theme without rewriting already exisiting functionality. I see two ways this will go, first you will see 10+ A-grade open source themes that will take a big part of the market as they start to implement a lot of the features I discussed (and features I have not even thought about of course). The next step after that is of course new software bundles where WordPress is just the base and we have a lot of CMS-functionality on top of WordPress. There are a lot of different bundles now that are sold as “Universal Solutions” for Made for Adsense-sites and Spam-blogs, but I am sure that within a couple of months a large free software bundling WordPress will show its face to the public and become very popular quick. Whatever political or religious opinion you might have on WordPress, it is here to stay and will be the base in a lot of publishing systems not yet developed.

Wordpress is not just Blog Software, it is Web Content Management Software and should behave and used in such a way.

iPhone Enabled Mobile Web

mattias — Sun, 13 Jul 2008 12:43:36 +0000

We are now iphone enabled! As a first step towards full mobile compability, starting today, FrontEndBook.com is also available through your iPhone or iPod Touch. I found this great WordPress plugin/theme bundle: iWPhone.

I am writing a longer article on how I believe iPhone will change the mobile web, subscribe to our RSS-feed in order to read the article when it is ready for publishing.

Update: Read our longer post on how iPhone and Android will change the way we use the web.