There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don’t know where to start? Don’t worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML, CSS to jQuery and everything else you could possibly imagine.

#1. W3Schools

Your first stop on the quest for learning HTML and CSS should really be W3Schools, if you have never heard of this site then you are missing out on some great tutorials. At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.

#2. Webdesigntuts+

Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. They publish tutorials that not only produce great results and interfaces, but also explain the techniques behind them in a friendly, approachable manner.

#3. netmagazine.com

.net magazine, is stuffed with great tutorials on pretty much anything you can imagine, need a tutorial on HTML, CSS, JavaScript, jQuery, then they are your go to guys. Even though some of their tutorials are aimed at intermediate to advanced web designers, the offer is really great.

#4.  Lynda.com

Lynda.com offers a wide range of video-based tutorials that can teach you pretty much anything about web design, as well as pretty much everything else for a monthly fee. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials.

#5. Smashing Magazine

Smashing Magazine is really a fantastic resource of tutorials on all aspects of web design. Similar to .Net magazine, the lessons are aimed at the intermediate to advanced end of the web design spectrum.

#6. Quackit

Quackit teaches beginners how to create websites. According to the website they start off slowly, teaching you the basics such as HTML and CSS. Then slowly they introduce you to more advanced topics so that you can add more features to your website.

#7. Codecademy

Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We’re determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

#8. Treehouse

Treehouse is a video-based service, where you can learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

#9. Mozilla School of Webcraft

In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web. The site offers a host of free web design training courses, including ones in CSS, PHP, and HTML. What’s great is that they also offer courses in Spanish.

#10.HTML Dog

What makes HTML Dog different to most other HTML guides and tutorials out there is its focus on best practices. “Web Standards” are at its heart, which, to cut a long story short, is all about using technologies, such as HTML and CSS, in the right way.

#11. CSS-Tricks

CSS-Tricks actually a blog run by web designer Chris Coyier. He covers the latest CSS techniques. Recently it has become immensely popular among professional web designers. What makes this site so great is that it is constantly updated source of tips, tutorials, and video lessons, best of all its Free.

#12. Learncss.tutsplus

30 Days to Learn HTML & CSS was created because they believe everyone has the right to learn how to build wonderful things on the web. The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium.

#13. Udacity

Whether you want to learn how to build a simple web site or something as complex as your own search engine Udacity offers everything. With Udacity you can learn a whole bunch of new and interesting things, and best of all the training is absolutely free and is led by expert professors from Stanford and the University of Virginia.

#14. HTML.net

HTML.net provides guidance and help about designing and developing websites. They offer tutorials on everything from HTML, CSS, PHP to JavaScript, their motto is they will get you up and running in less than an hour.

#15. About.com

About.com has tutorials and how to guides on pretty much everything from changing a tire to changing a diaper, and of course they also have a plethora of different tutorials and guidelines for learning HTML and CSS online for free.

...

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books.

1. Introducing HTML5

Authors: Bruce Lawson and Remy Sharp Price: $17 Amazon Kindle Buy now

As HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain.Lawson and Sharp’s Introducing HTML5, now in its second edition, helps you get acquainted with the possibilities of HTML5; it also explores the good and the bad within the spec, along with discussing aspects not yet fully implemented in browsers.

2. The Essential Guide to CSS and HTML Web Design

Author: Craig Grannel Price: $23.09 Buy Now

The Essential Guide to CSS and HTML Web Design is a great book, if you need suggestions on how to create great web sites that are standards compliant, usable, and look great,  and yet the book isn’t filled with boring and dry theory. No matter at what stage of your design career you, the mixture of practical tutorials and reference material makes this book invaluable to both beginners and more experienced designers.

3. HTML and CSS: Design and Build Websites

Author: Jon Duckett Price: $18 Buy Now

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

4. CSS3 for Web Designers

Author: Dan Cederholm Price: $18/$9 (paperback/ebook) Buy now

Cederholm’s book aims to show how CSS3 is a “universe of creative possibilities”, providing insight into web fonts, advanced selectors and the many visual enhancements the technology can bring to web pages. Eric Meyer, An Event Apart partner and co-founder, says: “With Dan you know you’re getting great visual design with a fun theme, wrapped around great technical information. This book delivers big time.”

5. Handcrafted CSS: More Bulletproof Web Design

Author: Dan Cederholm and Ethan Marcotte Price: $29 Buy now

Master sophisticated CSS layout methods powered by a philosophy of ‘progressive enrichment’. Create fluid designs that support today’s plethora of connected devices, and learn techniques that create a living, textural look and feel without killing your user’s bandwidth. Dare to innovate fearlessly and gain tips on persuading your clients to accept your innovations.

6. HTML5 & CSS3 For The Real World

Author: Estelle Weyl, Louis Lazaris and Alexis Goldstein Price: $25 Buy now

One of a number of books concentrating on the core of new web technologies, HTML5 & CSS3 is all about creating dynamic websites with new toys. Instead of fluff and hype, it concentrates on fun, effective techniques that you can start using immediately. According to Studholme: “This book manages the impressive task of covering a massive amount of content without being a tome. It’s full of useful insights and real-world advice.”

7. JavaScript Enlightenment

Author: Cody Lindley Price: $15 (PDF edition) Buy now

This is the book that might transform you from a JavaScript library user into a JavaScript developer. Most of us old-timers learned JavaScript by reading other people’s code and through blind experimentation, so we missed out on a lot of the fundamentals. In this book, Cody does an amazing job walking through the ECMA spec, detailing the intricacies of the JavaScript language.

8. Scalable and Modular Architecture for CSS

Author: Jonathan Snook Price: $15 (Canadian) Buy now

In this book, which started life as a website, Snook outlines the methodology behind SMACSS (pronounced ‘smacks’), a means to examine your design process and fit rigid frameworks into a flexible thought process, thereby resulting in a consistent approach to site development when using CSS.

9. Stunning CSS3

Author: Zoe Gillenwater Price: $29 Buy now

Far too many CSS books are little more than elaborate reference guides, but Gillenwater takes a different approach, helping you learn the power of CSS3 through practical, eye-catching examples. “I don’t think this book has got the promotion and attention it deserves,” says Rewis. “It is sincerely one of the most practical, informative and lovely CSS3 books out there, due to Zoe using a project-based approach throughout to illustrate the concepts.”

10. The Truth About HTML5

Author: Luke Stevens Price: $20 Buy now

As designer and developer Sebastian Green points out, the title of this book shows this is a rather different take on HTML5: “It highlights the myths currently in circulation about the spec and also gives some information about the procedures behind creating it.” Green says the book details how people are using new tags but also shows they may have interpreted the spec incorrectly and headed in the wrong direction. It also explores a groundbreaking semantics initiative, what happens when Flash dies, and how HTML5 alters fundamental components of the web.

11. The Definitive Guide to HTML5

Author: Adam Freeman Price: $25 Buy Now

The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language.

12. HTML5: The Missing Manual

Author: Matthew MacDonald Price: $23 Buy now

HTML5 is more than a markup language—it’s a dozen independent web standards all rolled into one. Until now, all it’s been missing is a manual. With this thorough, jargon-free guide, you’ll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you’ll reach it quickly.

13.  Responsive Web Design with HTML5 and CSS3

Author: Ben Frain Price: $40 Buy now

Responsive web design, in my opinion, represents huge potential for business web development. It can be so easy to view it as just another buzzword, more marketing jargon if you may but if you take the time to understand what is means for web development, you will see its pretty hot with huge potential. The author moves through a well worked out movie website project to show that Responsive web design is not a huge single monolithic thing but instead a series of existing technologies ( HTML5, CSS3 ) and design techniques ( flexible grid layout, flexible images and media and media queries ).

14. CSS3: The Missing Manual

Author: David Sawyer McFarland Price:$20 Buy now

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. You’ll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

15. The Book of CSS3: A Developer’s Guide to the Future of Web Design

Author:Peter Gasston Price:$21 Buy now

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away. With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You’ll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings.

16. Stylin’ with CSS: A Designer’s Guide (Voices That Matter)

Author: Charles Wyke-Smith Price:$25 Buy now

In this completely revised edition of his bestselling Stylin’ with CSS, veteran designer and programmer Charles Wyke-Smith guides you through a comprehensive overview of designing Web pages with CSS, including the advanced capabilities of CSS3 that are now widely implemented across all the major browsers.

17. Smashing CSS: Professional Techniques for Modern Layout

Author:Eric Meyer Price: $25 Buy now

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

18. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

Author: Jennifer Niederst Robbins Price: $27 Buy now

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.

Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.

19. JavaScript & jQuery: The Missing Manual

Author: David Sawyer McFarland Price: Buy now

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.

20. Learning jQuery

Author:Jonathan Chaffer, Karl Swedberg Price:$40 Buy now

Step through each of the core concepts of the jQuery library, building an overall picture of its capabilities. Once you have thoroughly covered the basics, the book returns to each concept to cover more advanced examples and techniques. This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. Basic JavaScript programming and knowledge of HTML and CSS is required. No knowledge of jQuery is assumed, nor is experience with any other JavaScript libraries.

