background preloader

How I Learned To Build Wordpress Themes

How I Learned To Build Wordpress Themes
Picture your finished custom wordpress theme live on your server, completely unique and fresh. By the time you have finished reading the resources in this post that scenario will be a reality. People love custom themes, they make a blog come to life with a personality of its own. It’s no secret that they’ll reward it you for it through links, subscriptions and bookmarks. Theme Design Lessons How To Create A WordPress Theme From Scratch Good walk through in detail on creation of themes. The 5 Minute Theme Fast way of making simple a simple wp theme. Turn Any Web Template Into a Theme This flash tutorial shows how to turn any web page into a wordpress theme. Mocking Up a Theme In Photoshop A bit of self promotion! 16 Lessons On Theme Creation Covers all bases in detail, really comprehensive lessons on all aspects of WordPress theme creation from header to footer! 4 Step Theme Design Guide Basic Intoduction To Themes Good post breaking down how the themes work for those new to WordPress. Inspiration

10 Tips to Improve Your WordPress Theme - WPShout After finishing up with the new design for WPShout, here are ten tips I’ve got to improve your WordPress themes. 1. Make your sidebar tabbed One of my favourite features of the new WPShoutdesign is the tabbed sidebar. How did I do it? First, I took a look at a couple of scripts, deciding on DomTabs. [css]/*Tabbed Sidebar bit*/ }[/css] And the sidebar code (using the WP-PostViews plugin): [php]<div id=”tabbed”> <div class=”domtab”> <ul class=”domtabs”> <li><a href=”#t1″>Popular</a></li> <li><a href=”#t2″>Latest</a></li> <li><a href=”#t3″>Tags</a></li> </ul> </div> <div> <a name=”t1″ id=”t1″></a> <br /><br /> <? 2. Widgetising your footer isn’t anything particularly new, but it is often overlooked and I really believe that you can do a lot of good with a nice footer. 3. This is a brilliant tip that I saw first on WebDeveloperPlus – you can use WordPress’ built in functionality to display resized images on the front page without a custom field. [php]<? 4. 5. Anyway. Delicious: Digg: StumbleUpon:

The Comprehensive Guide for a Powerful CMS using WordPress - Part one: 101 Techniques for a Powerful CMS using WordPress May 05 2009 This is the first article in the three-part series, “The Comprehensive Guide for a Powerful CMS using WordPress”. Throughout this article, we’ll be focus on many WordPress Theme hacks, ideas, tips and useful tutorials you need to have ready in hand when developing WordPress websites. The Comprehensive Guide for a Powerful CMS using WordPress – Part 2 The Comprehensive Guide for a Powerful CMS using WordPress – Part 3 There are some technical stuff we have to get out of the way first. WordPress CMS Hacks and Tricks 1. By default, a WordPress home page shows chronological blog post entries — with the most recent post at the top. How To » In your admin area, just go to Setting » Reading. Points to take care » First problem you may run into when you make a static page your home page is that the link to that page now appears in the main site navigation. 2. Adding too many pages to a WordPress blog that has a navigation bar in the header can really make your WordPress blog a mess. 3.

Crafting Your Theme Framework's Structure and Layout So far in our quest to create our own theme framework we’ve taken a moment, a brief pause, to learn from the greats who are already managing popular WordPress theme frameworks. Now it’s time to start putting this know-how into practice. In this part of the tutorial we’re going to nail down a flexible HTML structure and very basic CSS. Establishing HTML structure We’re going to start off with the assumption that our HTMLwon’t work in 100% of cases. Think back to some of the sites you’ve put together, and some of the divs you find you end up needing that you hadn’t anticipated. <! This gives us the most basic structure for each of our templates. There are six basic layouts we may run up against: So in reality we’re looking at three layouts. So I propose the following additions to the HTML we’re starting with (see line 30 for where this goes): Having both of these sidebar elements available will make it super easy to shuffle them around based on our needs. Quickly, some default content Success!

13 Helpful Cheat Sheets for Building WordPress Themes 202 shares MP6: The Shape Of Things To Come For The WordPress Dashboard? Let’s be honest, the WordPress dashboard is neither attractive to look at nor particularly conducive to efficient workflows. Read More 277 shares 17+ Resources for Churches Using WordPress Since more than 15% of the web is powered by WordPress, itís not surprising that many churches are utilizing it. How to Code a WordPress 3.0 Theme from Scratch | Onextrapixel - Web Design & Development Magazine With the release of WordPress 3.0 came the implementation of many new features to the popular content management system. In this tutorial we are going to show you exactly how to code a WordPress 3.0 theme from the ground up to take advantage of all of these new features, as well as create a blogging-ready, minimal theme. Setting Up the Work Station To get started with this tutorial we should set up a server on our computer using either XAMPP or WAMP (usually if working on a PC), or MAMP if you are working on a Mac. In terms of code editing I would highly suggest Notepad++. Getting the Necessary Folders and Files Ready In the folder containing your WordPress installation, go to wp-content/themes/ and create a folder named “New 3.0 Theme”. Step 1 – Style.css The style.css will contain all of the elements that style our WordPress template. Now we will create some basic definitions that we will later implement in some of the template’s PHP files. Step 2 – Header.php Step 5 – Index.php Conclusion

The Ultimate Resource For Free WordPress Themes › Dawud Miracle @ dmiracle.com Without a doubt, I’m a WordPress evangelist. I absolutely love WordPress. I’ve not found a better platform for building and managing a website. Doesn’t matter whether you’re blogging, have a store front, create a massive business site or need a basic, static website to promote your services and products – WordPress can manage it all. One of the most remarkable things about WordPress for me is the huge development community that supports it. Yet one of the places that I feel WordPress really shines is in all the free themes (templates) that are available. Just like WordPress, free is a good thing. Here are WordPress theme catalogs, each having many (and in some cases thousands) of free WordPress themes: WordPress Theme Viewer – The ‘official’ WordPress theme viewer. So there you are. And if that’s not enough, here’s a short list of helpful blog posts that have covered free WordPress themes over the past few months. Have you used any of these resources yourself?

Customizing WordPress themes with Dreamweaver 7/31/08 UPDATE: There has just been a new Dreamweaver extension for WordPress themes released called ThemeDreamer. Created by Virtuosoft, ThemeDreamer allows you to visually create and edit WordPress themes in Dreamweaver’s design view. ThemeDreamer combines the WordPress header, sidebar, comments, footer, etc files into one live page in design view so you can easily edit your blog code or CSS file. We used it to create our new SoulVision theme that is available for download on our free WordPress themes page. ThemeDreamer is available now with a free trial download. Back to original post: We enjoy making Dreamweaver templates almost as much as WordPress themes. It’s not difficult to customize a WordPress theme if you know a few shortcuts. Get a free WordPress theme There are thousands of free WordPress themes available from places like the official WordPress theme viewer, freewordpressthemes.com, and Kate’s theme viewer. Set up your local Dreamweaver site Get your blog into Dreamweaver

Top 50 Wordpress Tutorials As a web developer, you can broaden your potential client base and add value for existing clients by listing 'Wordpress' as an area of expertise. Of course, unless you want to bluff your way through jobs, you'd better have the skill to back-up that claim. This collection will help. Wordpress Basics 1. Nettuts+ author Gilles Maes has written an in-depth overview of the comments.php file and how to make the most of the template. 2. iThemes has a tutorial on how to become a Wordpress developer. 3. Streamline your Wordpress set-up by installing multiple instances of Wordpress on the same database. Theme Tutorials 4. Nettuts+ author Sam Parkinson gives a thorough overview of how to make your own custom theme from scratch, complete with source code. 5. A lengthy and thorough series of tutorials covering nearly every aspect of Wordpress theme development. 6. Drew Douglass will teach us, using easy to understand screencasts, exactly how to design for WordPress. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

10 tips for creating high quality WordPress themes Respect HTML and CSS standards This statement may sound pretty obvious, but actually many publicly available themes don’t pass W3C HTML or CSS validation. When building a theme, it is important to respect HTML and CSS standards so your code will be clean and (mostly) cross-browser compatible. A valid HTML/CSS theme is also a proof of quality development. HTML, XHTML and HTML5 code can be checked on theW3C website. Respect WordPress coding standards Like most other open-source projects, WordPress have its own list of coding standards. For example, the coding convention forbids to use PHP shorthand tag: Instead, use full PHP tags: The complete coding standard guide can be read on WordPress codex. Don’t forget wp_head() Within the <head> and </head> tags of most WordPress themes, you’ll find a function named wp_head(). A similar function named wp_footer(); can be found in the footer.php file of most themes. Be careful when including hacks Do you know my blog WPRecipes? Start from something solid

Related: