background preloader

Designing a blog with html5

Designing a blog with html5
This article is an edited version of two articles published by Opera Web Evangelist, Bruce Lawson, reproduced with permission. All rights reserved. Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog. Firstly what we’ll do is use the header, footer, and nav elements to mark up the broad structure of the page. We’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers. Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. So take the phone of the hook, and make a cup of tea and we’ll get started. with this:

Blank & Bare WordPress HTML5 Frameworks If your looking to give your WordPress theme a new design or simply looking to upgrade your code to more modern technologies such as HTML5/CSS3, you will these free WordPress HTML5 frameworks very handy. These HTML5 WordPress frameworks are stripped back bare and mostly include little or no styling which provides a perfect HTML5 framework for you to build your new WordPress site on. Roots Roots is a starting WordPress theme based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs. Reverie Framework Reverie Framework is a versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. Starkers Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer. Whiteboard Bones BLANK WordPress Theme Blank is a WordPress theme with all the functionality of a normal WordPress theme but with none of the styling. Handcrafted WP

HTML5 Reset :: A simple set of templates for any project Anatomy of an HTML5 Wordpress theme This site has been written in HTML5 and used to use WordPress to manage the content. I’ll explain why I used HTML5, describe the structure of the theme templates, and show some of the ways I tried to tame WordPress’s tendency to add mess to the source code. As this is my personal site I wanted to experiment with using HTML5, CSS3, and WAI-ARIA. All these documents are currently working drafts and subject to change. However, the web documents and applications of the future are going to be written in HTML5 and I wanted to see the benefits of using it to markup static documents. HTML5 templates I started with a static prototype of this site developed on my local server. The single.php template has this rough structure: The first line of the document is the HTML5 DOCTYPE. A clean theme WordPress tends to add classes, elements, and other bits of code in certain places. Removing actions from wp_head() WordPress has a hook called wp_head that sits in the header.php of most themes. Summary

A 1000-Hour Head Start: Introducing The _s Theme Have you checked out the Toolbox theme? Up until recently it was the starter theme we used to build free and premium themes on WordPress.com. Toolbox was (and is!) a great theme, but it could be better. Unfortunately, we wound up in a situation with Toolbox where we wanted to make some more drastic improvements to it as a starter theme but got a little stuck. We had people using it as a Parent Theme and that meant that the simplest id or class change could become a problem. And there were other more beneficial but potentially more disruptive changes we thought would be great to add to it. So, we forked Toolbox — don’t worry it’s still being updated — and made a better, faster, stronger, starter theme. And it’s pretty darn awesome. It’s a starter theme — blank seems appropriate So, what’s so different about _s? And we’re pretty excited about making that code available for you. Free Open Source Software FTW And it’s free. Here’s what’s currently in _s: Get the _s Theme Like this: Like Loading...

The Ultimate Guide to Launching a WordPress-Powered Blog - TentBlogger Spiderman is awesome! He’s one of my favorite comic book characters. I have been literally dying to start this series and now that I’ve finished the first two series (Getting Started with Blog Advertising and Make Money Blogging) I’m ready to tackle number 3, which is going to most likely be upwards of about 30 or so posts. Essentially I’m going to write the guide that I wish I had years ago when I first starting blogging (and developing) in the WordPress platform. No stone will be left unturned: I will essentially give you my unique formula for creating a new blog from Day 1. This blog post will serve as the landing page for all of the posts in the series like I’ve done before. Here’s a few key posts of note with much more to be filled in later. Please comment below letting me know any particular topics you want to make sure I cover! Like this: Like Loading... Related Crafting Perfect SEO Meta Title Tags for Your Blog Posts Fixing and Redirecting 404 Errors, Broken External Links

How To Easily Edit Your WordPress Theme Design With The Firebug Firefox Addon Written by Robyn-Dale Samuda in As bloggers, we aim to provide unique user experiences for all our visitors online through the use of the best blog designs and templates we can find. Although there are thousands of free and premium themes available, there comes a time when we want something specifically suited to our taste as well as our readers’ without hiring a developer. The ability to customize your own blog theme is an invaluable skill and will save you lots of time and money in the long-run; and through the use of a tool like the Firebug Firefox Add-on, making simple and advanced customizations are easier than ever. Firebug is a tool I use extensively as a developer to help me understand a site’s layout and quickly implement design changes through CSS. Firebug’s Features Firebug provides the most common features for almost every customization you can think of. To download this neat tool and find more details regarding its powerful features, visit Getfirebug.com. Additional Resource