21. Practical CSS3: Develop and Design

Author: Chris Mills Price: $21 Buy now

This book teaches how to use CSS3 to build cool, responsive user interface features that are feasible for use in real-world projects today. Readers will appreciate the author’s approachable style and will catch on quickly with this easy-to-follow, practical guide. Well known and respected CSS3 expert Chris Mills devotes much of the book to creating fallbacks for older browsers, so that the content will still be accessible and usable.

22. Core HTML5 Canvas: Graphics, Animation, and Game Development

Author: David Geary Price:$31 Buy now

Even though Core HTML5 Canvas is written for experienced software developers with an intermediate-level understanding of JavaScript, there is really something in here for everyone. This book shows you how to implement anything you can imagine with the Canvas 2D API, from text editors to video games.

23. Head First HTML and CSS

Author:Elisabeth Robson Price:$23 Buy now

Do you ever feel like a book only makes sense when you are already an expert at something, well then it’s time you picked up Head First HTML, this book will give you a great introduction to learning HTML so you can finally create those web pages you’ve always wanted. Oh, and if you’ve never heard of CSS, that’s okay–however if you want to create great websites today there is really no way around CSS, and thats why this book also covers CSS.

24. CSS Pocket Reference

Author: Eric A. Meyer Price: $11 Buy now

Sometimes you just can’t remember all the different codes needed for a website, well thats where CSS Pocket Reference delivers. This book has all the most essential information you need to implement CSS on the fly. This book is aimed at more advanced designers who just need to quickly check up on something. Along with a complete alphabetical reference to CSS3 selectors and properties, you’ll also find a short introduction to the key concepts of CSS.

25. jQuery: Novice to Ninja

Author:Earle Castledine Price: $23 Buy now

This book is great if you want to jump-start your journey into jQuery. Whether you are a beginner or an experienced developer this book will have something for you. The book starts of with the basics, and then moves on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.

...

The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

New Content Tags

One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality

Tag: <header> Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data. SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content. Example:

<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>

Tag: <nav> Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page. SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content. Example:

<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>

Tag: <article> Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone. SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags. Example:

<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark...

Web developers have a fond love for open source tools not only because these tools are generally free of cost, but they can be modified in any way the developer sees fit. That is actually where the free in free/open source software comes from.

While .NET and other paid technologies and tools do have their place on the Web, it really is open source tools and applications that power it. There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites. The list prepared for you represents 10 open source tools almost any Web developer can use every day:

1. KompoZer

All the fans of Dreamweaver might consider KompoZer the poor man’s choice but actually this isn’t so. KompoZer, the former Nvu, is a WISYWIG HTML editor that, unlike Dreamweaver, doesn’t require an ultra powerful PC just to open a file. KompoZer is a light-weight application but it is a good choice even for advanced programming tasks.

2. Eclipse

Java developers do have a lot of IDEs to choose from. Many of them choose Eclipse because it is convenient to work with. Additionally, it has a PHP plug-in so if you have occasional PHP programming tasks, you can still work in Eclipse.

3. Komodo Edit

Komodo Edit is an editor for Perl, Python, Tcl, PHP, Ruby, Javascript, etc. It is the little brother of their paid Komodo IDE, but even this kind of limited edition has all the perks you will need in your daily work.

4. Apache

Apache is the Web server that no Web developer can go without. Apache is fast and reliable but mastering it can be a bit hard, especially for a beginner.

5. XAMPP

If you want to write Web applications, a Web server is only the foundation. You need other tools, such as the relational MySQL database and the PHP language framework. Installing and configuring them one by one is not rocket science but it is much easier when you get XAMPP – a bundle with Apache, PHP, and MySQL. XAMPP is very easy to install.

6. PostgreSQL

MySQL is a good choice for a relational DB but if you have some reasons not to use it, you could consider an alternative, such as PostgreSQL.

7. phpMyAdmin

phpMyAdmin is another open source application many Web developers can’t live without. It is a GUI  used to administer MySQL databases and it makes the entire  process much easier.

8. Firefox Web Developer Toolbar

Firebug is cute, but if you want something really big and powerful then you should try the Firefox web developer toolbar. It has even more functions than the Firebug plug-in and with it you can literally dissect any Web page to see what’s inside its code.

And for you Chrome addicts out there, there is a version available for you as well.

9. OpenSTA

Once you finish coding your application you are not done yet. You need to test it. While there are tons of tests you can (and should) do, one of the tests you shouldn’t skip under any circumstances is load testing. With the help of OpenSTA you can perform the necessary tests to make sure that your application doesn’t misbehave under stress.

10. Browsershots.org

Unlike the other tools and applications on the list, this one isn’t an application/tool but rather a free service. However, since it is a great helper, I have included it in the list. Browsershots.org allows to you see how your site is viewed in any possible browser. The list of browsers includes almost any browser you can imagine and this saves you the hassle to manually test your site for browser compatibility.

Of course, if I left your favorite tool off this list please share it with our readers in the comment section below!

...

A few weeks ago, I was working with a fellow developer and trying to figure out how we could enhance the functionality of a WordPress website that required managing visitor logins. The site, which was for poets and writers, would allow visitors to set up accounts, submit content, interact with others on the website and share content to outside circles on Facebook and Twitter. After scratching our heads for a number of days, we came to the conclusion that BuddyPress would provide the needed solution. A couple of weeks later, we can see our decision was not misguided.

In our case, BuddyPress worked because it accomplished what it was created to do: enable people with similar interests to connect and communicate. The BuddyPress package however is more than a social networking tool. Companies can use it as an internal communication tool and some universities and colleges have used it to deploy a wide social network on their website. While most institutions are powerless to control and monitor Facebook interactions, BuddyPress provides a safe and secure environment with similar functionality but with the ability to monitor student activity.

BuddyPress is open source and makes available its core code online. In addition, users are free to use its themes, plug-in extensions and contribute their time and knowledge to the project.

The BuddyPress Core

Since BuddyPress is essentially an enhanced WordPress plug-in, it is written with the same primary technologies that power its parent base i.e. PHP and MySQL. Most users will therefore find it real easy if they have previously been working on WordPress. The package extends the integral functions of the WordPress engine to include themes, plugins and widgets effectively inheriting what has been there all along.

BuddyPress Features

In order to allow the creation of social networking applications, BuddyPress comes installed with some basic functionality that includes Activity Streams, User Profiles, Group Creation, Friend System, Bespoke themes and Blogs per user. Even with its own login functionality, BuddyPress integrates with the underlying WordPress platform in such a way that only a single sign-on is required to the system for users thereby providing seamless experiences across the board.

With most users already on social networks, BuddyPress offers a solid strategy of helping you attract new members by allowing you to link user profiles to their other social networks like Facebook and Twitter. Using a code snippet or a plug-in, users can easily share their activity on social networks as well as allow others to check out their other profiles on these outside platforms. Members can even share their profiles on social networks if they want others to join them in their new ‘social network’.

Group Forums

Groups and group forums are popular on the Web and within communities, and BuddyPress offers communities an easy way to post and reply to forum posts. Members have the freedom to search all public forum topics from the Forums Directory and even post a reply or start a forum topic in a public group even when they are not group members. Any time a member adds a post or replies to a forum post, he or she auto joins that group. Group forums in BuddyPress are made up of Forum Topics and Discussion Threads. Forum topics are proposed discussion subjects while discussion threads are the conversations and replies that result from a particular topic.

Users can easily search and filter forum topics and groups using various parameters as well as create new Forum Directory topics in the same way.

BuddyPress also offers other enhancements that include site-wide forums, avatar uploads, a friend messaging system and a bunch of interesting plugins and themes.

BuddyPress can be installed directly through the WordPress dashboard plugins page or downloaded manually from the plugins repository and uploaded to your website. The latest BuddyPress build can also be downloaded from the SVN repository for developers who want to get their hands dirty.

...

The WordPress platform allows you to modify, customize and enhance your existing website easily. You don’t need to change the core program but rather you can create or modify existing plugins to add the extra functionality that you need. This flexibility in customizing your WordPress installation is provided by the WordPress Plugin API.

There are already hundreds of WordPress Plugins on various WordPress Plugin repositories on the Web where you can download and install. If you cannot find a plugin of your choice, this article will introduce the basics of developing your own plugin for WordPress.

Know the Environment

The first thing you want to do is get familiar with the WordPress environment. This includes how files and folders are organized and arranged and how they are referenced from the WordPress interface.  Since PHP is the language used for Plugin development, having PHP programming experience is a prerequisite. Plugins in WordPress are located inside the folder below:

wp-content/plugins

Create a folder for your plugin. We shall name it “Author”. This is where your plugin PHP and JavaScript code will reside as well as the CSS and images that renders the code to make it user-friendly.

Plugin Header Code

Create a PHP file inside the “Author” folder and name it “author.php”. Add the following code to the file:

<?php /* Plugin Name: Author Plugin URI: http://www.davgit.com Version: 1.0 Description: A Plugin that displays author info for each post. Author: David Gitonga Author UI: http://www.davgit.com */

This is standard plugin information header that must be present if WordPress is to recognize the plugin. This plugin info will be displayed when you visit the “Installed Plugins” page.

Adding Functionality

Functions are hard-coded into the plugin files using PHP. In our case, we are going to define one function that calls a section holding the author info. We will also add HTML and WordPress template tags that will be used to build the author info section.

Start by defining the function below:

function author_info() { ?>

Add the HTML needed to build the page as shown below:

<div class = “author_info”> <?php if (function_exists (‘get_avatar’)) { echo get_avatar(get_author_email(), ‘70’); } ?> <?php author_meta (‘description’); ?> </div> <?php

Note the template tags used tell you their functionality. For example, the “get_author_email” tag gets the author email from his profile page.

Add the CSS styles that control the HTML page appearance by adding the code below:

<?php function stylesheet() { echo" <style> .avatar { float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline; } .author_info { color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; } </style> "; }

CSS styles that control the HTML page appearance can also be added by creating a separate file called “styles.css” and then adding the above code to it.

Load the function that will be executed when the plugin loads below:

function display_author_info() { if (is_single()) return author_info().stylesheet(); }

Create a file “single.php” and add the code below to it:

<?php...

If you’re reading this post, chances are you’re familiar with WordPress and its role in the web world as a blogging platform, content management system, multisite administrator, and much more.

While WordPress can be a viable solution for any small business website or blog right out of the box from a fresh install, you can harness the true value of WP by diving into the code and creating Custom Post Types.

What Is A Custom Post Type?

WordPress ships with two default post types, Posts and Pages. By default, posts are time sensitive articles with a certain shelf live. Pages are more evergreen material, designed to remain fairly static such as an About page or Contact page.

A Custom Post Type adds a third (or fourth, or fifth, etc.) type of post to your WordPress sites. For example, I recently completed a site for a local indoor club field hockey team. For their site, I created an athlete profile for every player as a custom post type. This type, similar to user account, collects information on the athletes including academic, athletic and personal information and outputs that on a profile page.

Custom Post Types can be as simple or robust as you’d like. That is what makes it one of the most powerful features in WordPress. With some lines of code in functions.php, you can get up and running with Custom Post Types in your WordPress Themes.

Wait. I have to code? Aren’t there plugins for this?

You betcha. But, I would advise against it. Other than the fact that you’re reading this on Developer Drive and we would obviously rather code it than use a plugin, by coding your Custom Post Type directly, you maintain complete control over what data you collect, where it goes, how you display it, and much more. Plus, if you continue adding plugin after plugin, you’re going to seriously hamper the performance of the site. Don’t waste a plugin on post types.

How is this tutorial going to work?

This is my first tutorial on Developer Drive, so I might go through things a little differently than others that you’ve read before (or could be exactly the same). I will always explain what we’re doing, why we’re doing it, and then show you the code for it. I think the human mind flows best when it has an idea of what it’s looking at and trying to digest.

With that in mind, let’s get started creating a custom post type.

Getting Started

To start, you will probably want to have a fresh install of WordPress on a local server (read up on how to set up a local installation with MAMP or WAMP) and a code editor. It also helps if you’re familiar with WordPress, at least to some degree, and know the role of the functions.php file.

A tip that I’ve gleaned from other developers is to maintain portability with your code, and it is this reason why I suggest when starting your custom post type, you do so in a separate .php file and include it in your functions.php. This keeps functions.php readable, and allows you to take the custom post type from site to site.

So go ahead and open up your code editor, open your themes functions.php file, and create a new .php file.

Registering The Custom Post Type

The first thing we’ll want to do is register the custom post type in our .php file, and then include it to functions.php. For more detailed information on registering your custom post type, take a peak at the WordPress Codex topic on register_post_type();. We first call our add_action() function with init and referencing our function name.

Once we’re initialized, we create two arrays called $labels and $args. These will create the labels you see in the Admin area, as well as the slug for the permalinks (if you use a pretty permalink setting).

Finally, after declaring the $lables and $args, we register the post type with register_post_type();. Here’s the code we have so far.

add_action('init', 'athlete_register'); function athlete_register() { $labels = array( 'name' => _x('Athlete Profiles', 'post type general name'), 'singular_name' => _x('Athlete Profile', 'post type singular name'), 'add_new' => _x('Add New', 'athlete profile'), 'add_new_item' => __('Add New Athlete Profile'), 'edit_item' => __('Edit Athlete Profile'), 'new_item' => __('New Athlete Profile'), 'view_item' => __('View Athlete Profile'), 'search_items' => __('Search Athlete Profiles'), 'not_found' => __('Nothing found'), 'not_found_in_trash' => __('Nothing found in Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'menu_icon'...