10 New Plugins for WordPress 3.0 Meteor Slides Meteor Slides makes it simple to manage a slide show with WordPress by adding a custom post type for slides. The slides are managed as featured images through the media library; they will automatically be cropped to the dimensions specified on the settings page. Optionally, each slide can link to any Post, Page, or external URL of your choice. Meteor Slides is easy to use, but the options should offer enough flexibility to use the slide show in many different ways. Plugin Homepage Front-End Editor A WordPress plugin that enables “edit in place” functionality on your website or blog. Plugin Homepage GetSocial GetSocial allows your visitors to easily share your blog posts to their social networks via a floating box that never goes out of sight. Plugin Homepage Easy Post Types WordPress 3.0 has recently introduced a new feature called “Custom Post Types”. Plugin Homepage Titled Comments Plugin Homepage Contemplate Plugin Homepage Author Exposed Plugin Homepage DynamicWP Pop-Up Menu

25 Steps to Launching Your Blog and Making $100+ A Month in 30 Days Okay, £100 may not sound like much, but few blogs make even that paltry amount. If you want to make money with your blog, follow the steps outlined below. You’ll be well on your way to making a cool £100 (or more) every month within 30 days. First Things First 1. 2. 3. 4. Getting Started With WordPress 5. 6. 7. 8. 9. Admin Drop Down Menu Adds a menu bar to the WordPress admin menu, saving you lots of clicks.Ad Rotator Lets you randomly rotate ads or other text from a text file.Akismet Spam blocker. 10. Writing for the Web 11. 12. 13. 14. Here are some other resources on writing for the web: Marketing Your Site 15. 16. 17. 18. 19. 20. 21. 22. Making Money 23. Here are some advertising programs to consider: 24. , have their own affiliate program. 25. £100 a month not good enough for you?

Learning WordPress: Most Useful Tips and Tutorials - Smashing Magazine 15-Step Checklist To Creating The Perfect WordPress Website Advertisement There is no doubt that WordPress is the best content management system (CMS) for your website. Sure, countless CMS’ are available, ranging from open-source to paid, and you’ll hear evangelists on all sides swearing that their choice is the best. But Drupal, Joomla or any other CMS doesn’t hold a candle to WordPress for its ease of use, security and reliability. It’s no wonder that Web developers have built over 50 million websites on its sturdy back, or that so many designers would never dream of using anything else. Choose A Domain Without a domain, users wouldn’t be able to find or share your website. There are four key elements to a domain: top-level domain, root domain, subdomain and subfolder: Top-Level Domain The top-level domain, or TLD, is the end of the domain. There are many different TLDs, some created exclusively for organizations (.gov, .edu), some specific to countries (.co.uk, .us, .es) and some used most often as an alternative to .com (.net, .org .info).

10 Tips To Optimize Your WordPress Theme The beauty of WordPress is in how easy it is to adapt for different tasks. One can extend it with just a couple of lines of code. In this post, we’ll review 10 shortcode snippets that will tweak and optimize your WordPress theme. You can add all of these code snippets to the functions.php file in your WordPress theme. Limit The Excerpt’s Word Count One thing that can go wrong in WordPress magazine themes is when users include too many words before the more tag. add_filter('excerpt_length', 'ilc_excerpt_length');function ilc_excerpt_length( $length ){ return 10;} Here, we’re using a WordPress filter hook, which is a function that parses and (usually) modifies data before it gets stored in the database or displayed on a page. Add A Favicon Using A WordPress Hook Hooks allow us to insert custom code without touching the template. add_action( 'wp_head', 'ilc_favicon');function ilc_favicon(){ echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . Detect Safari On iOS if( !

How to Change / Shorten Excerpt Length in WordPress Most index pages, archive pages in WordPress display excerpts of 55 words. How can you change, or shorten excerpt length (or even increase it) easily. Advertisements If you look inside your WordPress theme index.php or archive.php, you will find this excerpt tag coming beneath the post title, which displays post excerpt in the front page or archives, category pages. It will display 55 words by default and then end abruptly with [...]. Change excerpt length in WordPress Edit your theme functions file functions.php and add the following code at the bottom just above the last line of the code ? function new_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'new_excerpt_length'); Remember to place it just above the last line of the code ? Its a good idea to backup your themes file before editing it, as any error will give major WordPress theme errors.

Related: