<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Drew M. Turner</title>
	<atom:link href="http://drewmturner.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://drewmturner.com</link>
	<description>Web Development, Web Design, Web Services, Web Everything</description>
	<lastBuildDate>Wed, 15 May 2013 09:08:39 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>A Beginner&#8217;s Guide: Migrating A Website To WordPress Is Easier Than You Think</title>
		<link>http://drewmturner.com/a-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think/</link>
		<comments>http://drewmturner.com/a-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think/#comments</comments>
		<pubDate>Wed, 15 May 2013 09:08:39 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=716</guid>
		<description><![CDATA[&#160;&#160; Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope!</p>
<p>Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we’ll outline the migration process and work through the steps with a sample project. We’ll also cover some of the challenges you might encounter and review the solutions.</p>
<h3>About This Guide</h3>
<p>Before we get to work, let’s establish some context. First, this guide was written primarily with <strong>beginners</strong> in mind and will be most helpful for <strong>basic</strong> websites. Some of you will likely encounter advanced aspects of WordPress migration, but they are beyond the scope of this guide. If you’re tackling an advanced migration and get stuck, feel free to share your difficulty in the comments below.</p>
<h4>Objectives</h4>
<p>The objective of this guide is to help you with the following:</p>
<ul>
<li>Plan an effective migration to WordPress.</li>
<li>Walk through the technical steps involved in migrating.</li>
<li>Get ideas and resources to solve common migration challenges.</li>
</ul>
<h4>Assumptions</h4>
<p>I assume you have basic familiarity with WordPress. Previous development experience with WordPress would be helpful, but not necessary. I also assume you have an existing website and design that you want to migrate to WordPress.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/2.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_2_compressed.png" alt="Starting With A Plan" width="500" height="350" class="alignnone size-full wp-image-108881" /></a></p>
<h4>Basic Steps</h4>
<p>Here are the basic steps that I recommend you follow for a typical WordPress migration:</p>
<ol>
<li><strong>Evaluate website.</strong><br />
Work carefully through the pages on your existing website, identifying all of the types of content (standard pages, photo galleries, resource pages, etc.) and noting any areas that need special attention.</li>
<li><strong>Set up environment.</strong><br />
Set up WordPress and get ready to import.</li>
<li><strong>Import content.</strong><br />
Bring over and organize your content, whether via an importing tool, manual entry (for a small amount, when no tool is available) or a custom importing process.</li>
<li><strong>Migrate design.</strong><br />
Incorporate your existing design into a custom WordPress theme.</li>
<li><strong>Review website, go live.</strong><br />
Carefully review the import, making adjustments where needed, set up any URL redirects, and then go live.</li>
</ol>
<p>With this outline in mind, let’s work through each step in detail.</p>
<h3>Start With A Plan</h3>
<p>The key to a successful migration is to carefully evaluate your current website. You need to figure out how to import and structure the content in WordPress before carrying over the design.</p>
<p>While the principles are the same across migration projects, <strong>the details often vary</strong>. So, below are two lists of questions to ask as you work out a plan.</p>
<h4>Imported Content</h4>
<ul>
<li>How much content needs to be imported (number of pages, number of images, etc.)?</li>
<li>Is the volume low enough to be imported manually, or do you need a tool?</li>
<li>If you need a tool, does one already exist?</li>
<li>Can the content be categorized into the standard “posts” and “pages,” or does it call for custom post types?</li>
<li>Does extra content need to be stored for certain pages (custom fields, taxonomies, etc.)?</li>
<li>Will the URL structure change? If so, will the old URLs need to be redirected?</li>
</ul>
<h4>Existing Functionality</h4>
<ul>
<li>Does the website integrate any third-party services (data collection, reservations, etc.)?</li>
<li>Do any forms need to be migrated (contact forms, application forms, etc.)?</li>
<li>Is access to any content restricted (such as members-only content)?</li>
<li>Does the website sell products (digital or physical)?</li>
<li>Do any administrative tools need to be carried over (such as custom CMS functionality)?</li>
</ul>
<h4>A Working Example</h4>
<p>My brother, Joshua Wold, has volunteered a website to serve as an example; it’s for a side project of his in which he sells posters and postcards of a <a href="http://www.veganfoodpyramid.com/">Vegan Food Pyramid</a>. He built the website in plain HTML, with some basic PHP includes for the header and footer. Below is a screencast of me evaluating the website to give you a sense of how the process will work. Enjoy!</p>
<p><iframe src="http://player.vimeo.com/video/61534938" width="500" height="281" allowFullScreen></iframe></p>
<h3>Set Up WordPress</h3>
<p>Before importing the content, we need to get WordPress ready to go. If you’re just experimenting or if you prefer offline development, start with a <a href="http://codex.wordpress.org/Installing_WordPress#Local_Installation_Instructions">local installation of WordPress</a>. Otherwise, the next step is to install WordPress with your current hosting provider; or you could use the migration process as a great opportunity to move to a new host.</p>
<p>Once WordPress is up and running, you’re ready for action!</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/3.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_3_compressed.png" alt="Setting Up WordPress" width="500" height="350" class="alignnone size-full wp-image-108882" /></a></p>
<p>For our example, we’ve installed WordPress with the same host, setting it up in a <code>/wp</code> directory for the duration of the migration process.</p>
<h4>Settings and Plugins</h4>
<p>With WordPress installed, we’ll make a few minor adjustments:</p>
<ul>
<li><strong>Update permalinks.</strong><br />
Go to <code>Settings &#8594; Permalinks</code> to make changes. In most cases, I’ll switch to “postname”-style permalinks.</li>
<li><strong>Update users.</strong><br />
I create an admin-level account for myself and any admin or editor accounts that are needed for clients and collaborators. I also remove the default “admin” user name if it exists (a basic but wise step for WordPress security).</li>
</ul>
<p>Depending on the needs of the project, we might have to preinstall plugins. Here are the major categories of plugins:</p>
<ul>
<li><strong>Form management</strong><br />
Migrating a form “as is” is usually a mess; simply recreating it using a forms plugin is usually easier. My current favorite is <a href="http://www.gravityforms.com/">Gravity Forms</a> ($39+ per license). Other options are <a href="http://wordpress.org/extend/plugins/formidable/">Formidable</a> (with free and pro versions) and <a href="http://wordpress.org/extend/plugins/contact-form-7/">Contact Form 7</a> (entirely free).</li>
<li><strong>SEO management</strong><br />
Search engine optimization (SEO) is a touchy subject. My philosophy is to build content for people, not for search engines. That being said, there is a common-sense approach to SEO that is solidly supported by the WordPress plugin ecosystem. And if your old website includes custom meta descriptions, giving them a new home during the importing process is important. I recommend <a href="http://wordpress.org/extend/plugins/wordpress-seo/">WordPress SEO</a> (free).</li>
<li><strong>Multiple languages</strong><br />
If your old website supports multiple languages, WordPress has you covered. My plugin of choice is <a href="http://wpml.org/">WPML</a> ($79 per license, free for non-profits). Another option is <a href="http://wordpress.org/extend/plugins/qtranslate/">qTranslate</a> (free).</li>
<li><strong>Security</strong><br />
WordPress security is a topic near and dear to me. The increasing popularity of WordPress has made it a target for security attacks. WordPress itself is rarely the problem; a poorly secured hosting environment or an outdated or poorly developed plugin usually is. I use managed WordPress hosting for the majority of my projects, which offers a good foundation for solid WordPress security. Options include <a href="http://wpengine.com/">WPEngine</a>, <a href="https://www.zippykid.com/">ZippyKid</a>, <a href="https://page.ly/">Pagely</a> and <a href="http://websynthesis.com/">Synthesis</a>. In addition to managed hosting (and especially if you opt for a non-managed host), consider installing a security plugin, such as <a href="http://wordpress.org/extend/plugins/better-wp-security/">Better WP Security</a> (free) or <a href="http://wordpress.org/extend/plugins/wordfence/">Wordfence</a> (also free). Last but not least, review the “<a href="http://codex.wordpress.org/Hardening_WordPress">Hardening WordPress</a>” guide in the Codex.</li>
<li><strong>Backups</strong><br />
If you opt for managed hosting, backups are usually included (make sure, though). If you’re managing backups yourself or you want an extra layer of data protection, great options are available, including <a href="http://vaultpress.com/">VaultPress</a> ($15+ a month), <a href="https://www.codeguard.com/">CodeGuard</a> ($5+ a month), <a href="http://ithemes.com/purchase/backupbuddy/">BackupBuddy</a> ($75+ per license) and <a href="http://wordpress.org/extend/plugins/backwpup/">BackWPup</a> (free).</li>
</ul>
<h3>Import Content</h3>
<p>With WordPress up and running, it’s time to bring over all of your content.</p>
<p>If your old website has a CMS, an importing tool might be available. Start by viewing the list of <a href="http://codex.wordpress.org/Importing_Content">content-importing scripts</a> in the Codex. If there’s a match, great! Follow the instructions and get to work. If all goes well, you’ll have migrated the content over without any trouble.</p>
<p>If your old CMS is not in the list or you don’t have a CMS at all and you’ve got fewer than 100 pages, then manual migration is probably the way to go. Copy and paste the contents, noting the old URLs as you go (tracking the migration in a spreadsheet is a good idea).</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/4.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_4_compressed.png" alt="4" width="500" height="350" class="alignnone size-full wp-image-108883" /></a></p>
<p>If you’ve got a custom CMS or a database of records without an importing tool and a high volume of content, then you might want to <strong>bring in a specialist to move the content</strong> over before continuing. The higher the volume of content, the higher the chance of human error and the more important automating it becomes.</p>
<p>For our project, I’ve migrated the content manually and replaced the existing navigation with a WordPress menu. You can watch the process in this next screencast:</p>
<p><iframe src="http://player.vimeo.com/video/61278240" width="500" height="281" allowFullScreen></iframe></p>
<h3>Bring Over The Design</h3>
<p>With our content in WordPress, it’s time to bring over the design. Incidentally, if you’re considering a new design, then now is a great time to look at the many excellent WordPress themes out there, both in the <a href="http://wordpress.org/extend/themes/">official repository</a> and in third-party marketplaces such as <a href="http://themeforest.net/category/wordpress">ThemeForest</a> and <a href="https://creativemarket.com/themes/wordpress/">Creative Market</a>. For our purpose, I’ll assume that you’re happy with your design.</p>
<h4>Evaluating A Design</h4>
<p>Evaluate the source code of a prospective design as best you can before tackling the migration. If the code is table-based or more complex than you’re comfortable with, then migrating the design might not be worth the effort. While anything is possible (I’ve migrated some complex table-based designs in my time), <strong>not everything is practical.</strong></p>
<h4>Working With Source Code</h4>
<p>In my experience, the easiest way to migrate is to work directly with the source code in the browser. While having access to the original hosting environment can be helpful (especially when working with a lot of images and downloadable files), the ways that websites are built vary so widely that you’ll often have to reverse-engineer the original architecture in order to derive anything useful.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/5.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_5_compressed.png" alt="5" width="500" height="350" class="alignnone size-full wp-image-108884" /></a></p>
<p>Going directly to the source code in your browser of choice will save a lot of time and, barring any important “behind the scenes” functionality, give you everything you need. <a href="https://www.google.com/chrome/">Google Chrome</a> is currently my browser of choice, and I’ve pulled our source-code samples directly from the browser. (In Chrome, go to <code>Menu &#8594; Tools &#8594; View Source</code>, or just right-click to bring up the contextual menu.)</p>
<h3>Create A Custom Theme</h3>
<p>If you’re new to them, <a href="https://codex.wordpress.org/Using_Themes">learn about using themes</a> in the Codex. For the migration process, you can either build a new WordPress theme from the ground up or modify an existing theme to meet your needs. I recommend the latter.</p>
<p>Most of my migration projects have started with the latest version of WordPress’ default theme (currently <a href="http://wordpress.org/extend/themes/twentytwelve">Twenty Twelve</a>). Recently, I stripped down the default theme to create my own migration starter theme, which I’ll use in our example and which <a href="https://github.com/sirjonathan/migration-theme/">you’re welcome to use yourself</a>. (Feel free to suggest improvements!) Let’s get to work.</p>
<p><a href="https://github.com/sirjonathan/migration-theme/archive/master.zip">Download a copy</a> (ZIP) of the migration starter theme or follow along in your own theme of choice as we work through the relevant theme files.</p>
<h3>1. Style Sheet</h3>
<p>Our first step is to bring over the styles from the old website. In most cases, this is as simple as searching the source code for references to <code>.css</code> and then copying and pasting the contents from those style sheet(s) into our own <code>style.css</code>. Let’s get to it.</p>
<ol>
<li>Open up <code>style.css</code>.</li>
<li>Replace the details of the theme (“Name,” “URI,” “Description,” etc.) with your own.</li>
<li>Paste in the styles from the old website.</li>
</ol>
<h4>A Note About Images</h4>
<p>As you migrate the style sheet(s), search for and update any references to images. In general, I like to keep all images in an <code>/images/</code> folder within the theme’s directory. More often than not, changing the locations of images referenced in the original CSS is necessary, and I make sure to update all references in the style sheet and templates accordingly.</p>
<h3>2. Header</h3>
<p>The next step is to create the header for our new theme. Our objective here is to merge the structure of the current code base with WordPress’ templates. Here’s what we’re going to do:</p>
<ul>
<li>Replicate the HTML structure of the old website.</li>
<li>Replace the static menu with a WordPress-powered menu.</li>
<li>Use WordPress’ <code>title</code> tag and leave the <code>wp_head</code> hook in place.</li>
<li>Merge any other relevant tags from the old header.</li>
</ul>
<p>Let’s get into the code!</p>
<h4>Original HTML</h4>
<pre><code class="language-markup html">
&lt;!DOCTYPE HTML>
&lt;html>
&lt;head>
&lt;title>Vegan Food Pyramid posters, postcards and wallpapers&lt;/title>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
&lt;link rel="stylesheet" type="text/css" href="style.css" media="screen" />
&lt;link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
&lt;script type="text/javascript" src="//use.typekit.net/tty6xpj.js">&lt;/script>
&lt;script type="text/javascript">try{Typekit.load();}catch(e){}&lt;/script>

&lt;/head>
&lt;body>
&lt;a href="http://veganfoodpyramid.com">&lt;h1 id="logo">Vegan Food Pyramid&lt;/h1>&lt;/a>
&lt;ul class="menu">
   &lt;li>&lt;a class="active" href="http://veganfoodpyramid.com">Products&lt;/a>&lt;/li>
   &lt;li>&lt;a href="http://veganfoodpyramid.com/wallpaper.php">Wallpaper&lt;/a>&lt;/li>
   &lt;li>&lt;a href="http://veganfoodpyramid.com/about.php">About&lt;/a>&lt;/li> 
   &lt;li>&lt;a href="http://veganfoodpyramid.com/contact.php">Contact&lt;/a>&lt;/li>
&lt;/ul>
</code></pre>
<h4>Merged Header (header.php)</h4>
<pre><code class="language-markup php">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
   &lt;title>&lt;?php wp_title( '|', true, 'right' ); ?>&lt;/title>
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   &lt;meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
   &lt;link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
   &lt;script type="text/javascript" src="//use.typekit.net/tty6xpj.js">&lt;/script>
   &lt;script type="text/javascript">try{Typekit.load();}catch(e){}&lt;/script>
   &lt;?php wp_head(); ?>
&lt;/head>

&lt;body &lt;?php body_class(); ?>>

   &lt;header>
      &lt;a href="http://veganfoodpyramid.com">&lt;h1 id="logo">Vegan Food Pyramid&lt;/h1>&lt;/a>
      &lt;?php wp_nav_menu( array( 
            'theme_location' => 'primary',
            'container' => false,
            'menu_class' => 'menu'
      ) ); ?>
   &lt;/header>
</code></pre>
<h4>Explanation</h4>
<p>One of the challenges of migration is deciding whether to improve code as you go along. Our project has a few areas that could be improved, but Joshua and I agreed to leave them as is. Most of you will be tackling the migration of a design that hasn’t been coded to current best practices (although, in fairness to the original coder, they may have been best practices at the time).</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/6.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_6_compressed.png" alt="Website Review" title="Website Review" width="500" height="350" class="alignnone size-full wp-image-108885" /></a></p>
<p><strong>If time and opportunity allow, I encourage you to improve on the code.</strong> Otherwise, take comfort in the fact that, with the website now on WordPress, improvements will be a whole lot easier down the road.</p>
<p>Let’s work through the changes we’ve made!</p>
<ul>
<li><strong>Doctype</strong><br />
Make sure to carry over the same doctype. In this case, the original HTML already has an HTML5 doctype (a relatively rare occurrence on old websites). Using a modern doctype in a code base written for an older specification (such as XHTML or HTML4) could break the layout (especially in old browsers).</li>
<li><strong>Meta tags</strong><br />
I usually bring over the majority of meta tags as is, replacing them in WordPress. The exception in our case is the reference to the style sheet, which is being inserted automatically via <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_style"><code>wp_enqueue_style</code></a> in the <code>functions.php</code> file.</li>
<li><strong>Scripts</strong><br />
Scripts can be tricky. If a script belongs on every page (such as a tracking script or font script), then putting it directly in the header (or footer) file is fine. If it needs to appear only on certain pages, then a <a href="http://codex.wordpress.org/Conditional_Tags">conditional tag</a> will do the trick. As a best practice, register all scripts and add them to the header (or footer) via <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"><code>wp_enqueue_script</code></a>. If you’re up for the challenge, I recommend doing it this way. (Check out a <a href="http://wptheming.com/2013/02/typekit-code-snippet/">tutorial on enqueuing TypeKit</a> the right way.)</li>
<li><strong>wp_head</strong><br />
Leave <code>&lt;?php wp_head(); ?></code> at the bottom of the <code>&lt;/head></code> tag in the merged header file. WordPress uses <a href="http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head"><code>wp_head</code></a>, among other things, to enqueue scripts and style sheets that are referenced in the theme (usually in <code>functions.php</code>) and in plugins that you’ve installed. Without <code>wp_head</code> in place, most front-end plugins won’t work.</li>
<li><strong>body_class</strong><br />
Notice our use of the <code>&lt;?php body_class(); ?></code> tag. WordPress uses this to provide a series of helpful classes to the <code>&lt;body></code> tag depending on the page being viewed. In our example, the <code>&lt;body></code> classes weren’t being used. Yours might have unique IDs or classes on each page, in which case you can create a custom function using conditional tags to add the appropriate classes to the corresponding pages. <a href="http://codex.wordpress.org/Function_Reference/body_class">Have a look at the Codex</a> for some examples.</li>
<li><strong>WordPress menus</strong><br />
Switching to a WordPress-powered menu is one of the more complex tasks in most basic migrations. It will be fairly straightforward for us. We have a menu with simple markup that uses an <code>active</code> class (generated via PHP) to indicate which page the visitor is viewing. The <a href="http://codex.wordpress.org/Function_Reference/wp_nav_menu"><code>wp_nav_menu</code></a> function is highly flexible and offers built-in functionality to handle the current state of an element in the menu. I’ve updated the references in the style sheet to the <code>active</code> class and changed them to use the equivalent generated by <code>wp_nav_menu</code>, which is <code>current-menu-item</code>. Watch the screencast on importing content to see how I’ve set up the menu for our example.</li>
</ul>
<p>And that’s a wrap! Let’s move on to the next piece.</p>
<h3>3. Footer</h3>
<p>The footer is usually the most uneventful template in the migration process. As with the header, our objective is to merge the relevant parts of the original source code. Let’s get to it!</p>
<h4>Original HTML</h4>
<pre><code class="language-markup html">
&lt;div id="footer">&lt;p>&copy; 2013 VeganFoodPyramid.com&lt;/p>&lt;/div>

&lt;script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
&lt;/script>
&lt;script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}&lt;/script>

&lt;/body>
&lt;/html>
</code></pre>
<h4>Merged Footer (footer.php)</h4>
<pre><code class="language-markup php">
&lt;div id="footer">&lt;p>&copy; &lt;?php echo date('Y'); ?> VeganFoodPyramid.com&lt;/p>&lt;/div>

&lt;script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
&lt;/script>
&lt;script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}&lt;/script>

&lt;?php wp_footer(); ?>

&lt;/body>
&lt;/html>
</code></pre>
<h4>Explanation</h4>
<p>Some footers are hard to migrate (such as ones with complex menus and widgets), but most are simple. In this case, we’ve merged the HTML with our footer template, making sure to preserve our reference to the <a href="http://codex.wordpress.org/Function_Reference/wp_footer"><code>wp_footer</code></a> hook. We’ve also changed the date reference to use PHP, ensuring that it updates with each year.</p>
<h3>4. Home Page</h3>
<p>One of the challenges of a migration is that there are so many different ways to get the job done. The home page is a good illustration of this because it tends to be the most different from the rest of the website. Adopting the simplest method is usually best. I’ve opted to put all of the home page’s content directly in the template. Changes will be rare and can easily be made by editing the template.</p>
<p>Let’s look at the code, excluding the header and footer, which we’ve already covered.</p>
<h4>Original HTML</h4>
<pre><code class="language-markup html">
&lt;div id="content">

&lt;div id="poster">
&lt;a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg">&lt;img class="product-img" src="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg" />&lt;/a>
&lt;div class="description">
&lt;h2>Poster&lt;/h2>
&lt;p>A 30&#215;20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.&lt;/p>
&lt;h3>$30 each&lt;/h3>
&lt;p>Includes free shipping worldwide&lt;/p>
&lt;a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=2FKQT879CXYYG">Buy&lt;/a>
&lt;/div>
&lt;/div>

&lt;div id="postcard">
&lt;a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg">&lt;img class="product-img" src="http://veganfoodpyramid.com/images/postcard-splash.jpg" alt="Postcard Splash" />&lt;/a>
&lt;div class="description">
&lt;h2>Postcards&lt;/h2>
&lt;p>Beautiful 4&#215;6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!&lt;/p>
&lt;h3>$50 for 50&lt;/h3>
&lt;p>Includes free shipping worldwide&lt;/p>
&lt;a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=EN387WHNSSFMW">Buy&lt;/a>
&lt;/div>
&lt;/div>

&lt;/div> &lt;!-- end content -->
</code></pre>
<h4>Merged Home Page (/page-templates/front-page.php)</h4>
<pre><code class="language-markup php">
&lt;?php
/**
 * Template Name: Front Page Template
 */

get_header(); ?>

&lt;div id="content">

   &lt;div id="poster">
      &lt;a href="&lt;?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg">&lt;img class="product-img" src="&lt;?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg" />&lt;/a>
      &lt;div class="description">
         &lt;h2>Poster&lt;/h2>
         &lt;p>A 30&#215;20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.&lt;/p>
         &lt;h3>$30 each&lt;/h3>
         &lt;p>Includes free shipping worldwide&lt;/p>
         &lt;a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=2FKQT879CXYYG">Buy&lt;/a>
      &lt;/div>
   &lt;/div>

   &lt;div id="postcard">
      &lt;a href="&lt;?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg">&lt;img class="product-img" src="&lt;?php echo get_stylesheet_directory_uri(); ?>/images/postcard-splash.jpg" alt="Postcard Splash" />&lt;/a>
      &lt;div class="description">
         &lt;h2>Postcards&lt;/h2>
         &lt;p>Beautiful 4&#215;6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!&lt;/p>
         &lt;h3>$50 for 50&lt;/h3>
         &lt;p>Includes free shipping worldwide&lt;/p>
         &lt;a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=EN387WHNSSFMW">Buy&lt;/a>
      &lt;/div>
   &lt;/div>

&lt;/div> &lt;!-- end #content -->

&lt;?php get_footer(); ?>
</code></pre>
<h4>Explanation</h4>
<p>The <code>front-page.php</code> template begins and ends with a reference to the header and footer that we’ve just prepared. In between, we’ll merge the rest of the HTML, and we’ll use the <a href="http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri"><code>get_stylesheet_directory_uri</code></a> function, which will dynamically generate references to the images folder in our new theme.</p>
<h3>5. Standard Page Template</h3>
<p>With the header and footer done, the standard templates are usually quite easy. For brevity’s sake, we’ll go directly to the merged templates.</p>
<h4>Merged Template (page.php)</h4>
<pre><code class="language-markup php">
&lt;?php
/**
 * The template for displaying all pages.
 */

get_header(); ?>

&lt;div id="content">

   &lt;?php while ( have_posts() ) : the_post(); ?>

      &lt;?php get_template_part( 'content', 'page' ); ?>
   
   &lt;?php endwhile; ?>

&lt;/div>

&lt;?php get_footer(); ?>
</code></pre>
<h4>Content Template (content-page.php)</h4>
<pre><code class="language-markup php">
&lt;?php
/**
 * The template used for displaying page content in page.php
 */
?>

   &lt;article &lt;?php post_class(); ?>>
      &lt;?php the_content(); ?>
   &lt;/article>

</code></pre>
<h4>Explanation</h4>
<p>There are several items to point out here:</p>
<ul>
<li><strong>The loop</strong><br />
If you’re new to WordPress or programming in general, this piece of code in the <code>#content</code> container might look intimidating. The “loop” is code used by WordPress to display a post’s content. You can <a href="http://codex.wordpress.org/The_Loop">learn more about the loop</a> in the Codex. Meanwhile, just make sure that it’s in there, or else the content you save in WordPress won’t show up.</li>
<li><strong>get_template_part</strong><br />
Our page template here employs the handy <a href="http://codex.wordpress.org/Function_Reference/get_template_part"><code>get_template_part</code></a> function, which is a great way to keep content organized, especially in complex projects. Our website is simple enough not to warrant it, but I left it in just to show you.</li>
<li><strong>post_class</strong><br />
I also added a reference to <code>&lt;article></code> (with the corresponding <a href="http://codex.wordpress.org/Function_Reference/post_class"><code>post_class</code></a> function) to make further customization of the design easier.</li>
</ul>
<h3>5. Full-Width Template (full-width.php)</h3>
<p>Although not illustrated in the screencast, the design includes a full-width template for use on the “Wallpaper” page, while the standard page template is changed to a narrow width.</p>
<p>Let’s have a look.</p>
<h4>Merged Template (templates/full-width.php)</h4>
<pre><code class="language-markup php">
&lt;?php
/**
 * Template Name: Full-Width Template
 */

get_header(); ?>

&lt;div id="content" class="full-width">

   &lt;?php while ( have_posts() ) : the_post(); ?>

      &lt;?php get_template_part( 'content', 'page' ); ?>
   
   &lt;?php endwhile; ?>

&lt;/div>

&lt;?php get_footer(); ?>
</code></pre>
<h4>Explanation</h4>
<p>With the template created, all that remains is to assign it to a page. From the “Edit Page” interface, find the “Page Attributes” box (usually right below the “Publish” box) and select “Full-Width Template” from the “Templates” dropdown menu.</p>
<h3>6. Extras</h3>
<p>Now let’s tackle some of the “extras” that sometimes come up as challenges during a WordPress migration.</p>
<ul>
<li><strong>Breadcrumbs</strong><br />
Breadcrumbs are relatively common on websites. The easiest way to reproduce them is with a plugin. My current favorite is <a href="http://wordpress.org/extend/plugins/breadcrumb-navxt/">Breadcrumb NavXT</a> (free). <a href="http://wordpress.org/extend/plugins/wordpress-seo/">WordPress SEO</a> also offers built-in breadcrumbs.</li>
<li><strong>Widgets</strong><br />
If the design you’re migrating has a sidebar, you could either reproduce it as is (the migration theme has a sample sidebar in place) or integrate WordPress widgets to allow for a dynamically managed sidebar. The folks at Automattic have prepared a handy <a href="http://automattic.com/code/widgets/themes/">guide to widgetizing themes</a>. Start there.</li>
<li><strong>Restricted content</strong><br />
In case some content needs to be restricted, WordPress offers <a href="http://codex.wordpress.org/Using_Password_Protection">basic password protection</a> by default. If you want more control, use a plugin. For basic role management and content permissions, I recommend <a href="http://wordpress.org/extend/plugins/members/">Members</a> (free). For more advanced control (especially if payment is involved), consider <a href="http://wordpress.org/extend/plugins/membership/">Membership</a> (which has basic and premium versions), <a href="http://wordpress.org/extend/plugins/s2member/">s2Member</a> (also free and premium) and <a href="http://wordpress.org/extend/plugins/wp-members/">WP-Members</a> (free).</li>
<li><strong>Custom Post Types</strong><br />
Some migrations, especially ones with a lot of different types of content, call for “custom post types.” You can learn about <a href="http://codex.wordpress.org/Post_Types">custom post types in the Codex</a>. To set them up, I recommend using a plugin. Two good choices are <a href="http://wordpress.org/extend/plugins/custom-post-type-ui/">Custom Post Type UI</a> and <a href="http://wordpress.org/extend/plugins/types/">Types</a> (both free).</li>
</ul>
<h3>Review Website</h3>
<p>Now that we’ve wrapped up work on the theme, it’s time for a review. Work carefully through the pages on the migrated website. For a large website, focus on the different templates. As you review, here are some things to watch out for:</p>
<ol>
<li><strong>Broken links</strong><br />
Make sure all links work as they should. If you have only a few pages, you can check manually. For an automated check, use <a href="http://peacockmedia.co.uk/integrity/">Integrity</a> (free, for Mac) or <a href="http://home.snafu.de/tilman/xenulink.html">Xenu’s Link Sleuth</a> (free, for Windows).</li>
<li><strong>Broken styles</strong><br />
Occasionally, for one reason or another, a design element of your website might have broken during the migration. Carefully compare the old HTML to the new to make sure you haven’t missed any important code and that the corresponding style sheet rules have been carried over. If all else fails, a quick rebuild of the design element on the new website might be in order.</li>
<li><strong>Broken functionality</strong><br />
Test any functionality that you’ve migrated over, such as “Buy now” buttons, contact forms, newsletter opt-ins, “members-only” content, embedded maps, media players, etc.</li>
<li><strong>Temporary links</strong><br />
Depending on how you’ve carried out the migration, temporary links to a subfolder or testing domain might appear in your content or theme. You’ll want to update these before going live. Use the <a href="http://wordpress.org/extend/plugins/search-and-replace/">Search and Replace</a> plugin (free) to check for and update links in your content.</li>
</ol>
<h4>Setting Up Redirects</h4>
<p>If your link structure has changed (and it usually will, even if only slightly), make sure that visitors are redirected from the old pages to the new. For small amounts of content, one of the easiest ways to set up redirects is by adding them to the <code>.htaccess</code> file.</p>
<p>Open the <code>.htaccess</code> file in the WordPress directory. If you don’t see it, set your FTP client to show hidden files. Now, create redirect rules for each of the old pages. Be sure to put these rules <em>after</em> WordPress’ block of rules.</p>
<p>Here are the rewrite rules for our links:</p>
<pre><code class="language-markup">
Redirect 301 /wallpaper.php http://veganfoodpyramid.com/wallpaper/
Redirect 301 /about.php http://veganfoodpyramid.com/about/
Redirect 301 /contact.php http://veganfoodpyramid.com/contact/
Redirect 301 /contactthanks.php http://veganfoodpyramid.com/contact/thanks/
</code></pre>
<p>If editing your <code>.htaccess</code> file is not an option or if you’re dealing with a lot of redirects, then have a look at <a href="http://wordpress.org/extend/plugins/redirection/">Redirection</a> (free).</p>
<p><strong>Advanced tip:</strong> If the volume of redirects is very high (which is likely with a large-scale migration and a custom importing process), then consider building a function that hooks into <a href="http://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect"><code>template_redirect</code></a>, compares a generated list of cases, and then uses the <a href="http://codex.wordpress.org/Function_Reference/wp_redirect"><code>wp_redirect</code></a> function to redirect any matches.</p>
<h3>Going Live</h3>
<p>Going live with a website usually involves one of two tasks:</p>
<ol>
<li>Relocate WordPress from the development folder to the root directory.</li>
<li>Point the domain name from the old server to the new WordPress server.</li>
</ol>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/7.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/05/image_7_compressed.png" alt="Going Live!" width="500" height="350" class="alignnone size-full wp-image-108886" /></a></p>
<h4>Relocating WordPress</h4>
<p>If you set up WordPress in a subfolder (as we did), then going live involves a few simple steps. Follow the guide to <a href="http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory#Using_a_pre-existing_subdirectory_install">using a pre-existing subdirectory installation</a>.</p>
<p>Once you’ve made the change, check immediately for any broken links that you may have missed in the final review.</p>
<h4>Pointing to a New Server</h4>
<p>If you set up WordPress on a new server, then you probably used a temporary domain. Accordingly, remove references to the temporary domain before pointing the domain to the new server.</p>
<p>Also, if you’re planning to update the name servers for your domain, then first resolve any dependencies in the current DNS records (such as hosted email and third-party services). I usually go live with a domain by updating the A records, leaving the name servers in place.</p>
<h3>Conclusion</h3>
<p>And there you have it! <strong>A successful WordPress migration is all about the details</strong>, and while this guide is by no means comprehensive, you now have a good outline of the process and a sense of some of the challenges you’ll encounter, along with ideas for solving them. If you run into challenges along the way, share them in the comments below. Now get migrating!</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Jonathan Wold for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/05/15/migrating-a-website-to-wordpress-is-easier-than-you-think/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/a-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think/" data-text="A Beginner&#8217;s Guide: Migrating A Website To WordPress Is Easier Than You Think"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/a-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fa-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think%2F&amp;title=A%20Beginner%E2%80%99s%20Guide%3A%20Migrating%20A%20Website%20To%20WordPress%20Is%20Easier%20Than%20You%20Think" id="wpa2a_4"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/a-beginners-guide-migrating-a-website-to-wordpress-is-easier-than-you-think/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Sharing Your Experiences: How To Contribute To WordPress</title>
		<link>http://drewmturner.com/sharing-your-experiences-how-to-contribute-to-wordpress/</link>
		<comments>http://drewmturner.com/sharing-your-experiences-how-to-contribute-to-wordpress/#comments</comments>
		<pubDate>Fri, 10 May 2013 12:07:36 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=715</guid>
		<description><![CDATA[&#160;&#160; WordPress is built by volunteers. People from all over the world collaborate to create the core software, write the documentation, provide support, translate WordPress, organize events and generally keep the project running. Individuals work on WordPress in their free time, and companies ask their employees to get involved. Part of WordPress’ success is that [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>WordPress is built by volunteers. People from all over the world collaborate to create the core software, write the documentation, provide support, translate WordPress, organize events and generally keep the project running. Individuals work on WordPress in their free time, and companies ask their employees to get involved.</p>
<p>Part of WordPress’ success is that the community consists not only of developers, but of designers, user experience experts, support volunteers, writers, users, accessibility experts and enthusiasts. This diverse input strengthens the project. It also means you have more space to get involved. Whatever your skill set, the WordPress community has room for you.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/splash2.jpg"><img class="aligncenter size-full wp-image-108291" alt="splash" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/splash2.jpg" width="500" height="333" /></a><br /><em>A bunch of WordPress contributors.</em></p>
<p><strong>In this article, we’ll talk about the different contributor groups and how you can take part.</strong> I spoke with the current team reps and project leads, who have offered advice on how to get started with their contributor groups. But first, why should you get involved with WordPress?</p>
<h3>Why Get Involved?</h3>
<p>I had a chat with Matt Mullenweg, one of the founding developers of WordPress, about contributing to the project. We started off talking about the mix of people who contribute to WordPress. There are contributors who are sponsored by businesses that use WordPress, such as Automattic, Dreamhost and 10up, and then there are passionate individuals who dedicate their own time to the project.</p>
<blockquote>
<p>&#8220;People who use WordPress are passionate about open source, want to democratize publishing and like to learn. I would say that’s the number-one biggest characteristic, because contributing to open source, and particularly the WordPress project, is <strong>probably one of the best learning opportunities on the Internet</strong>.&#8221;</p>
</blockquote>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/matt.jpg"><img class="alignnone size-full wp-image-78211" title="core team" alt="matt mullenweg" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/matt.jpg" width="500" /></a><br /><em>Matt chats about the future of WordPress at the WordPress Community Summit 2012. (Image: <a title="IMG_1928 | Flickr - Photo Sharing!" href="http://www.flickr.com/photos/89591031@N06/8149353398/in/pool-wpcs2012/">konsobe</a>)</em></p>
<p>For Matt, this is the greatest benefit you will get from contributing. You get to be part of a large, supportive community that has an impact on the lives of millions and millions of people. Something you do in an afternoon can have an effect on people all over the world.</p>
<blockquote>
<p>&#8220;You can’t knock on the door at Google and say, “Hey, do you mind if I help you out with your home page? I have some ideas for you.” But you could come to us and say, “Hey, I have some ideas for your dashboard, and here are some patches.”&#8221;</p>
</blockquote>
<p>A number of challenges face the WordPress project:</p>
<ul>
<li><strong>Contributor balance</strong><br />
Currently, the number of contributors is skewed towards people involved with code. Plenty of opportunities lie in other areas &mdash; support, documentation and marketing, for example &mdash; but not so many people are getting involved.</li>
<li><strong>Mobile</strong><br />
Not enough people are getting involved with mobile. Most of the people involved with mobile are currently sponsored by Automattic. Because mobile is fast becoming the way that people interact with the Internet, this is a crucial group and currently has a dearth of contributors.</li>
</ul>
<p>With that in mind, let’s look at the ways you can get involved with WordPress.</p>
<h3>Core</h3>
<p>Mark Jaquith is an <a href="http://coveredwebservices.com/">independent developer</a> and one of the lead developers of WordPress. These days, he is a jack of all trades in the project, working closely with younger and newer developers, helping to point them in the right direction. He was also the release lead for the 3.6 release cycle. The core team comprises all sorts of developers and designers &mdash; PHP and JavaScript developers and front-end developers and designers. These are the people who build the WordPress that you install on your server.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/mark.jpg"><img class="alignnone size-full wp-image-78211" title="core team" alt="mark jaquith" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/mark.jpg" width="500" /></a><br /><em>Being a lead WordPress developer makes Mark Jaquith happy. (Image: <a href="http://www.flickr.com/photos/themitcho/8177703347/in/pool-wpcs2012/">Michael Yoshitaka Erlewine</a>)</em></p>
<p>I asked Mark how the the core contributor team works. He describes it as a set of concentric rings:</p>
<blockquote>
<p>&#8220;You have the leads in the inner sanctum, and then you have the people with permanent commit access, and then you have the people to whom we give temporary commit access for release, and then there are the people whose patches are implicitly trusted and go in without too much inspection. It just keeps going out from there. Those are very fluid boundaries, so people flow between them.&#8221;</p>
</blockquote>
<h4>Challenges</h4>
<p>As much as possible, the core team tries to work by consensus. Issues are discussed, publicly if possible, although anything contentious may be addressed in private discussion.</p>
<p>One of the biggest challenges facing WordPress is that not everyone is on the project full time. Even Automattic employees have other responsibilities within Automattic. This means that people can contribute varying amounts of time. If a lot of people see a dip in their free time, this can cause problems for the project. The core team tries to mitigate this by having more contributors and more people who can commit. However, a balance has to be struck because if there are too many committers, no one would know what’s going on.</p>
<h4>Get Involved</h4>
<p>You can start getting involved in a number of ways:</p>
<ul>
<li><strong>Live chats</strong><br />
Tap into the weekly live chats (Wednesdays 21:00 UTC, irc.freenode.net, #wordpress-dev). Before diving in, you should gauge at what point in the release cycle the project is at:</p>
<ul>
<li><strong>Early stages</strong><br />
Planning the next release.</li>
<li><strong>Middle stages</strong><br />
Guiding the features and checking on progress.</li>
<li><strong>Final stages</strong><br />
Bug scrubs.</li>
<li><strong>After a release</strong><br />
Mostly an open forum, a good time to ask for advice on moving your ticket forward.</li>
</ul>
</li>
<li><strong>Firehose</strong><br />
You can subscribe to <a title="WordPress Trac" href="http://core.trac.wordpress.org/">trac</a> notifications and get notified of every comment in every ticket. It’s a lot of data to process, but you should get an idea of how the project works, various people’s roles, how much authority they have, and best practices.</li>
<li><strong>Ideas</strong><br />
If you have an idea for a feature or anything else WordPress-related, a good place to start is to write a blog post about it. There is an ideas forum, but it’s not very well used. If you have a concrete idea, with a vision of how to implement it, a blog post may well get you more traction. It will give you space to flesh out the idea and provide an opportunity for other community members to comment on it.</li>
</ul>
<p>Ready to get involved with WordPress core? Other than development skills, I asked Mark what skills someone should have:</p>
<blockquote>
<p>&#8220;The number one skill you need for just about any job, but specifically working on open source, is communication skills. You need to have clarity, consistency, compassion, relatability, a little bit of a thick skin and a decent sense of humor.&#8221;</p>
</blockquote>
<h4>User Interface</h4>
<p>In recent history, the UI group has been separate to core, but there has been discussion about merging it into the core group. UI handles WordPress’ user interface, user experience, and other elements related to quality, accessibility and graphic design.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/ui.jpg"><img class="alignnone size-full wp-image-78211" title="core team" alt="ui group" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/ui.jpg" width="500" /></a><br /><em>The UI group talks UI in Georgia. (Image: <a href="http://www.flickr.com/photos/89591031@N06/8149244022/sizes/m/in/pool-2130142@N23/">konsobe</a>)</em></p>
<p>Helen Hou-Sandi is the lead user interface developer at 10up, and is also involved in WordPress’ core with a focus on UI. She outlined six areas that the UI group currently focuses on:</p>
<ul>
<li><strong>Graphic design</strong><br />
This is only occasional work.</li>
<li><strong>UX design</strong><br />
Including wireframes, storyboards and concepts.</li>
<li><strong>User testing</strong><br />
Dave Martin from Automattic has been running a lot of user tests recently to help identify issues.</li>
<li><strong>Front-end development</strong><br />
The HTML and particularly CSS to create the admin interface.</li>
<li><strong>Quality assurance</strong><br />
While this is within the purview of the UI group, Helen noted that improvements could be made in this area.</li>
<li><strong>Accessibility</strong><br />
This has its own group, but the UI group also tries to ensure that accessibility gets the attention it deserves.</li>
</ul>
<p>The UI group has a number of different challenges. A particular problem for contributors can be that the CSS is huge. Jumping into them can be scary for some people.</p>
<p>I asked Helen what she gets out of contributing to WordPress:</p>
<blockquote>
<p>&#8220;I love the community, and I think that the basic premise that WordPress is built on &mdash; democratizing publishing for everybody &mdash; is a really important one.… The premise that it’s making content management and creation easier and more accessible for more people was something that I loved, and altruism wins out.&#8221;</p>
</blockquote>
<h4>Get Involved</h4>
<p>There are a number of ways to get involved:</p>
<ul>
<li><strong>IRC</strong><br />
Stop by the UI chat (Tuesdays at 19:00 UTC) or the chat room and introduce yourself, although doing it outside of meeting hours is usually best.</li>
<li><strong>Make blog</strong><br />
Stop by the Make blog and introduce yourself. Offer to get involved with projects that are starting up.</li>
</ul>
<p>Those are the two official places to get involved, but Helen said that she doesn’t mind someone reaching out on Twitter or even chatting about getting involved at WordCamps.</p>
<p>The UI group needs people with a lot of different skills, including CSS and PHP development. What the group really needs right now are JavaScript developers. Anyone who’s comfortable with things like Backbone.js or TinyMCE would be a huge asset.</p>
<p>UX designers are extremely valuable to the team because they are focused on the user’s perspective, rather than the designer’s perspective. Of particular value are people with a good sense of how an interface and workflow should work. As with all of the groups, being able to function as part of a team is important:</p>
<blockquote>
<p>&#8220;Good communication skills are pretty important. They should be willing to chase something for a while, because things get lost all the time. We forget or we drop the ball, so somebody who’s willing to almost nag in a way and is confident enough to ask, “Hey, what’s going on with this?” is really good to have on board. To watch someone develop that kind of confidence is a really good thing to see.&#8221;</p>
</blockquote>
<h3>Mobile</h3>
<p>The mobile group builds <a href="http://wordpress.org/extend/mobile/">apps for six different platforms</a>: iOS, Android, BlackBerry, Nokia, Windows, WebOS. It also helps to expand the API and XML-RPC layer, and it investigates new APIs and ways of tackling mobile. Its rep is Isaac Keyet, a mobile designer at Automattic. The mobile group isn’t currently involved in the move towards responsiveness in WordPress core, but Isaac would like to see the team becoming more involved in it in the future.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/isaac.jpg"><img class="alignnone size-full wp-image-78211" title="isaac" alt="isaac" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/isaac.jpg" width="500" /></a><br /><em>Isaac Keyet leads the WordPress mobile group. (Image <a href="http://www.flickr.com/photos/themitcho/8133912055/in/pool-wpcs2012/">Michael Yoshitaka Erlewine</a>)</em></p>
<p>Given that mobile is growing exponentially, it’s crucial that more people volunteer for the WordPress mobile group. In addition to Isaac, only six developers are in the group. If you’re a mobile developer and you’d like to be involved in an open-source project, then WordPress is a great place to start.</p>
<h4>Challenges</h4>
<p>A number of technical issues affect development of the native apps. This is particularly true when dealing with XML-RPC or the API. Any plugin or theme can add to or modify the XML-RPC layer. This means that the app has to deal with malfunctions and improper responses in the XML-RPC layer and in the responses that are returned from the blog.</p>
<p>To deal with this, the team is using client-side clean-up libraries, which take the responses and clean them up. But the XML-RPC layer can fail in so many different ways that the libraries are not complete. This makes it a constant struggle to ensure that everything works in all possible instances.</p>
<h4>Get Involved</h4>
<p>As with the other groups, there are two ports of call for getting involved:</p>
<ul>
<li><a href="http://make.wordpress.org/mobile/">Make WordPress Mobile</a></li>
<li>The WordPress Mobile IRC Chat: 16:00 UTC on freenode, #wordpress-mobile</li>
</ul>
<p>It’s no surprise that WordPress attracts PHP developers, and it’s not a place that mobile developers would instinctively think to look. The mobile apps are written in:</p>
<ul>
<li><strong>Java</strong>: BlackBerry and Android</li>
<li><strong>Objective-C</strong>: iOS</li>
<li><strong>C#</strong>: Windows</li>
</ul>
<p>Contributors with coding skills in any of these languages are extremely welcome. And there is a particular need for Windows Phone developers right now. This is the fastest-growing app at the moment; so, if you’re a C# developer, visit the weekly chat and see how you can help out.</p>
<p>Another skill that the group currently needs is graphic design. Isaac is the only person currently working on graphic design for the group. As he is overloaded with work, which means that designs can’t be escalated as quickly as the group would like.</p>
<p>If you really want to make a difference to the future of WordPress, the mobile group is a great place to start.</p>
<h3>Polyglots</h3>
<p>The <a href="http://make.wordpress.org/polyglots/">polyglots team</a> is responsible for translating WordPress and for wider global outreach. It is led by Zé Fontainhas, a Portuguese WordPress consultant who speaks countless languages and is very active in the global community.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/ze.jpg"><img class="alignnone size-full wp-image-78211" title="ze" alt="ze fontainhas" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/ze.jpg" width="500" /></a><br /><em>Zé Fontainhas speaks all of the languages. (Image: <a href="http://www.flickr.com/photos/themitcho/8177731200/in/pool-wpcs2012/">Michael Yoshitaka Erlewine</a>)</em></p>
<p>Zé identifies three major areas that the Polyglots team is responsible for:</p>
<ul>
<li><strong>Translations</strong><br />
The team translates WordPress core, as well as a number of plugins, such as BuddyPress and the import/export plugins.</li>
<li><strong>GlotPress</strong><br />
GlotPress is the translation tool that makes collaborating on a translation of WordPress possible. It is open source, just like WordPress. Developers and designers are needed to test patches, suggest features and fix bugs.</li>
<li><strong>Community</strong><br />
The global team will be a new branch of the polyglots team, focusing on increasing WordPress’ visibility worldwide and on connecting people from worldwide communities.</li>
</ul>
<h4>Challenges</h4>
<p>Many of the challenges facing the polyglots team have to do with raising awareness and managing perceptions. Around 40% of all downloads of WordPress are not for the English language version, yet WordPress continues to be very US-centric.</p>
<blockquote>
<p>&#8220;The proof of that is that we are talking about “international” as if it were an objective concept. It isn’t; it’s meaning really depends on where you’re looking from. So, when someone in the US says “international,” it means the world outside of the States, but when I say it, “rest of the world” includes the US. We need to first stop using that term. It means different things to different people.&#8221;</p>
</blockquote>
<p>Other challenges include ensuring that developers prepare their code for translation. This means implementing proper practices for plugins, themes and even core code to be ready for translation.</p>
<p>Of course, things will always get lost in translation:</p>
<blockquote>
<p>&#8220;The “Howdy” of the dashboard screen is untranslatable for mostly everybody in another language because the spirit gets lost. There’s no real translation for that.&#8221;</p>
</blockquote>
<h4>Get Involved</h4>
<p>All you need to get involved is a WordPress.org user name. Then think about what you’d like to do:</p>
<ul>
<li><strong>Translation</strong><br />
Check whether a team is translating into your chosen language. Get in touch with them to see how you can help out. [find list of teams/contacts]</li>
<li><strong>GlotPress</strong><br />
Head to <a title="GlotPress" href="http://glotpress.trac.wordpress.org/">GlotPress trac</a> to see what tickets you feel you can help out with.</li>
<li><strong>Community</strong><br />
Keep an eye out for the new global blog, which will be launching soon.</li>
</ul>
<p>Essential skills for translating WordPress are pretty obvious: language skills and knowledge of how to translate. You have to understand context, and you have to understand English. With the community, you need to have an awareness of how communities work and how they can better interact with each other.</p>
<h3>Support</h3>
<p>Support forum volunteers are the backbone of WordPress. They patiently answer questions like “OMG my site is broken! Can you fix it?” in WordPress.org’s support forum. The team is currently led by Mika Epstein, the in-house WordPress expert at Dreamhost. Mika also reviews plugins for the plugin repository &mdash; she’s one busy lady!</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/mika.jpg"><img class="alignnone size-full wp-image-78211" title="mika" alt="Mika Epstein" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/mika.jpg" width="500" /></a><br /><em>For Mika Epstein, support never stops. (Image: <a href="http://www.flickr.com/photos/89591031@N06/8149221441/in/pool-wpcs2012/">konsobe</a>)</em></p>
<p>Around 30 moderators are currently in the <a href="http://wordpress.org/support/">WordPress.org support forums</a>. Only about 12 of the moderators are active, answering queries every day. About 200 people actively answer questions.</p>
<p>WordPress’ support volunteers focus on the following areas:</p>
<ul>
<li><a href="http://wordpress.org/support/">WordPress.org support forums</a><br />
This is often the first port of call for people looking for WordPress support. Volunteers help people with things ranging from forming their request correctly to writing code. There’s room for volunteers at every level of the WordPress experience.</li>
<li>IRC Chatroom<br />
Some people prefer to request support via the chatroom. If you want to instantly give feedback to people, you could start hanging out in the IRC chatroom on freenode at #wordpress.</li>
<li><a href="http://wordpress.stackexchange.com/">WordPress Stack Exchange</a><br />
Questions that used to show up on the wp-hackers mailing list have now found a home on WordPress Stack Exchange. If you’re keen to answer more advanced questions, you could dive in here.</li>
</ul>
<p>Since the Community Summit, there has been discussion on how to create training courses on different aspects of WordPress. This now comes under the purview of the support group. The material will be available to anyone who wants to use it for teaching or training, but also anyone who wants to learn from it. Both online and offline training material will be created. These are intended to help people do more with WordPress and make it easier for them to contribute.</p>
<h4>Challenges</h4>
<p>The biggest challenge facing the support team is the signal-to-noise ratio. Many more people are asking questions than answering them. People get impatient and start bumping their threads or getting snarky. They expect fast responses, or they want a phone number to call. When people get irate, it’s easy for a supporter to get irate, too. After all, the volunteer is spending their own free time helping.</p>
<p>Another issue is that people think they don’t have enough knowledge to sufficiently answer questions. But, as Mika says:</p>
<blockquote>
<p>&#8220;It’s hard to know everything. And that actually scares a lot of people off. They think, “Well, I don’t know everything, so I can’t answer anything.” No, no, no. Just answer the one thing. That would make us really happy.&#8221;</p>
</blockquote>
<h4>Get Involved</h4>
<p>The first step is to create an account and dig around the support forums.</p>
<blockquote>
<p>&#8220;It’s always scary when you’re trying to join a new community. You feel like you’re in high school all over again. You’re this itty bitty freshman, and everybody else is a great huge, hulking senior. They’re adults. They know what they’re doing. And you’re like, “There is no way I can ever be that cool.”&#8221;</p>
<p>If you remember high school, four years go by, and all of a sudden you were the cool guy. You were the great person. Everybody looked up to you. <strong>You have to remember that you don’t start out being an expert. None of us did.</strong></p>
</blockquote>
<p>Just look around and see if there are discussions you could get involved in. If a discussion is more than a couple of months old, just leave it alone because the person who made the request has probably moved on.</p>
<p>If you want to do more than poke around the forums and you want to be really useful, go to the forums and click the “<a href="http://wordpress.org/support/view/no-replies">No Replies</a>” link.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/noreplies.jpg"><img class="alignnone size-full wp-image-78211" title="no replieds" alt="a screenshot of the no replies link at the bottom of the WordPress support forums landing page" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/noreplies.jpg" /></a><br />
<em>Be super-helpful by answering unanswered questions.</em></p>
<p>Some supporters just go to the last page of queries with no replies and work their way up.</p>
<p>Another way to be helpful is to flag posts as spam, or to alert a moderator when someone double-posts a lot. On the right side of the post, you’ll see a section called “Tags.” Just add the tag “ModLook” (all one word), and a moderator will know to look at it.</p>
<p>To get involved in the new training initiative, stop by the post “<a href="http://make.wordpress.org/support/2013/01/training-group-team-reps-and-growing-the-team/">Training Group, Team Reps, and Growing the Team</a>” in the support section.</p>
<h3>Theme Review</h3>
<p>The theme review team sets guidelines for the quality of themes hosted in WordPress’ <a href="http://wordpress.org/extend/themes/">Theme Directory</a>. It reviews every submitted theme against those guidelines and, if it meets the standard, pushes it to the repository.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/themereview.jpg"><img class="alignnone size-full wp-image-78211" title="theme review" alt="theme review" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/themereview.jpg" width="500" /></a><br /><em>Chip Bennett talks about theme review. (Image: <a href="http://www.flickr.com/photos/89591031@N06/8149374784/in/pool-wpcs2012/">konsobe</a>)</em></p>
<p>The representative of the theme review team is Chip Bennett, the developer behind the <a href="http://wordpress.org/extend/themes/oenology">Oenology</a> theme. I chatted with him recently about how the theme review process works:</p>
<ol>
<li>A developer submits a theme on WordPress.org, using the “<a href="http://wordpress.org/extend/themes/upload/">Theme Authors</a>” link. The uploader runs the theme through a script, unpacks it and puts it through a bunch of tests. If it passes the tests, the theme is repacked and stored in a special subversion repository for themes. It then generates a ticket in the <a href="http://themes.trac.wordpress.org/">Theme Trac</a>.</li>
<li>The ticket goes into a queue. The queue is prioritized based on whether the theme is currently approved, whether it has been reviewed before, and how long it has been in the queue.</li>
<li>A reviewer will take on the highest priority theme. They review the ticket, which includes a link to the ZIP file, or a link to a diff file if the theme has been previously submitted.</li>
<li>In reviewing the theme against the guidelines, the reviewer looks for the following things:
<ul>
<li>code quality,</li>
<li>theme files,</li>
<li>front-end tests,</li>
<li>theme unit test data.</li>
</ul>
</li>
<li>If the theme passes the review criteria, then the ticket is closed and resolved as “Approved.”</li>
<li>If the theme doesn’t pass, the reviewer posts comments on the ticket, explaining the issues and what is required and perhaps making some recommendations.</li>
</ol>
<p>The longest theme reviews take around two to three hours, the whole way through. If there are major issues, the review will be stopped early, and the reviewer will note the issues for the developer to address.</p>
<p>Currently, about 70 to 80 people can close tickets. Around 10 people have reviewed more than 50 or 100 tickets. This means that participation is wide but shallow. The goal is to not leave a ticket in the queue for longer than a few days. On average, 10 tickets are submitted per day.</p>
<h4>Challenges</h4>
<p>A major challenge for the theme review team is the sheer volume of submissions, making reviews take longer than they would like. There are also occasional challenges to the review guidelines, although that has lessened in the past two years.</p>
<blockquote>
<p>&#8220;Hopefully people have seen the benefits that the improved theme review guidelines have brought to the directory and overall code themes, so we don’t get a whole lot of challenges on the theme review guidelines themselves.&#8221;</p>
<p>We constantly have to review them as WordPress changes. Each release cycle, we have to look at them, find out what needs to change and understand how the various changes to core will impact themes to make sure we incorporate those.</p>
</blockquote>
<h4>Get Involved</h4>
<p>The first place to start is the <a href="http://make.wordpress.org/themes">Make WordPress Themes</a> blog, which is becoming the hub of activity for the theme review team. You’ll find a link to the <a title="theme-reviewers Info Page" href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers">reviewers mailing list</a>, where a lot of the communication happens.</p>
<p>If you’re just starting out, you won’t have trac privileges to close tickets, so you’ll need to request a ticket to be assigned to you. To do this, post a comment on the “<a title="WordPress › Trac Ticket Request Queue «  Make WordPress Themes" href="http://make.wordpress.org/themes/about/trac-ticket-request-queue/">Trac Ticket Request Queue</a>” page with your trac user name, and then one of the admins will assign the next ticket to you. Once you’ve done a few, you’ll get review privileges and be able to do it on your own.</p>
<p>You may also want to get involved in discussions about guidelines:</p>
<blockquote>
<p>&#8220;We always welcome more people to contribute by reviewing themes, submitting themes and taking part in the discussion. The more developers we have participating in discussion about the guidelines and the process, it can only make it better.&#8221;</p>
</blockquote>
<h3>Plugin Directory</h3>
<p>The plugin directory team is a relatively small group that is responsible for WordPress’ <a title="What You Need To Know About WordPress 3.5" href="http://wordpress.org/extend/plugins/">Plugin Directory</a>. Its current rep is Scott Rielly.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/scott.jpg"><img class="alignnone size-full wp-image-78211" title="scott reilly" alt="scott reilly" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/scott.jpg" width="500" /></a><br /><em>Scott Reilly helps to secure and monitor WordPress’ plugin directory. (Image: <a href="http://www.flickr.com/photos/89591031@N06/8149374784/in/pool-wpcs2012/">konsobe</a>)</em></p>
<p>The team does the following:</p>
<ul>
<li>Processes all incoming plugin submissions. There could be more than 40 submissions in a day. Each plugin is reviewed for guideline violations and coding best practices. If there is a problem with the plugin and it isn’t malicious, the team works with the author to fix the issue.</li>
<li>Deals with support requests sent to <code>plugins@wordpress.org</code>.</li>
<li>Monitors and curates the plugin directory, including looking for guideline violations and security exploits.</li>
<li>Monitors the security-exploit database and announcements for anything relating to plugins.</li>
</ul>
<h4>Challenges</h4>
<p>The biggest challenge facing the team, says Scott, is not having enough time in the day.</p>
<blockquote>
<p>&#8220;Given the volume of newly submitted plugins each day, the constant updates by plugin developers and the support emails, it’s a constant effort to stay on top of everything &mdash; particularly because we’ll all just volunteers to the team. But we’ve been working to remedy this with enhanced admin tools and, eventually, additional team members.&#8221;</p>
</blockquote>
<p>Another challenge is that spammers always try to game the system. The plugin directory is a target for people who want to inject spam into the websites of WordPress users. “In many ways, it’s an arms race,” says Scott. “They keep trying new stuff, and we keep shutting them down once we become aware of it”</p>
<h4>Get Involved</h4>
<p>The first way to help out with the plugin directory is to check out plugins and evaluate code. If you find any guideline violations or malicious code, send an email <a href="mailto:plugins@wordspress.org">plugins@wordpress.org</a>. Include the name of the plugin and a link to its page, as well as a list of the issues. The team will get in touch with the plugin’s author and get the issues fixed.</p>
<p>The team isn’t currently set up to accept many new people in an official capacity, Scott says:</p>
<blockquote>
<p>&#8220;Part of it is getting internal tools and documentation organized in order to facilitate a larger team, and part of it is that we need to be selective of candidates since full membership grants capabilities that require adequate vetting.&#8221;</p>
</blockquote>
<p>But the team is on the lookout for new members. Recently, <a title="Pippins Plugins" href="http://pippinsplugins.com/">Pippin Williamson</a> was brought on board. The team keeps an eye out for potential team members amongst WordPress contributors who have demonstrated their ability through “code, competence and trustworthiness.” If you want to be invited to join the plugin directory team, help out across the community, showing off your technical expertise. Anyone who wants to get involved with reviewing plugins will need a deep knowledge of WordPress, of PHP and its best practices and of the <a title=" WordPress Plugins" href="http://wordpress.org/extend/plugins/about/guidelines/">plugin guidelines</a>. Security expertise and the ability to understand other developers’ code are also desired. “Not just to understand what it does and what it’s supposed to do, but also how it may be wayward or exploitable in its implementation.”</p>
<h3>Documentation</h3>
<p>Often, when people think about WordPress documentation, the first thing they think of is the Codex. While the Codex is the cornerstone of WordPress documentation, it’s one element of a wider drive towards improving documentation. I’m currently the acting rep for documentation, which means that I’m responsible for reporting back to the community on the week’s activities.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/siobhan.jpg"><img class="alignnone size-full wp-image-78211" title="siobhan" alt="siobhan mckeown" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/siobhan.jpg" width="250" /></a><br /><em>Me, telling people they should use fewer words. (Image: <a href="http://www.flickr.com/photos/themitcho/8177693175/in/pool-wpcs2012/">Michael Yoshitaka Erlewine</a>)</em></p>
<p>As with getting involved in any aspect of WordPress, contributing to documentation will improve your WordPress skills, not to mention your technical writing skills. It’s also a great way to give back to the community. Currently, there are a few ways to get involved:</p>
<ul>
<li><strong>Codex</strong><br />
The Codex always needs updating to maintain it as a useful resource for users. There’s always a flurry of activity around a new WordPress release as the Codex is updated to reflect any changes. Anyone can edit the Codex; all you need is a WordPress.org account. Lorelle VanFossen has listed <a href="http://wpdocsteam.wordpress.com/">all of the tasks</a> in the Codex that currently need completing.</li>
<li><strong>Handbooks</strong><br />
The handbooks are a collection of guides that teach people how to contribute to WordPress. There will also be handbooks for theme development and plugin development. This project will be active over the coming year.</li>
</ul>
<p>We are also discussing the possibility of conducting a review of the inline help tabs, and looking at other ways that we can generally be helpful with documentation.</p>
<h4>Challenges</h4>
<p>A major challenge for the documentation team is to keep everything updated. WordPress has a fast release cycle, so the docs team has to be quick to stay on top of updating the Codex. Another challenge is that the Codex itself is such a huge resource. Keeping abreast of what needs to be done can be hard. A lot of functions lack practical examples, which people would find very useful for learning.</p>
<p>Also, sometimes the problem is that people don’t realize they can edit the Codex &mdash; you can, and you definitely should!</p>
<h4>Get Involved</h4>
<p>The easiest way to help out with documentation is to go to the Codex and log in with your WordPress.org user name. Once you’re logged in, you’ll see an “Edit” link at the top of the right sidebar. Click that button and you’re editing the Codex!</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/codex.jpg"><img class="alignnone size-full wp-image-78211" title="no replieds" alt="a screenshot of the Views menu on the codex sidebar. The edit button has a red arrow pointing to it" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/codex.jpg" /></a><br />
<em>Editing the Codex is easy &mdash; go try it!</em></p>
<p>Even fixing a typo improves the documentation. If you’re using the Codex and you see an issue, fix it. If you have had to go elsewhere to find a solution, add that solution to the Codex so that others will benefit from it.</p>
<p>You could also stop by the <a href="http://make.wordpress.org/docs">Make WordPress Documentation</a> blog, where you can say hello and get involved with the docs team. There is currently a major push to get the handbooks together, but you’ll find other projects that you can get involved with on the blog. We also have a weekly chat with the support team. This takes place on Thursdays at 9:00 pm UTC in the freenode IRC channel #wordpress-sfd.</p>
<h3>Events</h3>
<p>WordCamps and meetups are events at which WordPress users can get together to share knowledge, learn and socialize. One of the current reps for the Events blog is Andrea Middleton. She works on the WordCamp program, reviewing applications and providing a point of contact for organizing teams. The events contributor group consists of people who have organized WordCamps and meetups.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/events.jpg"><img class="alignnone size-full wp-image-78211" title="events" alt="WordPress people" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/events.jpg" width="500" /></a><br /><em>Events organizers have to deal with a lot of people standing around, staring at stuff. (Image: <a href="http://www.flickr.com/photos/89591031@N06/8149193905/in/pool-wpcs2012/">konsobe</a>)</em></p>
<h4>Challenges</h4>
<p>Organizing an event has many challenges &mdash; you’ve got to get good speakers who will engage the audience, find sponsors and a venue, sort out catering, arrange AV, manage a budget, organize a team of volunteers. You’ve got to get a lot of details right in order to organize a successful event. Once you’ve been through the baptism of fire, you’ll be an experienced event organizer, which is a great time to get involved with the events contributor group.</p>
<h4>Get Involved</h4>
<p>Having experience as an organizer of meetups or any volunteer-run event is a great asset if you want to get involved with the events group. Having good accounting and communication skills also helps. As Andrea says:</p>
<blockquote>
<p>&#8220;I think anyone looking to get involved with an ongoing open-source project, from whatever area of contribution, should come bearing humility, tolerance, patience, respect and a healthy sense of humor. We’re a meritocracy, and we value civil discourse.&#8221;</p>
</blockquote>
<p>If you want to organize a WordCamp but don’t have a local community, start with a meetup. These will get people out of their house and talking about WordPress. WordCamps are most successful in regions that have vibrant WordPress communities. WordCamps are great, but they are just once a year &mdash; meetups happen every month and, as Andrea points out, they “sometimes have a more persistent effect on people’s lives and how they interact with WordPress.”</p>
<p>To get involved with the events group, <a href="http://make.wordpress.org/events/">stop by the blog and say hi</a>.</p>
<h3>Accessibility</h3>
<p>The accessibility group was created to support core developers with issues regarding accessibility. Its rep is currently Mel Pedley. I asked Mel about the motivation for creating the group:</p>
<blockquote>
<p>&#8220;Because a11y [accessibility] isn’t a binary subject but one based on experience, best practice, judgement and balance, the core devs were being hit with conflicting opinions that just caused even more confusion. They needed one point of contact with regard to tackling a11y problems &mdash; hence, the group.&#8221;</p>
</blockquote>
<p>The group comprises technical developers and assistive-technology users. The group looks at issues and figure out solutions, passing answers back to the core developers.</p>
<p>The team is in the process of expanding to cover themes and plugins, and one day it would like to cover everything that falls under WordPress.org.</p>
<h4>Challenges</h4>
<p>Mel identified three major challenges facing the accessibility group. First:</p>
<blockquote>
<p>&#8220;Wrangling any group of a11y experts is always a challenge. Put four of them in a room and you’ll get five opinions. <img src='http://drewmturner.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  It’s also quite slow, in my experience, to create real change. Things tend to change <em>very</em> slowly. So, keeping momentum is a major issue. I hope that we can address this by throwing a wider net &mdash; publishing best practice support documents and getting involved in outlying a11y projects &mdash; like Joseph O’Connor’s “Cites” project, which involves teams in cities across the world each developing an accessible theme.&#8221;</p>
</blockquote>
<p>Secondly, the teams needs to get users with a greater range of assistive technology involved. There are screen reader users, but Mel is keen to get VR, braille and switch users involved, as well as dyslexics, so that there is a pan-disability user group. Successful accessibility is all about getting the right mix of people.</p>
<p>The third challenge is to convince the large community that accessibility doesn’t mean boring design or ugly UIs. You can have beautiful, graphically rich and accessible designs. Mel has been involved in <a href="http://accessites.org/">Accessites.org</a> to prove this point, and she wants to showcase what was learned there on WordPress.</p>
<h4>Get Involved</h4>
<p>To get involved, start following the <a href="http://make.wordpress.org/accessibility/">Make WordPress Accessibility/</a> blog. You can also get in touch with Mel. The group is happy to hear from anyone interested in promoting accessibility and making WordPress more accessible.</p>
<p>There are two distinct streams for getting involved:</p>
<ul>
<li><strong>Users</strong><br />
This includes anyone who uses assistive technologies to access the Web. The group would value your feedback on existing issues and solutions.</li>
<li><strong>Technical</strong><br />
This is any WordPress developer. You can translate users’ needs into practical solutions.</li>
</ul>
<p>And a note to any WordPress developers:</p>
<blockquote>
<p>&#8220;If you want to develop more accessible themes or plugins but aren’t sure where to start or how to tackle a particular problem, we’re here to help.&#8221;</p>
</blockquote>
<h3>Community</h3>
<p>The community builders group was set up after the WordPress Community Summit to focus on outreach, mentorship programs and contributor engagement. The group’s current reps are Jane Wells and Andrea Rennick. Some of the things that the community group will be tackling are mentorship programs, college outreach, diversity, school programs, WordPress.org improvements, and finding new contributors at events.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/andrea.jpg"><img class="alignnone size-full wp-image-78211" title="andrea rondeau" alt="Andrea Rennick" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/andrea.jpg" width="500" /></a><br /><em>Andrea likes hugging people. (Image: <a href="http://www.flickr.com/photos/andrea_r/8144790885/in/pool-wpcs2012">Andrea Rennick</a>)</em></p>
<p>I asked Andrea what the group will be doing:</p>
<blockquote>
<p>&#8220;Mostly it involves finding new members in the community who want to contribute and directing them to where they need to go. It also means answering a lot of questions. This requires a broad understanding of how each of the current groups works and what each group entails.&#8221;</p>
</blockquote>
<h4>Challenges</h4>
<p>I asked Andrea about what challenges she thinks the group will face:</p>
<blockquote>
<p>&#8220;At the minute, there’s no one spot where people can go to with their questions about getting involved with WordPress. Also, there are issues around dissemination, which really needs to be improved. The new <a href="http://make.wordpress.org/updates/">Make WordPress.org Updates</a> blog is an example of attempts to improve communication. Reps will post weekly updates so that everyone stays informed of what’s going on across the groups.&#8221;</p>
</blockquote>
<p>But those aren’t the only challenges:</p>
<blockquote>
<p>&#8220;Other sticky spots I can see being a challenge are things that are present in any large group of passionate people; things can be misinterpreted, feelings are hurt, tempers flare, and sometimes someone is needed to help smooth things over.&#8221;</p>
</blockquote>
<h4>Get Involved</h4>
<p>Because the group is currently being formed, there are plenty of opportunities to get involved. People of any skill level are needed &mdash; even if your limit is installing WordPress and navigating the admin area, you still have enough skill to help others. Stop by the <a title="Hello World! «  Make.WordPress.Org Community" href="http://make.wordpress.org/community/2012/11/16/hello-world/">Make WordPress Community</a> blog, leave your name in the comments, and say how you would like to help out.</p>
<h3>BuddyPress and bbPress</h3>
<p><a href="http://buddypress.org">BuddyPress</a> and <a href="http://bbpress.org">bbPress</a> are the younger siblings of WordPress. If you get excited about social networking, communities and forums, they could be the places to get your feet wet. BuddyPress is “social networking in a box.” You can use it to build a <a title="BuddyPress: One Plugin, Five Communities" href="http://wp.smashingmagazine.com/2012/09/26/buddypress-one-plugin-five-communities/">community around WordPress</a>. bbPress is a forum plugin for WordPress.</p>
<p>The lead developer of BuddyPress and bbPress is John James Jacoby (aka JJJ or J-Trip). JJJ manages the overall direction of the project, gets more contributors involved and helps out with development. The role he focuses on the most is building an active contributor community so that everyone can make the most of their unique skills and abilities.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/jjj.jpg"><img class="alignnone size-full wp-image-78211" title="jjj" alt="John James Jacoby" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/jjj.jpg" width="500" /></a><br /><em>JJJ leads the BuddyPress and bbPress projects. (Image: <a href="http://www.flickr.com/photos/andrea_r/8144790885/in/pool-wpcs2012">Andrea Rennick</a>)</em></p>
<p>BuddyPress and bbPress are like microcosms of WordPress itself, with contributors needed in many of the same areas, just on a smaller scale. There are a lot of ways to get involved with the plugins: refactoring code, helping in the support forums, developing new features and functionality, working on user experience and design, helping with the codices, and writing plugins.</p>
<h4>Challenges</h4>
<p>The biggest challenge facing bbPress has been maintaining momentum. There isn’t always a lot of focus on it, and other distractions come up for developers. This is frustrating for JJJ because people assume that the project is dead when it is still active.</p>
<p>The biggest challenge with BuddyPress is that the code has changed so much since it was launched. Its direction has changed, and the code has been adapted. This means that a bunch of code is hanging around that they want to get rid of but can’t because doing so would break everyone’s installation.</p>
<blockquote>
<p>&#8220;I like the house to be presentable when I have visitors come over. And when I know the house is not very clean, even though people might not really see it, we feel like we can do a better job with it. That might just be me. But for the project as a whole, because we have so much code, our release cycles are not as quick as we’d like them to be. We always have to fix a bunch of things, or we linger in beta for too long, or we don’t get to beta fast enough.&#8221;</p>
</blockquote>
<h4>Get Involved</h4>
<p>The easiest way to get involved is to help out in the BuddyPress and bbPress support forums.</p>
<blockquote>
<p>&#8220;Having someone’s experience of the forums be a rewarding, fun thing is the easiest way to be helpful. If you think you know anything, you probably know more than somebody else, and sharing that knowledge goes a long way for someone who’s looking for help.&#8221;</p>
</blockquote>
<p>Help is also needed on both of the codices. As JJJ points out, this often feels like a thankless job because writing and formatting take so much time. But it’s a really useful place to get involved, especially because so few people are doing it.</p>
<p>If you’re interested in getting involved with development, join #buddypress-dev on Wednesdays at 19:00 UTC, or #bbpress on Wednesdays at 21:00 UTC. Contributors are always hanging around outside those hours.</p>
<h3>What’s In It For You?</h3>
<p>I asked all of my interviewees about what contributors get out of being involved in WordPress. There were commonalities across all of their responses: the joy of being part of a community, the thrill of creating something used by millions of people across the world, the rate at which you learn, and the pleasure of being involved in democratizing publishing. While the responses were varied, Mark Jaquith’s response sums them all up:</p>
<blockquote>
<p>&#8220;I consider it part of my continuing education. I mean, tech is such a fast-moving industry that if you stand back and, say, just focus on the planning board and aren’t involved in the process and the technologies and the new skills, you’ll be left behind in a few months. It’s just part of the upkeep for me &mdash; that’s number one.&#8221;</p>
<p>Number two is because I enjoy it. I enjoy making things. I enjoy working on software that’s used by tens of millions of people. It’s a fairly powerful and rewarding feeling. And the other thing is that it raises your status inside the community, which is helpful, because it’s a very tight-knit community, and a lot of your business links are going to come from the community. A lot of your potential partners on ventures and projects are going to come from within the community. And by contributing and staying close to that tight knit group, you keep those connections alive.</p>
</blockquote>
<h3>Tips For Getting Involved</h3>
<p>Now that you’re excited about contributing to WordPress, and you’ve found a contributor group that fits, here are some tips:</p>
<ul>
<li>Before diving in, do a bit or research and see how the group operates and what’s currently on the agenda. This will help you figure out where you fit in and whether your ideas have been discussed before. Reading though the P2s will usually suffice.</li>
<li>Stop by the P2 for the group you’re interested in and say “Hi.”</li>
<li>If you’re not sure what to get involved with, stop by the #wordpress-contribute IRC chatroom on freenode. Some people should be around to help you get started.</li>
<li>Read through the P2, mailing lists or trac. Check that your ideas haven’t been proposed before, and if they have, see what the reasons were for refusing them.</li>
<li>Go to WordCamps and Meetups! My involvement in WordPress has increased massively since I started meeting people in person.</li>
<li>Reach out to people on Twitter or, if they publicize their address, via email.</li>
</ul>
<h3>Some Final Advice</h3>
<p>A few pieces of advice didn’t fit neatly anywhere else in this article but are too valuable to be discarded. First of all, Matt has some words on starting out with contributing to WordPress:</p>
<blockquote>
<p>&#8220;Remember that everyone who’s involved at WordPress started where the people who are reading this article are today, including myself. It looks big and scary. The first time someone said to me “You should patch that and put a diff on SourceForge,” I was like, “I don’t know what half the words in that sentence mean.” I had to figure out patches, I had to figure out what a diff is, I has to figure out what SourceForge is. We all started there. You’ve just got to dive in.&#8221;</p>
</blockquote>
<p>And Mika has some words on the value of every WordPress contributor.</p>
<blockquote>
<p>&#8220;Don’t ever feel that just because you don’t know how to code like Nacin and Otto that you’re not just as valuable as they are. Because without us, too, WordPress would fall apart. A healthy community is healthy on all levels, and everybody does know that.&#8221;</p>
</blockquote>
<h3>Contributor Information</h3>
<h4>Make WordPress Blogs</h4>
<p>Here are the discussion blogs where the different groups carry on discussion and post updates:</p>
<ul>
<li><a title="Make WordPress.org" href="http://make.wordpress.org/">Master List</a></li>
<li><a href="http://make.wordpress.org/updates/">Updates</a><br />
regular updates from the reps of every team</li>
<li><a href="http://make.wordpress.org/core">Core</a></li>
<li><a href="http://make.wordpress.org/support">Support</a></li>
<li><a href="http://make.wordpress.org/plugins">Plugins</a></li>
<li><a href="http://make.wordpress.org/themes">Themes</a><br />
including Theme Review</li>
<li><a href="http://make.wordpress.org/ui">UI</a></li>
<li><a href="http://make.wordpress.org/mobile">Mobile</a></li>
<li><a href="http://make.wordpress.org/polyglots">Polyglots</a></li>
<li><a href="http://make.wordpress.org/docs">Documentation</a></li>
<li><a href="http://make.wordpress.org/community">Community</a></li>
<li><a href="http://make.wordpress.org/meta">Changes to WordPress.org</a></li>
</ul>
<h4>Chat Schedule</h4>
<p>WordPress has a number of rooms on the freenode IRC channel. This is where the weekly chats take place. Remember that the chats are for getting things done, not just for saying hi, but they are a great time to find out how things work. People also usually hang out in the chat rooms throughout the day, which tends to be a better time to introduce yourself. Don’t be upset if people don’t respond &mdash; there are time-zone differences to take into account, and many WordPress people leave IRC on throughout the day, even if they’re not at their computer.</p>
<p>If you’re confused, the <a title="IRC « WordPress Codex" href="http://codex.wordpress.org/IRC">Codex has some information on IRC</a></p>
<ul>
<li><strong>Tuesday</strong>: UI<br />
19:00 UTC in #wordpress-ui</li>
<li><strong>Wednesday</strong>: Mobile<br />
16:00 UTC in #wordpress-mobile</li>
<li><strong>Wednesday</strong>: BuddyPress<br />
19:00 UTC in #buddypress-dev</li>
<li><strong>Wednesday</strong>: bbPress<br />
20:00 UTC in #bbpress</li>
<li><strong>Wednesday</strong>: Core<br />
21:00 UTC in #wordpress-dev</li>
<li><strong>Thursday</strong>: Support and docs<br />
21:00 UTC in #wordpress-sfd</li>
</ul>
<p>If you want help getting started, don’t forget that you can stop by #wordpress-contribute, where people are on hand to help.</p>
<p><em>(al) (il)</em></p>
<hr />
<p><small>© Siobhan McKeown for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/05/10/how-to-contribute-to-wordpress/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/sharing-your-experiences-how-to-contribute-to-wordpress/" data-text="Sharing Your Experiences: How To Contribute To WordPress"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/sharing-your-experiences-how-to-contribute-to-wordpress/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fsharing-your-experiences-how-to-contribute-to-wordpress%2F&amp;title=Sharing%20Your%20Experiences%3A%20How%20To%20Contribute%20To%20WordPress" id="wpa2a_8"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/sharing-your-experiences-how-to-contribute-to-wordpress/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Inspirational Podcasts: Listen, Watch And Share!</title>
		<link>http://drewmturner.com/inspirational-podcasts-listen-watch-and-share/</link>
		<comments>http://drewmturner.com/inspirational-podcasts-listen-watch-and-share/#comments</comments>
		<pubDate>Fri, 19 Apr 2013 16:45:34 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=714</guid>
		<description><![CDATA[&#160;&#160; With a phone or tablet in your pocket, you get instant access to a huge variety of podcasts &#8212; both audio and video. They keep you entertained while you’re commuting or on a long plane ride, and they provide useful information that you can integrate into your daily routine as a Web professional. Keeping [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>With a phone or tablet in your pocket, you get instant access to a huge variety of podcasts &mdash; both audio and video. They keep you entertained while you’re commuting or on a long plane ride, and they provide <strong>useful information</strong> that you can integrate into your daily routine as a Web professional.</p>
<p>Keeping track of the ever-changing selection and finding quality podcasts that feature exactly the topics you are interested in can be painful. That’s where we come in. We have put together an extensive list that includes your soon-to-be favorite podcast &mdash; whether you are a developer looking for coding advice, a designer seeking inspiration or a startup businessperson. So, tune in, stay informed and learn new skills!</p>
<h3>Design</h3>
<p><a href="http://onthegrid.co">On The Grid</a><br />
On the Grid is a design podcast featuring Matt McInerney, Andy Mangold and Dan Auer. Every week, the three call in for a conversation about design&#8217;s effect on the world and the world&#8217;s effect on design.</p>
<p><a href="http://onthegrid.co"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/onthegrid.png" alt="onthegrid" title="On The Grid" width="500" height="300" class="alignnone size-full wp-image-158766" /></a></p>
<p><a href="http://unmatchedstyle.com/category/draft">Draft</a><br />
A show about the craft of designing for the Web. Your hosts are Giovanni DiFeterici and Gene Crawford from Unmatched Style.</p>
<p><a href="http://unmatchedstyle.com/category/draft"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/draft.png" alt="draft" title="Draft" width="500" height="300" class="alignnone size-full wp-image-158799" /></a></p>
<p><a href="http://www.thefoxisblack.com/">The Fox Is Black</a><br />
The Fox Is Black is an art and design blog that seeks to discover and share the most interesting and inspiring parts of contemporary life and culture.</p>
<p><a href="http://www.thefoxisblack.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/foxisblack1.png" alt="The Fox Is Black" title="The Fox Is Black" width="500" height="300" class="alignnone size-full wp-image-159948" /></a></p>
<p><a href="http://designchat.info/">Design Chat</a><br />
DesignChat claims to present the best live discussion about design on the Internet. They go live on Wednesdays at 8:00 pm CT.</p>
<p><a href="http://designchat.info/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/designchat.png" alt="Design Chat" title="Design Chat" width="500" height="300" class="alignnone size-full wp-image-158758" /></a></p>
<p><a href="http://www.muleradio.net/mistakes/">Let’s Make Mistakes</a><br />
Mike and Leah talk about design, with a lot of tangents along the way. They are dedicated to bringing you the best podcasts about design and culture from an alternative point of view. They are committed to excellence through argument.</p>
<p><a href="http://www.muleradio.net/mistakes/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/letsmakemistakes.png" alt="letsmakemistakes" title="Let’s Make Mistakes" width="500" height="300" class="alignnone size-full wp-image-158765" /></a></p>
<p><a href="http://theeastwing.net/">The East Wing</a><br />
The East Wing’s host, Tim Smith, and his expert guests talk about design, user experience, problem-solving and the keys to creating products with value. A new episode is published every Wednesday.</p>
<p><a href="http://theeastwing.net/"><img title="The East Wing" alt="The East Wing" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/eastwing1.png" width="500" height="300" /></a></p>
<p><a href="http://designpro.co/">Design Pro</a><br />
The Design Pro Show is a weekly webcast with Andy Rutledge. Each interactive live episode is free to watch and full of advice on how to succeed in a professional practice.</p>
<p><a href="http://designpro.co/"><img title="Design Pro" alt="Design Pro" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/designpro.png" width="500" height="300" /></a></p>
<p><a href="http://designfestival.com/category/podcast/">Design Festival</a><br />
The Design Festival podcast provides designers with fresh inspiration. It features expert talks ranging from UX design to typography to coding advice.</p>
<p><a href="http://designfestival.com/category/podcast/"><img title="Design Festival" alt="Design Festival" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/designfestival.png" width="500" height="300" /></a></p>
<h4>UX</h4>
<p><a href="http://www.uie.com/brainsparks/topics/podcasts/">User Interface Engineering</a><br />
User Interface Engineering specializes in website usabilty and user experience. On its podcast, called SpoolCast, experts share their thoughts on designing with the user in mind.</p>
<p><a href="http://www.uie.com/brainsparks/topics/podcasts/"><img title="User Interface Engineering" alt="User Interface Engineering" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/uiengineering.png" width="500" height="300" /></a></p>
<p><a href="http://infodesign.com.au/uxpod/">User Experience Podcast</a><br />
Sharing its voice since 2006, the User Experience Podcast features a wide range of interviewees and commentary on everything UX. Features include developers talking about their development process and information on how to conduct interviews for user research.</p>
<p><a href="http://infodesign.com.au/uxpod/"><img title="User Experience Podcast" alt="User Experience Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/uxpodcast.png" width="500" height="300" /></a></p>
<h3>Coding</h3>
<p><a href="http://thewebglpodcast.com/">The WebGL Podcast</a><br />
This one is a podcast about WebGL. It covers the latest news and libraries, as well as tips and tricks to help you get the most out of your WebGL project. It is hosted by Paul Lewis who currently works on Google Chrome’s Developer Relations team.</p>
<p><a href="http://thewebglpodcast.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/webgl.png" alt="The WebGL Podcast" title="The WebGL Podcast" width="500" height="300" class="alignnone size-full wp-image-158776" /></a></p>
<p><a href="http://creativecodingpodcast.com/">The Creative Coding Podcast</a><br />
Digital media consultant Seb Lee-Delisle and designer and developer Iain Lobb discuss the ins and outs of programming for visual and creative applications.</p>
<p><a href="http://creativecodingpodcast.com/"><img title="The Creative Coding Podcast" alt="The Creative Coding Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/creativecoding1.png" width="500" height="300" /></a></p>
<p><a href="http://basementcoders.com/category/podcast">The Basement Coders Developer Podcast</a><br />
The Basement Coders Developer Podcast features discussion on development topics and interviews with passionate developers.</p>
<p><a href="http://basementcoders.com/category/podcast"><img title="The Basement Coders Developer Podcast" alt="The Basement Coders Developer Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/basementcoders.png" width="500" height="300" /></a></p>
<p><a href="http://hnpod.com/">HNpod</a><br />
HNpod is currently hosted by Michael Mahemoff, having been started by Alex Muir. In half an hour, it discusses the week&#8217;s top stories on Hacker News.</p>
<p><a href="http://hnpod.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/hnpod.png" alt="HNpod" title="HNpod" width="500" height="300" class="alignnone size-full wp-image-158763" /></a></p>
<h4>Ruby on Rails</h4>
<p><a href="http://ruby5.envylabs.com/">Ruby5</a><br />
Released Tuesday and Friday mornings, this podcast presents the latest news in the Ruby and Rails community.</p>
<p><a href="http://ruby5.envylabs.com/"><img title="Ruby5" alt="Ruby5" src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/ruby5.png" width="500" height="300" /></a></p>
<p><a href="http://railscasts.com/">RailsCasts</a><br />
Produced by Ryan Bates, RailsCasts targets the intermediate Rails developer, but beginners and experts will get something out of the tips and tricks as well. A free episode is released every other week.</p>
<p><a href="http://railscasts.com/"><img title="RailsCasts" alt="RailsCasts" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/railscast.png" width="500" height="300" /></a></p>
<p><a href="http://rubyrogues.com/">Ruby Rogues</a><br />
Ruby Rogues is a podcast about Ruby and related technologies. A lot of practical tips, such as what the ideal development environment looks like, will facilitate your working process.</p>
<p><a href="http://rubyrogues.com/"><img title="Ruby Rogues" alt="Ruby Rogues" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/rubyrouge.png" width="500" height="300" /></a></p>
<h4>JavaScript</h4>
<p><a href="http://javascriptshow.com/">The Javascript Show</a><br />
This podcast by developers Peter Cooper and Jason Seifer features the latest news and discussion within the JavaScript communities, covering frameworks, development techniques, quick scripts and more.</p>
<p><a href="http://javascriptshow.com/"><img title="The Javascript Show" alt="The Javascript Show" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/jsshow.png" width="500" height="300" /></a></p>
<p><a href="http://javascriptjabber.com/">JavaScript Jabber</a><br />
Claiming to be “your prototype for great code,” the JavaScript Jabber’s experts panel shares its knowledge once a week.</p>
<p><a href="http://javascriptjabber.com/"><img title="JavaScript Jabber" alt="JavaScript Jabber" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/javascribtjabber.png" width="500" height="300" /></a></p>
<p><a href="http://nodeup.com/">NodeUp: A Node.js Podcast</a><br />
NodeUp discusses a wide array of Web development topics. Every Sunday you can join the team live via freenode.</p>
<p><a href="http://nodeup.com/"><img title="NodeUp: A Node.js Podcast" alt="NodeUp: A Node.js Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/nodejs.png" width="500" height="300" /></a></p>
<p><a href="http://yayquery.com/">yayQuery</a><br />
Hosted by developers Paul Irish, Alex Sexton, Rebecca Murphey and Adam J. Sontag, yayQuery is your weekly rainbow ride through all things jQuery.</p>
<p><a href="http://yayquery.com/"><img title="yayQuery Podcast" alt="yayQuery Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/yayquery.png" width="500" height="300" /></a></p>
<h4>PHP</h4>
<p><a href="http://voicesoftheelephpant.com/">Voices of the ElePHPant</a><br />
Voices of the ElePHPant offers interviews with people who are involved in the PHP community.</p>
<p><a href="http://voicesoftheelephpant.com/"><img title="Voices of the ElePHPant" alt="Voices of the ElePHPant" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/phpelephant.png" width="500" height="300" /></a></p>
<h3>Businesses and Startups</h3>
<p><a href="http://theindustry.cc/category/podcast/">The Industry</a><br />
The Industry brings a new perspective to tech media. Highlighting design-focused startups and people, its purpose is to give the design community a voice in the tech industry.</p>
<p><a href="http://theindustry.cc/category/podcast/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/theindustry.png" alt="theindustry" title="The Industry" width="500" height="300" class="alignnone size-full wp-image-144306" /></a></p>
<p><a href="http://www.startupsfortherestofus.com/">Startups for the Rest of Us</a><br />
Hosts Mike Taber and Rob Walling share their own experience as software entrepreneurs with developers and designers who want to launch their own software products.</p>
<p><a href="http://www.startupsfortherestofus.com/"><img title="Startups For the Rets of Us" alt="Startups For the Rest of Us" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/startups.png" width="500" height="300" /></a></p>
<p><a href="http://5by5.tv/founderstalk">5by5 | Founders Talk</a><br />
Hosted by Adam Stacoviak, Founders Talk features interesting interviews with people who had the courage to start a business. A new episode is released each week.</p>
<p><a href="http://5by5.tv/founderstalk"><img title="5by5 | Founders Talk" alt="5by5 | Founders Talk" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/founderstalk.png" width="500" height="300" /></a></p>
<p><a href="http://www.kalzumeus.com/blog/">Kalzumeus</a><br />
Kalzumeus is hosted by Patrick McKenzie. A software businessman himself, he gives advice on business topics.</p>
<p><a href="http://www.kalzumeus.com/blog/"><img title="Kalzumeus" alt="Kalzumeus" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/kalzumeus.png" width="500" height="300" /></a></p>
<p><a href="http://unmatchedstyle.com/category/bizcraft">BizCraft</a><br />
A podcast about the business side of Web design, recorded live almost every two weeks. Hosted by Carl Smith and Gene Crawford from Unmatched Style.</p>
<p><a href="http://unmatchedstyle.com/category/bizcraft"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/bizcraft.png" alt="bizcraft" title="BizCraft" width="500" height="300" class="alignnone size-full wp-image-158797" /></a></p>
<p><a href="http://unfinished.bz/">Unfinished Business</a><br />
Andrew Clarke and Anna Debenham present a weekly discussion show about the business end &mdash; the sharp end &mdash; of the Web, design and creative industries.</p>
<p><a href="http://unfinished.bz/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/unfinishedbusiness.png" alt="unfinishedbusiness" title="Unfinished Business" width="500" height="300" class="alignnone size-full wp-image-158773" /></a></p>
<h3>General</h3>
<p><a href="http://blog.teamtreehouse.com/category/treehouse-show-2">Treehouse Show Archives</a><br />
Teaching technology to the world is the mission of Treehouse, hosted by Nick Pettit and Jason Seifer. The team offers a dose of Web design and development news every Tuesday.</p>
<p><a href="http://blog.teamtreehouse.com/category/treehouse-show-2"><img title="Treehouse Show Archives - Treehouse Blog" alt="Treehouse Show Archives - Treehouse Blog" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/treehouse1.png" width="500" height="300" /></a></p>
<p><a href="http://fsm.bdconf.com/podcast">Fresh Squeezed Mobile</a><br />
An interview podcast exploring Web design and development. Together with experts, the team discusses mobile design, responsive design, content strategy and user experience.</p>
<p><a href="http://fsm.bdconf.com/podcast"><img title="Fresh Squeezed Mobile" alt="Fresh Squeezed Mobile" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/squeezedmobile.png" width="500" height="300" /></a></p>
<p><a href="http://shoptalkshow.com/">ShopTalk</a><br />
ShopTalk is a Web design, development and UX podcast with Chris Coyier and Dave Rupert. Each week, they are joined by a special guest who helps to answer questions submitted by listeners.</p>
<p><a href="http://shoptalkshow.com/"><img title="ShopTalk" alt="ShopTalk" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/shoptalk.png" width="500" height="300" /></a></p>
<p><a href="http://thechangelog.com/">The Changelog</a><br />
What’s going on in open source? The Changelog’s hosts, Wynn Netherland and Adam Stacovlak, cover the new and fresh each week.</p>
<p><a href="http://thechangelog.com/"><img title="The Changelog" alt="The Changelog" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/changelog.png" width="500" height="300" /></a></p>
<p><a href="http://boagworld.com/podcast-archive/">Boagworld</a><br />
Paul Boag, creator of the longest-running podcast about Web design, shares tips and news for designers, developers and website owners. His daily audio tips provide some quick inspiration for people on the go.</p>
<p><a href="http://boagworld.com/podcast-archive/"><img title="Boagworld" alt="Boagworld" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/boagworld.png" width="500" height="300" /></a></p>
<p><a href="http://pleaseadvise.fm/">PleaseAdvise.fm</a><br />
An occasional podcast by Mike McAlister, Jake Caputo and Chris Molitor. The topics range from WordPress to tips for business startups.</p>
<p><a href="http://pleaseadvise.fm/"><img title="PleaseAdvise.fm" alt="PleaseAdvise.fm" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/pleaseadvice.png" width="500" height="300" /></a></p>
<p><a href="http://thisdeveloperslife.com/">This Developer&#8217;s Life</a><br />
An interview series in which developers talk about certain aspects of their life and working process. What drives them, and what hinders them?</p>
<p><a href="http://thisdeveloperslife.com/"><img title="This Developer’s Life" alt="This Developer's Life" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/developerslife.png" width="500" height="300" /></a></p>
<p><a href="http://pishposh.tv/forrst-podcast">Pishposh.tv | Forrst</a><br />
This one is all about the Forrst community and everything else good and interesting in design and development.</p>
<p><a href="http://pishposh.tv/forrst-podcast"><img title="Pishposh.tv - Forrst Podcast" alt="Pishposh.tv - Forrst Podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/pishpost.png" width="500" height="300" /></a></p>
<p><a href="http://creatiplicity.com">Creatiplicity</a><br />
Creatiplicity’s host, Chris Bowler, chats with his guests about their creative process.</p>
<p><a href="http://creatiplicity.com"><img title="Creatiplicity" alt="Creatiplicity" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/Creatiplicity.png" width="500" height="300" /></a></p>
<p><a href="http://designchat.info/">iTunes DesignChat</a><br />
DesignChat is a weekly video- and text-based conversation between and for creatives.</p>
<p><a href="http://designchat.info/"><img title="iTunes DesignChat" alt="iTunes DesignChat" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/designchat.png" width="500" height="300" /></a></p>
<p><a href="http://www.webdevradio.com/">WebDev Radio</a><br />
WebDev Radio’s host, Michael Kimsal, catches up with well-known developers, providing his audience with the latest news and current discussion.</p>
<p><a href="http://www.webdevradio.com/"><img title="webdev Radio" alt="webdev Radio" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/webdevradio.png" width="500" height="300" /></a></p>
<p><a href="http://5by5.tv/webahead">5by5 | The Web Ahead</a><br />
The Web Ahead is a weekly podcast that covers changing technologies and the future of the Web. Topics include HTML5, mobile responsive design, iOS and Android. Hosted by Jen Simmons, the episodes are broadcast live but can be watched later.</p>
<p><a href="http://5by5.tv/webahead"><img title="5by5 | The Web Ahead" alt="5by5 | The Web Ahead" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/thewebahead.png" width="500" height="300" /></a></p>
<p><a href="http://5by5.tv/bigwebshow">5by5 | The Big Web Show</a><br />
The Big Web Show covers an interesting mix of everything Web. Topics include Web publishing, Web technology, art direction, content strategy, typography and more. Each week, host Jeffrey Zeldman welcomes a new guest. The show is broadcast live and can be watched later.</p>
<p><a href="http://basementcoders.com/2012/10/episode-54-interview-with-jeff-atwood/"><img title="5by5 | The Big Web Show" alt="5by5 | The Big Web Show" src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/bigwebshow1.png" width="500" height="300" /></a></p>
<p><a href="http://techzinglive.com/">Techzing</a><br />
Techzing is a chat show hosted by Justin Vincent and Jason Roberts. Two episodes are released each week. The “Midweek Interview Show” features interviews with interesting people. In the “Weekend Discussion Show,” the duo talks about startups, tech in general and other topics.</p>
<p><a href="http://techzinglive.com/"><img title="techzing tech podcast" alt="techzing tech podcast" src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/techzing.png" width="500" height="300" /></a></p>
<p><a href="http://5by5.tv/buildanalyze">5by5 | Build and Analyze</a><br />
Build and Analyze is a podcast hosted by Marco Arment and Dan Benjamin. Every week brings the latest news and discussion on mobile Web development, iPhone, iPad and iOS. You can watch the show either live or recorded.</p>
<p><a href="http://5by5.tv/buildanalyze"><img title="5by5 | Build and Analyze" alt="5by5 | Build and Analyze" src="http://media.smashingmagazine.com/wp-content/uploads/2012/10/buildandanalyze.png" width="500" height="300" /></a></p>
<p><a href="http://younggunsshow.com/">Young Guns Show</a><br />
This podcast features interviews with young people who make the Web.</p>
<p><a href="http://younggunsshow.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/younggunshows.png" alt="younggunshows" title="Young Guns Show" width="500" height="300" class="alignnone size-full wp-image-158779" /></a></p>
<p><a href="http://www.happymondaypodcast.com/">Happy Monday</a><br />
Josh Long and Sarah Parmenter present a short-burst podcast every Monday. So far, it has featured many well-known experts, including Andy Clarke, Trent Walton and Jessica Hirsche.</p>
<p><a href="http://www.happymondaypodcast.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/happymonday.png" alt="happymonday" title="Happy Monday" width="500" height="300" class="alignnone size-full wp-image-158761" /></a></p>
<p><a href="http://thegentlymad.com/">The Gently Mad Podcast</a><br />
The Gently Mad is an interview show about what drives us as creators and what connects us as people. Each week, the hosts explore the stories, experiences and insights of awesome people who make awesome things.</p>
<p><a href="http://thegentlymad.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/tgm.png" alt="tgm" title="The Gently Mad Podcast" width="500" height="300" class="alignnone size-full wp-image-158769" /></a></p>
<p><a href="http://businessologyshow.biz/wordpress/">The Businessology Show</a><br />
This podcast, about the business of design and the design of business, is hosted by Jason Blumer and Dan Mall.</p>
<p><a href="http://businessologyshow.biz/wordpress/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/businessology_show_2.jpg" alt="The Businessology Show" title="The Businessology Show" width="498" height="298" class="alignnone size-full wp-image-159967" /></a></p>
<p><a href="http://upfrontpodcast.com/">Upfront</a><br />
An in-depth discussion on the latest tooling, workflow and best practices for front-end developers, brought to you every week by Jack Franklin and Ben Howdle.</p>
<p><a href="http://upfrontpodcast.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/Upfront_2.jpg" alt="upfront" title="Upfront" width="500" height="300" class="alignnone size-full wp-image-158775" /></a></p>
<p><a href="http://nonbreakingspace.tv/">The Non-Breaking Space Show</a><br />
The Non-Breaking Space Show is a podcast that seeks out the best and brightest on the Web and chats with them about what they do and why they do it.</p>
<p><a href="http://nonbreakingspace.tv/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/non-breaking.png" alt="The Non-Breaking Space Show" title="The Non-Breaking Space Show" width="500" height="300" class="alignnone size-full wp-image-158809" /></a></p>
<p><a href="http://monocle.com/radio/shows/the-stack/">The Stack | Monocle 24</a><br />
Hosted by editor in chief Tyler Brûlé, the program looks at the future of print media, from magazines to newspapers.</p>
<p><a href="http://monocle.com/radio/shows/the-stack/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/The_Stack_2.jpg" alt="The Stack | Monocle 24" title="The Stack | Monocle 24" width="500" height="300" class="alignnone size-full wp-image-158785" /></a></p>
<p><a href="https://itunes.apple.com/au/podcast/design-matters-debbie-millman/id328074695">Design Matters with Debbie Millman</a><br />
This thought-provoking podcast profiles industry-leading graphic designers, change agents, artists, writers and educators.</p>
<p><a href="https://itunes.apple.com/au/podcast/design-matters-debbie-millman/id328074695"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/designmatters.png" alt="designmatters" title="Design Matters with Debbie Millman" width="500" height="300" class="alignnone size-full wp-image-158786" /></a></p>
<p><a href="http://www.youtube.com/user/shanselman/">Scott Hanselman</a><br />
Scott Hanselman speaks, codes, writes, empowers, promotes, learns and listens &mdash; and he shares his insights with you on YouTube.</p>
<p><a href="http://www.youtube.com/user/shanselman/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/Hanselmann_2.jpg" alt="Scott Hanselman" title="Scott Hanselman" width="498" height="298" class="alignnone size-full wp-image-158787" /></a></p>
<p><a href="http://www.abc.net.au/radionational/programs/downloadthisshow/">Download This Show</a><br />
Download This Show is your weekly point of access to the latest developments in social media, consumer electronics, digital politics, hacktivism and more, brought to you by ABC Radio National.</p>
<p><a href="http://www.abc.net.au/radionational/programs/downloadthisshow/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/downloadthisshow.png" alt="Download This Show" title="Download This Show" width="500" height="300" class="alignnone size-full wp-image-158759" /></a></p>
<p><a href="http://5by5.tv/criticalpath">5by5 | The Critical Path</a><br />
Critical Path is a talk show that contemplates the causality of success and failure in mobile computing. Using Apple as a lens to look at both telecom and traditional computing markets, the hosts try to understand what it means to be great.</p>
<p><a href="http://5by5.tv/criticalpath"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/criticalpath.png" alt="5by5 | The Critical Path" title="5by5 | The Critical Path" width="500" height="300" class="alignnone size-full wp-image-158756" /></a></p>
<p><a href="http://5by5.tv/hd">5by5 | High Density</a><br />
High Density is an interview show that brings together the sharpest minds in the world to discuss how markets and business models are in a state of perpetual disruption. All signal, no noise, and the merciless pursuit of the truth.</p>
<p><a href="http://5by5.tv/hd"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/highdensity.png" alt="5by5 | High Density" title="5by5 | High Density" width="500" height="300" class="alignnone size-full wp-image-158762" /></a></p>
<p><a href="http://www.imore.com/category/debug">Debug</a><br />
Debug focuses on development, especially for iPhone, iPad, Mac and games, but it covers other platforms as well. Whereas Iterate (covered below) is all about designers, Debug is for developers.</p>
<p><a href="http://www.imore.com/category/debug"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/debug.png" alt="Debug" title="Debug" width="500" height="300" class="alignnone size-full wp-image-158757" /></a></p>
<p><a href="http://bjango.com/articles/iterate/">Iterate</a><br />
Iterate is a fortnightly podcast focusing on mobile and app design for iOS, Mac, Android and other platforms.</p>
<p><a href="http://bjango.com/articles/iterate/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/iterate.png" alt="Iterate" title="Iterate" width="500" height="300" class="alignnone size-full wp-image-158764" /></a></p>
<p><a href="http://www.typeradio.org/">Typeradio</a><br />
Type is speech on paper. Typeradio is speech on type. It is a micro-FM broadcast, an MP3 Internet radio stream and a podcast station. Typeradio broadcasts questions, answers, performances, events and talks online and on stage.</p>
<p><a href="http://www.typeradio.org/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/typeradio.png" alt="Typeradio" title="Typeradio" width="500" height="300" class="alignnone size-full wp-image-158782" /></a></p>
<p><a href="http://thisweekin.com/thisweekin-web/">This Week in Web Design</a><br />
This Week in Web Design helps you accelerate your Web design career by teaching you the creative, business, technology and marketing secrets of its expert hosts and guests.</p>
<p><a href="http://thisweekin.com/thisweekin-web/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/thisweekin.png" alt="This Week in Web Design" title="This Week in Web Design" width="500" height="300" class="alignnone size-full wp-image-158771" /></a></p>
<p><a href="http://refactor.tv/">Refactor.tv</a><br />
Refactor.tv is a weekly podcast that discusses Web and mobile app development, open-source software and beer. Brought to you from San Francisco by two independent software developers, Sam Soffes and Steve Derico.</p>
<p><a href="http://refactor.tv/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/refactor.png" alt="refactor.tv" title="refactor.tv" width="500" height="300" class="alignnone size-full wp-image-158767" /></a></p>
<p><a href="http://www.youtube.com/watch?v=ktwJ-EDiZoU">The Breakpoint</a><br />
The Breakpoint is a new show focusing on development tools and workflows.</p>
<p><a href="http://www.youtube.com/watch?v=ktwJ-EDiZoU"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/thebreakpoint.png" alt="thebreakpoint" title="The Breakpoint" width="500" height="300" class="alignnone size-full wp-image-158781" /></a></p>
<p><a href="http://unmatchedstyle.com/category/book-club">Book Club</a><br />
Just like a regular book club but for Web design books. Each month, the club selects a book, reads it as a group and meets online at a set time of the day. The author of the book then takes questions, some sent in beforehand and some asked live by listeners.</p>
<p><a href="http://unmatchedstyle.com/category/book-club"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/04/bookclub.png" alt="bookclub" title="Book Club" width="500" height="300" class="alignnone size-full wp-image-158798" /></a></p>
<h3>Until Next Time</h3>
<p>We hope you enjoy these podcasts and that there’s some or many in your field of interest. Spice up your travel time or make the drive to work more productive. Let yourself be entertained by experts in our industry, and gain not only new skills but also insights from their lives.</p>
<p>Tell us which is your favorite and why? Of course, you&#8217;re welcome to share other inspirational podcasts with the community — simply mention them in the comments section below!</p>
<p>By the way, you may also want to check out <a href="http://www.smashingmagazine.com/2008/05/14/useful-podcasts-for-designers-and-developers/">Sean Hodge&#8217;s list</a> &mdash; we highly recommend it!</p>
<p><em>(al) (ea)</em></p>
<hr />
<p><small>© Melanie Lang for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/04/19/podcasts-for-designers-developers/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/inspirational-podcasts-listen-watch-and-share/" data-text="Inspirational Podcasts: Listen, Watch And Share!"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/inspirational-podcasts-listen-watch-and-share/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Finspirational-podcasts-listen-watch-and-share%2F&amp;title=Inspirational%20Podcasts%3A%20Listen%2C%20Watch%20And%20Share%21" id="wpa2a_12"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/inspirational-podcasts-listen-watch-and-share/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Survey Results: How To Improve The Deployment Of WordPress Websites</title>
		<link>http://drewmturner.com/survey-results-how-to-improve-the-deployment-of-wordpress-websites/</link>
		<comments>http://drewmturner.com/survey-results-how-to-improve-the-deployment-of-wordpress-websites/#comments</comments>
		<pubDate>Mon, 15 Apr 2013 11:50:51 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=711</guid>
		<description><![CDATA[&#160;&#160; As WordPress matures into a full-fledged CMS and more and more large online publishers come to rely on the platform, the practice of developing and deploying websites becomes increasingly important. High-profile members of the WordPress community, such as core developer Mark Jaquith and Cristi Burca, have spoken on the topic and built tools such [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>As WordPress matures into a full-fledged CMS and more and more <strong>large online publishers come to rely on the platform</strong>, the practice of developing and deploying websites becomes increasingly important. High-profile members of the WordPress community, such as core developer Mark Jaquith and Cristi Burca, have <a href="http://wordpress.tv/2011/08/20/mark-jaquith-scaling-servers-and-deploys-oh-my/">spoken on the topic</a> and built tools such as <a href="https://github.com/wp-cli/wp-cli">WP-CLI</a> and <a href="https://github.com/markjaquith/WP-Stack">WP Stack</a> to improve the professionalism of our administration and deployment.</p>
<p>But what I’m really interested in is the current state of WordPress deployment: how an average developer manages the deployment of their websites, and how can we improve as a community?</p>
<p>In late July 2012, <strong>I conducted a short survey to help me answer these questions</strong>. The survey was open for three months and drew a modest but not insignificant 327 respondents. This article documents the results of the survey and draws some conclusions about where education is needed and how we can help each other become more professional when deploying our WordPress websites.</p>
<h3>The Demographic</h3>
<p>In my survey, I asked a few questions to establish the demographic that’s working with WordPress; this was obviously already done in far greater detail with the <a href="#">WordPress user and developer survey</a>, but I felt that getting a sense of who was responding to this survey was important. Of the 327 respondents, 43% self-identified as developers, 10% as designers, 40% as both designers and developers and 7% other.</p>
<p>The vast majority were located in the North America (50%) and Europe (38%), with the following continents also registering: Asia (6%), Australia (4%), Africa (3%) and South America (1%). I also asked respondents <strong>how they would categorize the businesses they work for</strong>. Here’s how they responded:</p>
<p><img class="alignnone size-full wp-image-108718" alt="biz-type" src="http://media.smashingmagazine.com/wp-content/uploads/2013/03/biz-type.jpg" width="500" height="330" /></p>
<p>The <strong>results were overwhelmingly in favor of freelancing (46%)</strong>, with small businesses (19%) and small agencies (17%) taking a close second and third place, respectively. These figures back up accepted knowledge that WordPress is largely used by small internal Web teams, regional Web agencies and freelancers. Finally, as with the WordPress user and developer survey, I asked respondents whether they made their living from WordPress. This was relatively evenly split, with a small majority of 59% saying yes.</p>
<p>That said, of those who identified themselves as developers, 67% said they earn their living from WordPress, which suggests that WordPress developers are generally more inclined to stick with one platform than designers, who are perhaps more agonistic.</p>
<h3>Deployment Practices</h3>
<p>Now we get to the meat of the survey, how respondents actually deploy their WordPress websites. Combined, the 327 respondents maintain 6,378.5 WordPress websites &mdash; yes, someone maintains half a WordPress website. The majority of respondents manage a fairly small number of websites, with 46% looking after fewer than 10. That said, an impressive 8% manage between 30 and 40 websites, and, incredibly, one person is responsible for 700. Below is a breakdown of the numbers.</p>
<h4>Websites Maintained by Survey Respondents</h4>
<table class="table-overview">
<tbody>
<tr>
<th><strong>Number of websites</strong></th>
<th><strong>Number of respondents</strong></th>
</tr>
<tr>
<td>Fewer than 10</td>
<td>149</td>
</tr>
<tr>
<td>10 &ndash; 20</td>
<td>109</td>
</tr>
<tr>
<td>20 &ndash; 30</td>
<td>26</td>
</tr>
<tr>
<td>50 &ndash; 100</td>
<td>7</td>
</tr>
<tr>
<td>100 &ndash; 200</td>
<td>4</td>
</tr>
<tr>
<td>200 &ndash; 500</td>
<td>1</td>
</tr>
<tr>
<td>500 &ndash; 1000</td>
<td>1</td>
</tr>
</tbody>
</table>
<h4>Version Control</h4>
<p>I asked all respondents whether they use version control and, if so, which software they favor. Astonishingly (at least to me), 45% of respondents said they do not use version-control software at all as part of their workflow. Of the remaining 55%, <strong>Git was by far the most popular</strong>, taking 41% of the vote, and Subversion surprisingly accounted for only 9%. Drilling down a little deeper, 28% of those who identify themselves as a developer stated that they do not use version control, and 48% of those who are both developers and designers said the same. Here’s a breakdown of overall responses on version-control software:</p>
<p><img class="alignnone size-full wp-image-108719" alt="version-control" src="http://media.smashingmagazine.com/wp-content/uploads/2013/03/version-control.jpg" width="500" height="330" /></p>
<p>Next, I asked respondents what method of deploying websites they favor. These I broke down into FTP, SFTP, SCP, SSH + version control, SSH + version control + Capistrano, and other. Again, <strong>somewhat shocking for me was to find that FTP took 49% of the vote</strong>, followed by SFTP (20%) and SSH + version control (17%). My preferred method, SSH + version control + Capistrano, got only 3% of the vote; but even with so low a number, I was pretty encouraged to hear that people out there take the time to work in this manner.</p>
<h4>Environments</h4>
<p>I asked respondents whether they maintain different environments for their WordPress websites &mdash; that is, whether they set up local, test, staging and live environments. Answering yes didn’t require that they run all of these environments, but simply that they differentiate between the website they develop on, the website on which they show changes to a client and the live website. The vast majority of respondents (75%) indeed do this, which is great news.</p>
<p>An important facet and constant pain point of running multiple environments is the need to alter URLs in the WordPress database when migrating the database from one environment to another. I asked respondents how they typically deal with this problem and gave them an open field to type their answer. Here are some answers that came up repeatedly. These aren’t actual responses, but rather my representation of groups of similar replies.</p>
<blockquote><p>&#8220;I don’t migrate between staging and live databases.&#8221;</p>
</blockquote>
<blockquote><p>&#8220;I don’t touch the database. I just export and import posts out of and into WordPress.&#8221;</p>
</blockquote>
<blockquote><p>&#8220;I use Dave Coveney’s PHP script for finding and replacing URLs in the database, including those in serialized data.&#8221;</p>
</blockquote>
<blockquote><p>&#8220;I do a find-and-replace on the SQL dump and the website’s files.&#8221;</p>
</blockquote>
<blockquote><p>&#8220;It’s a massive pain in the arse, and I steer clear of it.&#8221;</p>
</blockquote>
<blockquote><p>&#8220;I dunno. What is the best practice on this?&#8221;</p>
</blockquote>
<h4>Cowboy Coding</h4>
<p>Finally, to gauge how strictly people adhere to general best practices, I asked respondents whether they ever cheekily edit code on the live server. Let’s be honest: this question is only ever going to yield one outcome. As expected, a whopping 76% owned up to having tweaked some WordPress production code in their time.</p>
<h3>What We’ve Learned</h3>
<p>In reviewing the lessons learned, it’s important to say up front that I am not criticizing the development and deployment practices of the survey’s respondents. The goal was to identify the areas where we, as a community, can become more professional and to draw some conclusions on how we might achieve that. You’ll find no finger-wagging or hyper-critical feedback for developers &mdash; just broad conclusions drawn from the responses.</p>
<h4>Version Control</h4>
<p>First, clearly not enough of us are using version control in our everyday workflow. This is a fundamental tool for any developer, and for 61% of those who self-identify as a developer or as both a designer and developer to say that they don’t use version control indicates that effort is needed in the WordPress community to educate developers on the importance of source-control management.</p>
<p>Still, while not enough WordPress developers use version control, that so many who do use Git is very positive. I prefer the decentralized approach of Git, and while WordPress’ core team still uses (and will likely continue to use) Subversion, <strong>Git brings many benefits</strong>. Suppose a few teams are working on a project. Each team could write to its own repository, and then a senior member of the quality-assurance team or an administrator could merge changes from all of those repositories into a protected repository before deploying the website. This approach makes a lot of sense if the website you’re working on is large and members of your team are dispersed, and it’s why I favor Git.</p>
<h4>Environments</h4>
<p>While a lot has been done to grapple with the issues arising from WordPress storing URLs in the database, the problem goes beyond WordPress’ core and extends to plugins and even to the pesky URLs ending up in serialized data. This is a pain in the arse at best, and a complete time-suck at worst. There are many options for overcoming this, but the most common choice is either not to migrate data from environment to environment at all <strong>or to use Dave Coveney’s PHP script</strong>. Both have their problems. For me, the first just isn’t viable, and the second, while perfectly acceptable, isn’t automated enough and is pretty time-consuming. There has to be a better option.</p>
<p>Free and premium tools and plugins offer solutions to this problem. One that came up a lot in the survey’s results was BackupBuddy and its migration feature. I’ve played around with its functionality, and, while it works perfectly well, it does not (as yet) work with Multisite, and I actually found the process more arduous than using a find-and-replace script. One project of mine that has emerged from this survey is to automate the find-and-replace process with a tool for Capistrano.</p>
<h3>Conclusion</h3>
<p>The survey’s results have shown the need for more education on professional deployment practices. Mark Jaquith’s talk “<a href="http://wordpress.tv/2011/08/20/mark-jaquith-scaling-servers-and-deploys-oh-my/">Scaling, Servers, and Deploys, Oh My!</a>” is a must-watch for anyone deploying WordPress websites. And the <a href="https://github.com/markjaquith/WP-Stack">WP Stack</a> project on Github and <a href="https://github.com/wp-cli/wp-cli">WP-CLI</a> are also worth checking out if you’re interested in breaking free of the browser and speeding up your administration of WordPress websites. For my part, I plan to start blogging more about professional WordPress deployment practices and to release more Capistrano tools on Github. Finally, I would love to hear in the comments section about the kinds of issues that you’d like to see covered in future posts and of any other projects that are moving this issue forward.</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Kieran Masterton for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/04/15/how-to-improve-the-deployment-of-websites/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/survey-results-how-to-improve-the-deployment-of-wordpress-websites/" data-text="Survey Results: How To Improve The Deployment Of WordPress Websites"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/survey-results-how-to-improve-the-deployment-of-wordpress-websites/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fsurvey-results-how-to-improve-the-deployment-of-wordpress-websites%2F&amp;title=Survey%20Results%3A%20How%20To%20Improve%20The%20Deployment%20Of%20WordPress%20Websites" id="wpa2a_16"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/survey-results-how-to-improve-the-deployment-of-wordpress-websites/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Moving A WordPress Website Without Hassle</title>
		<link>http://drewmturner.com/moving-a-wordpress-website-without-hassle/</link>
		<comments>http://drewmturner.com/moving-a-wordpress-website-without-hassle/#comments</comments>
		<pubDate>Mon, 08 Apr 2013 16:20:19 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=709</guid>
		<description><![CDATA[&#160;&#160; Moving WordPress is a task that many people find daunting. The advice on the Codex, while comprehensive, gives you a myriad of options and doesn&#8217;t describe the process simply and in one place. When I had to move a WordPress installation for the first time, I spent hours searching online for information on the [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>Moving WordPress is a task that many people find daunting. The advice on the Codex, while comprehensive, gives you a myriad of options and doesn&#8217;t describe the process simply and in one place.</p>
<p>When I had to move a WordPress installation for the first time, I spent hours searching online for information on the various aspects of the process, and eventually <strong>wrote myself a checklist</strong> &mdash; which I still use.</p>
<p>So to save you the hassle, here&#8217;s a step-by-step guide to moving a WordPress website. I&#8217;ll cover three different scenarios, which in my experience are the most common:</p>
<ul>
<li>Moving a website from a subdirectory of a domain to the root directory (for example, if you&#8217;ve been using a subdirectory for development while not affecting an existing website that&#8217;s in the root);</li>
<li>Moving a website from a local installation to a remote installation; and</li>
<li>Moving a website between domains or hosts.</li>
</ul>
<h3>Before You Start</h3>
<p>Before you start any of these methods, make a backup of your website:</p>
<ul>
<li>Your theme files;</li>
<li>Your uploads;</li>
<li>The plugins you&#8217;ve used, so you won&#8217;t have to spend time downloading them again if things go wrong; and</li>
<li>Your database.</li>
</ul>
<p>You can back up the database using one of a number of tools:</p>
<ul>
<li><a href="http://www.phpmyadmin.net/home_page/index.php">phpMyAdmin</a>;</li>
<li><a href="http://www.sequelpro.com">Sequel Pro</a> for OS X;</li>
<li>Terminal commands;</li>
<li>A MySQL desktop client; or</li>
<li>A backup plugin such as <a href="http://wordpress.org/extend/plugins/wp-db-backup/">WP-DB-Backup</a>, which will provide you a copy of your database by email or download.</li>
</ul>
<p>In this article I&#8217;ll show you <strong>how to back up your database using phpMyAdmin</strong>, as this is provided by most hosting providers and has a relatively easy-to-use interface.</p>
<p>If I&#8217;m going to be editing the database (which needs to be done when uploading a website or moving it between hosts or servers), I start by making a duplicate of the database and adding &#8220;old&#8221; to its name. This is the backup, and I&#8217;ll be editing the original database.</p>
<h3>Moving A Website From A Subdirectory To The Root</h3>
<p>This is by far the simplest of the three moves I&#8217;m going to cover, because you don&#8217;t actually have to move anything &mdash; or nearly anything. This method will work on a standard installation of WordPress, and will work with most frameworks, or if you&#8217;re using a parent and child theme structure.</p>
<p>Beware! This method will not work for:</p>
<ul>
<li>Multi-site installations; or</li>
<li>Sites using Genesis as a framework (or so I&#8217;m told, I haven&#8217;t tested it myself &mdash; if you can get it to work please leave a comment below).</li>
</ul>
<p>The great thing about this method is that it only takes from three to ten minutes depending on your setup &mdash; no time at all in the scheme of things.</p>
<h4>1. Remove the Existing Website</h4>
<p>If there is an existing website in the root directory, remove it. It may be another WordPress installation or it may be a static website.</p>
<p>If it&#8217;s a WordPress website, make a backup as detailed above, and then delete all of the WordPress files in the root.</p>
<ul>
<li>If you have access to <a href="http://www.softaculous.com/">Softaculous</a> or another installation service via your hosting control panel, use that to uninstall WordPress.</li>
<li>If not, use phpMyAdmin to drop (delete) the database from the existing website. See the next section for details of how to do this.</li>
<li>After dropping the database, remove all WordPress files. This normally means any files or folders beginning with <code>wp-</code>.</li>
<li><strong>Beware &mdash; don&#8217;t remove the existing site until you have made a backup!</strong></li>
</ul>
<h4>2. Turn Off Permalinks</h4>
<p>Turn off pretty permalinks in the &#8220;Permalinks&#8221; screen, which you&#8217;ll find in the &#8220;Settings&#8221; menu. Do this by selecting the &#8220;Default&#8221; option and clicking &#8220;Save Changes.&#8221;</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/1-permalinks.png"><img alt="Permalink Settings screen." title="Permalink Settings screen." src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/1-permalinks.jpg" width="500" height="340" /></a><br /><em><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/1-permalinks.png">Larger version</a>.</em></p>
<h4>3. Change Your Website Address</h4>
<p>In &#8220;Settings&#8221; &#8594; &#8220;General,&#8221; change the address of your website but not the address of WordPress. For example if you&#8217;ve been working on the website at <code>example.com/development</code>, change the settings as follows:</p>
<ul>
<li>WordPress address (URL): <code>http://example.com/development</code></li>
<li>Site Address (URL): <code>http://example.com</code></li>
</ul>
<p>Save by clicking on the &#8220;Save Changes&#8221; button and move on to the next steps before trying to access your website.</p>
<h4>4. Copy and Edit Two Files</h4>
<p>Using FTP/SFTP or cPanel file manager, copy (don&#8217;t move) the following files from your WordPress directory to the root directory:</p>
<ul>
<li><code>index.php</code></li>
<li><code>.htaccess</code>, if you have one. If there isn&#8217;t an <code>.htaccess</code> file (and turning off pretty permalinks means you&#8217;re less likely to have one), don&#8217;t worry about creating one.</li>
</ul>
<p>Edit the <code>index.php</code> file that you&#8217;ve moved. You could do this by:</p>
<ul>
<li>Editing it in situ after the move, by using FTP/SFTP or cPanel file manager;</li>
<li>Downloading it from the subdirectory, editing it and then uploading it to the root directory &mdash; instead of making a copy.</li>
</ul>
<p>The edit you need to make is very simple, to one line at the end of the file. <strong>You simply change this:</strong></p>
<pre><code class="language-php">require ('./wp-blog-header.php)</code></pre>
<p>..to this:</p>
<pre><code class="language-php">require ('./subdirectoryname/wp-blog-header.php)</code></pre>
<p>So if you&#8217;ve been developing in <code>example.com/development</code>, just change the line to:</p>
<pre><code class="language-php">require ('./development/wp-blog-header.php)</code></pre>
<p>Save the new <code>index.php</code> file.</p>
<h4>5. Turn Permalinks Back On and Test</h4>
<p>Back in the WordPress admin, turn pretty permalinks on again, with whatever setting you need for your website.</p>
<p>Visit the root domain of your website in the browser and it will display the website that&#8217;s stored in the subdirectory, but the URL will show the root URL rather than the subdirectory URL. And that&#8217;s it!</p>
<h3>Uploading A WordPress Website From A Local To A Remote Installation</h3>
<p>This is one of the most common instances of moving WordPress. If you&#8217;re working on a local website for development and need to upload it either to go live or because you need to show a client or other team members your work, you&#8217;re going to need to upload your WordPress website. This is more complicated than moving from a subdirectory to the root directory, and involves moving three things:</p>
<ul>
<li>WordPress itself &mdash; you&#8217;ll need to install this in the new location;</li>
<li>The database &mdash; which you can move using phpMyAdmin;</li>
<li>Your theme files, uploads and plugins.</li>
</ul>
<h4>1. Turn Off Permalinks</h4>
<p>Turn off pretty permalinks in the &#8220;Permalinks&#8221; screen, which you&#8217;ll find in the &#8220;Settings&#8221; menu. Do this by selecting the &#8220;Default&#8221; option and clicking &#8220;Save Changes.&#8221;</p>
<h4>2. Backup the Database</h4>
<p>Make a copy of the database and give it a new name (for example, by adding &#8220;old&#8221; to its name).</p>
<h4>3. Install WordPress In the New Location and Upload Content</h4>
<p>Using your preferred method, install WordPress on the server you want to move your website to.</p>
<p>Using FTP or SFTP, copy the files from your local &#8220;wp-content&#8221; directory to the remote &#8220;wp-content&#8221; directory, using the same folder structure as in your local install.</p>
<p>Go and have a cup of coffee. These files could take a while to upload.</p>
<h4>4. Edit the Database</h4>
<p>Open the original database file from your local installation and edit it. Using your preferred text editor, replace the old, local URL for the website with the new, remote URL.</p>
<p>So for example, if your local URL is <code>http://localhost/example</code>, you would change it to <code>http://example.com</code>.</p>
<p>Using the &#8220;replace&#8221; command in your text editor will speed this up &mdash; there could be thousands of instances. Save your new database.</p>
<h4>5. Drop the Existing Remote Database</h4>
<p><strong>Note</strong>: This step only applies if you&#8217;ve used a script such as Softaculous or Fantastico to install WordPress, as they automatically create a new database. If you&#8217;ve installed WordPress manually, you can ignore this bit.</p>
<p>In phpMyAdmin, drop (delete) the database that was installed in the remote website when you installed WordPress:</p>
<ul>
<li>Select the database you&#8217;re working with.</li>
<li>Click on the &#8220;Structure&#8221; tab.</li>
<li>Below the list of tables, click &#8220;Check All.&#8221;</li>
<li>In the drop-down menu which says &#8220;With selected,&#8221; select &#8220;Drop&#8221;:
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/2-phpmyadmin-drop-tables.jpg"><img alt="Dropping a database in phpMyAdmin." title="Dropping a database in phpMyAdmin." src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/2-phpmyadmin-drop-tables.jpg" width="500" height="474" /></a><br /><em><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/2-phpmyadmin-drop-tables.jpg">Larger version</a>.</em></p>
</li>
<li>You will see a warning message checking that you want to drop all tables. Click &#8220;Yes.&#8221;</li>
<li>Finally you will see a message telling you that your query has been implemented:
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/3-phpmyadmin-drop-success.png"><img alt="Confirmation message after dropping a database." title="Confirmation message after dropping a database." src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/3-phpmyadmin-drop-success.jpg" width="500" height="101" /></a><br /><em><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/04/3-phpmyadmin-drop-success.png">Larger version</a>.</em></p>
</li>
</ul>
<h4>6. Upload the New Database</h4>
<p>While you are still in phpMyAdmin, upload the database you&#8217;ve edited:</p>
<ul>
<li>Click the &#8220;Import&#8221; tab.</li>
<li>Click the &#8220;Choose file&#8221; button.</li>
<li>Select the database you saved in step 4 and click &#8220;Choose&#8221; or &#8220;OK.&#8221;</li>
<li>Click the &#8220;Go&#8221; button.</li>
<li>After a while (depending on the size of your database), you will see a message telling you the upload has successfully finished:
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/4-phpmyadmin-import-success.jpg"><img alt="Confirmation message after importing a database." title="Confirmation message after importing a database." src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/4-phpmyadmin-import-success.jpg" width="500" height="145" /></a></p>
</li>
</ul>
<h4>7. Clear Your Browser&#8217;s Cache</h4>
<p>This avoids any problems you may have if the browser has cached content from the old version of the remote database.</p>
<h4>8. Log Into the WordPress Admin For the Remote Website and Update Permalinks</h4>
<p>Your log-in details will be the same as for your local website. If you specified different log-in details when installing remotely, these will have been overridden by the imported database.</p>
<p>Visit the &#8220;Permalinks&#8221; screen and turn pretty permalinks back on.</p>
<p>You&#8217;re done!</p>
<h3>Moving A WordPress Website Between Hosts</h3>
<p>This process is almost exactly the same as that for uploading a website from a local installation. The only difference is that you need to download the files and database from the existing website.</p>
<p>Follow the above process, with changes to step 2:</p>
<h4>2. Download and Backup the Old Database and Files</h4>
<p>In phpMyAdmin for the old website, select the correct database and click on the &#8220;Export&#8221; tab. Download the database by clicking the &#8220;Go&#8221; button. The database will download to your machine.</p>
<p>Move the database out of your downloads folder to somewhere useful and make a copy of it. You&#8217;ll be working with this database in Step 4.</p>
<p>Using FTP or SFTP, download the contents of <code>wp-content</code> from your old website. You will upload this to the new website in step 3.</p>
<p>Now return to the original process.</p>
<h3>Summary</h3>
<p>Moving WordPress doesn&#8217;t need to be complicated. As long as you follow the steps above in the right order, your data will be safe and your website will work in its new location. Important points to remember are:</p>
<ul>
<li>Always back up your website before you start.</li>
<li>If moving WordPress within a domain, you don&#8217;t need to move the whole thing, just make some changes to the settings and move and edit the <code>index.php</code> file.</li>
<li>When uploading your database to a new location, make sure you upload the version that you&#8217;ve edited with the new URL, not the backup version with the old URL. Otherwise, at the very least, internal links will break and it&#8217;s possible you&#8217;ll see the white screen of death when you try to install your website.</li>
</ul>
<p>If at any stage you go wrong, undo what you&#8217;ve done and start again with your backup. You did make a backup, right?</p>
<h3>Resources</h3>
<p>The WordPress Codex includes resources that will help you apply this method whatever your hosting setup:</p>
<ul>
<li><a href="http://codex.wordpress.org/Moving_WordPress">Moving WordPress</a></li>
<li><a href="http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory">Giving WordPress Its Own Directory</a></li>
<li><a href="http://codex.wordpress.org/Installing_WordPress">Installing WordPress</a></li>
</ul>
<p>For help with phpMyAdmin, see <a href="http://www.phpmyadmin.net/documentation/">phpMyAdmin’s documentation</a>.</p>
<p>There are also plugins which will help you move WordPress if you don&#8217;t want to do it all manually. I haven&#8217;t tested all of these, so I can&#8217;t vouch for their reliability or ease of use. If you do use one, do so with care.</p>
<ul>
<li><a href="http://wordpress.org/extend/plugins/wordpress-move/">WordPress Move</a></li>
<li><a href="http://wordpress.org/extend/plugins/backup-and-move/">Backup and Move Plugin</a></li>
<li><a href="http://wordpress.org/extend/plugins/wp-db-backup/">WP-DB-Backup</a></li>
</ul>
<p><em>(cp)</em></p>
<hr />
<p><small>© Rachel McCollin for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/04/08/moving-a-wordpress-website-without-hassle/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/moving-a-wordpress-website-without-hassle/" data-text="Moving A WordPress Website Without Hassle"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/moving-a-wordpress-website-without-hassle/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fmoving-a-wordpress-website-without-hassle%2F&amp;title=Moving%20A%20WordPress%20Website%20Without%20Hassle" id="wpa2a_20"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/moving-a-wordpress-website-without-hassle/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Widget Transformation: How To Create A Tab Widget In WordPress</title>
		<link>http://drewmturner.com/widget-transformation-how-to-create-a-tab-widget-in-wordpress/</link>
		<comments>http://drewmturner.com/widget-transformation-how-to-create-a-tab-widget-in-wordpress/#comments</comments>
		<pubDate>Thu, 04 Apr 2013 10:43:41 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=704</guid>
		<description><![CDATA[&#160;&#160; In this tutorial, you&#8217;ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website. In the past, there were different methods of doing this, most of which were theme-dependent. As [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>In this tutorial, you&#8217;ll learn how to create the <a href="http://wordpress.org/extend/plugins/tabber-widget/">Tabber widget</a>, which is very useful for when multiple widgets need to fit in a sidebar. It <strong>saves space and streamlines the appearance</strong> and functionality of your WordPress-powered website. </p>
<p>In the past, there were different methods of doing this, most of which were theme-dependent. As we&#8217;ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let&#8217;s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/02/create-tabber-widget-splash.png"><img class="alignnone size-full wp-image-108415" alt="create-tabber-widget-splash" src="http://media.smashingmagazine.com/wp-content/uploads/2013/02/create-tabber-widget-splash.png" width="500" height="333" /></a></p>
<h3>Saving Sidebar Space</h3>
<p>The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_example.png"><img class="alignnone size-full wp-image-108407" alt="tabber_example" src="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_example.png" width="560" height="350" /></a></p>
<h3>Before We Start</h3>
<p>A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:</p>
<ul>
<li>“<a href="http://codex.wordpress.org/Widgets_API">Widgets API</a>,” WordPress Codex</li>
<li>“<a href="http://azuliadesigns.com/creating-widgets-wordpress-28/">Creating Widgets for WordPress 2.8</a>,” Tim Trott, Azulia Designs</li>
<li>“<a href="http://www.wproots.com/advanced-wordpress-widgets/">Advanced WordPress Widgets</a>,” WP Roots</li>
</ul>
<p>Use these resources as needed while following the tutorial along.</p>
<h3>The Basic Idea</h3>
<p>The idea for this widget is simple: <strong>select a sidebar</strong>, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.</p>
<p>To control your widgets, Tabber uses <a href="http://www.sunsean.com/idTabs/">idTabs</a> for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.</p>
<p>Here is the basic HTML structure required to create tabs:</p>
<pre><code class="language-markup tmp-html">
&lt;ul&gt;
  &lt;li&gt;&lt;a href="#widget-1"&gt;Widget one&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#widget-2"&gt;Widget two&lt;/a&gt;&lt;/li&gt;
&lt;ul&gt;
&lt;div id="widget-1"&gt;
  Widget one's content
&lt;/div&gt;
&lt;div id="widget-2"&gt;
  Widget two's content
&lt;/div&gt;
</code></pre>
<p>Unfortunately, you can&#8217;t get such a structure directly by using WordPress’ sidebar and widget rendering. Typically, WordPress’ widget structure looks like this:</p>
<pre><code class="language-markup tmp-html">
&lt;div id="widget-1"&gt;
  &lt;h2&gt;Widget one&lt;/h2&gt;
  Widget one's content
&lt;/div&gt;
&lt;div id="widget-2"&gt;
  &lt;h2&gt;Widget two&lt;/h2&gt;
  Widget two's content
&lt;/div&gt;
</code></pre>
<p>So, the goal with Tabber is to <strong>transform any widget’s output into markup that can be used to display tabs</strong>. To complicate matters, different themes might register sidebars that do not use a <code>&lt;div&gt;</code> to hold a widget or use <code>&lt;h2&gt;</code> to show its title. For example, WordPress’ new default theme, Twenty Twelve, uses <code>&lt;aside&gt;</code> and <code>&lt;h3&gt;</code> tags for this. Other themes may use complicated markup that can&#8217;t be predicted or successfully transformed into the output needed for tabs.</p>
<p>The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.</p>
<h3>Tabber Widget Loading</h3>
<p>Now that we understand the goal, let&#8217;s look at the demo plugin. Our plugin contains a main PHP file, one JavaScript file and one CSS file. The PHP file contains the widget and loads the CSS and JavaScript, like so:</p>
<pre><code class="language-php">
add_action('init', 'd4p_st_init');
add_action('widgets_init', 'd4p_st_widgets_init');

function d4p_st_init() {
    register_sidebar(array('name' =&gt; 'Tabber Example Sidebar', 'description' =&gt; 'Add widgets to this sidebar to use it from Tabber widget.'));

    if (!is_admin()) {
        $url = plugins_url('d4p-smashing-tabber');

        wp_enqueue_script('jquery');
        wp_enqueue_script('d4p_st_tabber', $url.'/tabber.js', array('jquery'));
        wp_enqueue_style('d4p_st_tabber', $url.'/tabber.css');
    }
}

function d4p_st_widgets_init() {
    register_widget('d4p_sr_tabber');
}
</code></pre>
<p>Here, the function <code>d4p_st_init</code> is run during WordPress’ <code>init</code> action. It will register one sidebar (line 5) and enqueue the jQuery, JavaScript and CSS files using the <code>wp_enqueue_script</code> and <code>wp_enqueue_style</code> functions (lines 10 to 12).</p>
<p>Then, the function <code>d4p_st_widgets_init</code> is called during WordPress’ <code>widgets_init</code> action. We register the widget on line 17.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_widget.png"><img class="size-full wp-image-108410" alt="Widget Interface" src="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_widget.png" width="252" height="228" /></a><br />
<em>Widget interface.</em></p>
<h3>The Main Tabber Widget Class</h3>
<p>Tabber is a normal widget, and in this case it is located in the <code>d4p_sr_tabber</code> class.</p>
<h4>Settings: Plugin Interface</h4>
<p>The widget has two settings:</p>
<ul>
<li>“sidebar”<br />
to hold the ID of the selected sidebar</li>
<li>“css”<br />
for extra CSS classes to style the Tabber widget</li>
</ul>
<p>When selecting which sidebar to use, you must <strong>avoid using the sidebar that holds the Tabber widget</strong>. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can&#8217;t be prevented while the widget is set up, because the widget&#8217;s panel affords very little control over this.</p>
<p>Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.</p>
<p>The <code>form</code> and <code>update</code> methods contained in the <code>d4p_sr_tabber</code> class are used to display the widget’s interface in the “Widgets” panel and to save its settings, and they are not that interesting. But it is worth taking a closer look at how to display the widget on the front end.</p>
<h4>Main Display Method</h4>
<p>Here is the main <code>widget</code> method:</p>
<pre><code class="language-php">
public function widget($args, $instance) {
  add_filter('dynamic_sidebar_params', array(&amp;$this, 'widget_sidebar_params'));

  extract($args, EXTR_SKIP);
  $this-&gt;id = $widget_id;

  echo $before_widget;
  if ($args['id'] != $instance['sidebar']) {
    echo '&lt;div id="'.$widget_id.'"&gt;';
    echo '&lt;ul&gt;&lt;/ul&gt;';
    dynamic_sidebar($instance["sidebar"]);
    echo '&lt;/div&gt;';
  } else {
    echo 'Tabber widget is not properly configured.';
  }
  echo $after_widget;

  remove_filter('dynamic_sidebar_params', array(&amp;$this, 'widget_sidebar_params'));
}
</code></pre>
<p>In this code, line 2 adds a filter that modifies the widget’s rendering parameters before they are processed. With this filter, all widgets rendered after that point will have their parameters modified as needed for successful transformation to tabbed form. And that will be done for the widgets in the selected sidebar on line 11, using the <code>dynamic_sidebar</code> function.</p>
<p>This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.</p>
<p>Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.</p>
<h4>Widget Modification</h4>
<p>To prepare for the transformation done with JavaScript, the tabber widget includes the <code>d4p-tabber-widget</code> class, which contains an empty <code>&lt;ul&gt;</code> tag.</p>
<p>The filter used to modify the widget’s parameters looks like this:</p>
<pre><code class="language-php">
public function widget_sidebar_params($params) {
  $params[0]['before_widget'] = '&lt;div id="'.$params[0]['widget_id'].'"&gt;';
  $params[0]['after_widget'] = '&lt;/div&gt;';
  $params[0]['before_title'] = '&lt;a href="#"&gt;';
  $params[0]['after_title'] = '&lt;/a&gt;';

  return $params;}
</code></pre>
<p>Depending on how the sidebar is registered, this code will change the rendering parameters to a format that is close to the format needed for tabs. But JavaScript is still needed to move the widget&#8217;s title into the <code>&lt;ul&gt;</code> tag for the control tabs. After this filter, the widget’s output will look like this:</p>
<pre><code class="language-markup tmp-html">
&lt;div id="widget-1"&gt;
  &lt;a href="#"&gt;Widget one&lt;/a&gt;
  Widget one's content
&lt;/div&gt;
</code></pre>
<h3>JavaScript For Widget Transformation</h3>
<p>Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:</p>
<pre><code class="language-javascript">jQuery(document).ready(function(){
  jQuery(".d4p-tabber-widget").each(function(){
  var ul = jQuery(this).find("ul.d4p-tabber-header");

  jQuery(this).children("div.d4p-st-tab").each(function() {
    var widget = jQuery(this).attr("id");
    jQuery(this).find('a.d4p-st-title').attr("href", "#" + widget).wrap('&lt;li&gt;&lt;/li&gt;').parent().detach().appendTo(ul);
  });

  jQuery(this).idTabs();
  });
});
</code></pre>
<p>This code uses jQuery to get all of the Tabber widgets based on the <code>.d4p-tabber-widget</code> CSS class, and each one gets the element (where the tabs will go):</p>
<ul>
<li>With line 5, we find all individual widgets belonging to the Tabber widget.</li>
<li>On line 6, we get the widget’s ID needed for the tab to connect it to the widget&#8217;s content.</li>
<li>On line 7, we find the title <code>&lt;a&gt;</code> element, set its <code>href</code> attribute to that of the widget’s ID, wrap it in a <code>&lt;/li&gt;</code> element, remove it from its current location, and move it into the tab’s <code>&lt;ul&gt;</code> element.</li>
<li>After this, the <code>&lt;div&gt;</code> will hold only its content.</li>
</ul>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_example_final.png"><img class="size-full wp-image-108409" alt="Final Tabber Example" src="http://media.smashingmagazine.com/wp-content/uploads/2013/02/tabber_example_final.png" width="242" height="137" /></a><br />
<em>Final Tabber example.</em></p>
<p>Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the <code>tabber.css</code> file, you can see how Tabber looks with three widgets in it (see screenshot above). Feel free to experiment and adjust the styling to your theme.</p>
<h3>How To Install The Tabber Plugin</h3>
<ul>
<li><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/02/d4p-smashing-tabber.1.0.0.zip">Download version 1.0.0 of the Tabber plugin.</a></li>
</ul>
<p>As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”</p>
<p>Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.</p>
<h3>Conclusion</h3>
<p>Creating one widget to display several other widgets as a tab isn&#8217;t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.</p>
<p>We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:</p>
<ul>
<li><a href="http://www.sunsean.com/idTabs/">idTabs</a></li>
<li><a href="http://os.alfajango.com/easytabs/">EasyTabs</a></li>
<li><a href="http://jqueryui.com/tabs/">jQueryUI Tabs</a></li>
<li><a href="http://unwrongest.com/projects/tabify/">Tabify</a></li>
</ul>
<p>I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Milan Petrović for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/04/04/how-to-create-a-tab-widget-in-wordpress/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/widget-transformation-how-to-create-a-tab-widget-in-wordpress/" data-text="Widget Transformation: How To Create A Tab Widget In WordPress"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/widget-transformation-how-to-create-a-tab-widget-in-wordpress/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fwidget-transformation-how-to-create-a-tab-widget-in-wordpress%2F&amp;title=Widget%20Transformation%3A%20How%20To%20Create%20A%20Tab%20Widget%20In%20WordPress" id="wpa2a_24"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/widget-transformation-how-to-create-a-tab-widget-in-wordpress/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>A Thorough Introduction To Backbone.Marionette (Part 2)</title>
		<link>http://drewmturner.com/a-thorough-introduction-to-backbone-marionette-part-2/</link>
		<comments>http://drewmturner.com/a-thorough-introduction-to-backbone-marionette-part-2/#comments</comments>
		<pubDate>Tue, 02 Apr 2013 11:34:49 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=703</guid>
		<description><![CDATA[&#160;&#160; In the first part of this series, we discussed Backbone.Marionette’s Application. This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them. What Are Modules? Before we get into the details of [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>In the first part of this series, we discussed <a href="http://coding.smashingmagazine.com/2013/02/11/introduction-backbone-marionette/">Backbone.Marionette’s <code>Application</code></a>. This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the <code>Application</code>, but modules are a very large topic and deserve an article dedicated to them.</p>
<h3>What Are Modules?</h3>
<p>Before we get into the details of how to use Marionette’s module system, we should make sure we all have a decent definition of a module. A module is <strong>an independent unit of code that ideally does one thing</strong>. It can be used in conjunction with other modules to create an entire system. The more independent a unit of code is, the more easily it can be exchanged or internally modified without affecting other parts of the system.</p>
<p>For this article, that’s about as much as we need to define modules, but if you want to learn more about writing modular code, plenty of resources are on the Internet, of which the “<a href="http://singlepageappbook.com/maintainability1.html">Maintainability Depends on Modularity</a>” chapter of <em>Single Page Apps in Depth</em> is one of the better ones out there.</p>
<p>The JavaScript language doesn’t currently have any built-in methods for defining modules (the <a href="http://wiki.ecmascript.org/doku.php?id=harmony:modules">next version should change that</a>), but many libraries have arisen to provide support for defining and loading modules. Marionette’s module system, sadly, doesn’t provide support for loading modules from other files, but it does offer some functionality that other module systems do not have, such as the ability to start and stop a module. We’ll cover more of that later. Right now, we will just start with defining a module.</p>
<h3>Module Definition</h3>
<p>Let’s start with the most basic of module definitions. As mentioned, modules are accessible through the <code>Application</code>, so we need to instantiate one of those. Then we can use its <code>module</code> method to define a module.</p>
<pre><code class="language-javascript">
var App = new Backbone.Marionette.Application();

var myModule = App.module(‘myModule’);
</code></pre>
<p>That’s pretty simple, right? Well, it is, but that’s the simplest module we can create. What exactly did we create, though? Essentially, we told the application that we want a barebones module, with no functionality added by us, and that it will be named <code>myModule</code> (according to the argument we passed into <code>module</code>). But what is a barebones module? It’s an instantiation of a <code>Marionette.Module</code> object.</p>
<p><code>Module</code> comes with a bit of functionality baked in, such as events (through <code>EventAggregator</code>, which we’ll discuss thoroughly in a later article), starting with initializers (just like <code>Application</code> has), and stopping with finalizers (we’ll go over that in the “Starting and Stopping Modules” section).</p>
<h4>Standard Module Definition</h4>
<p>Now let’s look at how to define a module with some of our own functionality.</p>
<pre><code class="language-javascript">
App.module("myModule", function(myModule, App, Backbone, Marionette, $, _){
    // Private Data And Functions
    var privateData = "this is private data";

    var privateFunction = function(){
        console.log(privateData);
    }

    // Public Data And Functions
    myModule.someData = "public data";

    myModule.someFunction = function(){
        privateFunction();
        console.log(myModule.someData);
    }
});
</code></pre>
<p>As you can see, there’s a lot of stuff in there. Let’s look at the top line and work our way down. Just like before, we call <code>App.module</code> and provide a name for the module. But now we’re also passing a function in, too. The function is passed several arguments. I bet you can figure out what they are, based on the names I’ve given them, but I’ll still explain them all:</p>
<ul>
<li></code>myModule</code> is the very module you’re trying to create. Remember, it’s already created for you, and it’s a new instance of <code>Module</code>. You’re probably going to want to extend this with some new properties or methods; otherwise, you might as well stick with the short syntax that doesn’t require you to pass in a function.</li>
<li><code>App</code> is the <code>Application</code> object that you called <code>module</code> on.</li>
<li><code>Backbone</code> is, of course, the reference to the Backbone library.</li>
<li><code>Marionette</code> is the reference to the Backbone.Marionette library. It is actually available through <code>Backbone</code>, but this allows you to alias it and make it a shorter name.</li>
<li><code>$</code> is your DOM library, which will be either jQuery or Zepto (or possibly something else in the future).</li>
<li><code>_</code> is a reference to Underscore or Lodash, whichever you’re using.</li>
</ul>
<p>After that, you can actually pass in and use custom arguments. We’ll go over this in a bit.</p>
<p>Normally, I would say that most of these arguments are unnecessary; after all, why wouldn’t you already have access to these references? However, I could see these being useful in a couple of situations:</p>
<ul>
<li>A minifier can shorten the names of the arguments, saving some bytes.</li>
<li>If you’re using RequireJS or some other module loader, you only need to pull in the <code>Application</code> object as a dependency. The rest will be available through the arguments given to you by <code>Module</code>.</li>
</ul>
<p>Anyway, let’s get back to explaining the rest of what’s going on in the code above. Inside the function, you can utilize the closure to create private variables and functions, which is what we’ve done. You can also expose data and functions publicly by adding them as properties of <code>myModule</code>. This is how we create and extend our module. There is no need to return anything because the module will be accessible directly through <code>App</code>, as I’ll explain in the “Accessing a Module” section below.</p>
<p><strong>Note:</strong> Make sure that you only try to add properties to your <code>module</code> variable and do not set it equal to something (for example, <code>myModule = {…}</code>), because when you set your <code>module</code> variable to something, that changes what the variable’s name is referencing, and none of the changes you specify will show up in your module later.</p>
<p>Earlier, I noted that you can send in custom arguments. In fact, you can send in as many custom arguments as you want. Take a look at the code below to see how it’s done.</p>
<pre><code class="language-javascript">
App.module("myModule", function(myModule, App, Backbone, Marionette, $, _, customArg1, customArg2){
    // Create Your Module
}, customArg1, customArg2);
</code></pre>
<p>As you can see, if you pass additional arguments to <code>module</code>, it will pass those in to the function that you are defining your module in. Once again, <strong>the biggest benefit I see from this is saving some bytes after minification</strong>; other than that, I don’t see much value.</p>
<p>Another thing to note is that the <code>this</code> keyword is available within the function and actually refers to the module. This means you don’t even need the first argument, but you would lose the advantage of minification if you didn’t use the argument. Let’s rewrite that first code using <code>this</code> so that you can see that it’s exactly the same as <code>myModule</code>.</p>
<pre><code class="language-javascript">
App.module("myModule", function(){
    // Private Data And Functions
    var privateData = "this is private data";

    var privateFunction = function(){
        console.log(privateData);
    }

    // Public Data And Functions
    this.someData = "public data";

    this.someFunction = function(){
        privateFunction();
        console.log(this.someData);
    }
});
</code></pre>
<p>As you can see, because I’m not using any of the arguments, I decided not to list any of them this time. It should also be obvious that you can skip the first argument and just use <code>this</code>.</p>
<h4>Split Definitions</h4>
<p>The final thing I’ll mention about defining modules is that we can split up the definitions. I don’t know exactly why you would want to do this, but someone might want to extend your modules later, so splitting up the definitions might help them avoid touching your original code. Here’s an example of split definitions:</p>
<pre><code class="language-javascript">
// File 1
App.module("myModule", function(){
    this.someData = "public data";
});

// File 2 
App.module("myModule", function(){
    // Private Data And Functions
    var privateData = "this is private data";

    var privateFunction = function(){
        console.log(privateData);
    }

    this.someFunction = function(){
        privateFunction();
        console.log(this.someData);
    }
});
</code></pre>
<p>This gives us the same result as the previous definition, but it’s split up. This works because in <code>File 2</code>, the module that we defined in <code>File 1</code> is being given to us (assuming that <code>File 1</code> was run before <code>File 2</code>). Of course, if you’re trying to access a private variable or function, it has to be defined in the module definition where it is used because it’s only available within the closure where it is defined.</p>
<h3>Accessing A Module</h3>
<p>What good is creating modules if we can’t access them? We need to be able to access them in order to use them. Well, in the very first code snippet of this article, you saw that when I called <code>module</code>, I assigned its return value to a variable. That’s because we use the very same method to both define <em>and</em> retrieve modules.</p>
<pre><code class="language-javascript">
var myModule = App.module("myModule");
</code></pre>
<p>Normally, if you’re just trying to retrieve the module, you’ll pass in the first argument, and <code>module</code> will go out and grab that module for you. But if you pass in a function as the second argument, the module will be augmented with your new functionality, <em>and</em> it will still return your newly created or modified module. This means you can define your module and retrieve it all with a single method call.</p>
<p>This isn’t the only way to retrieve modules, though. When a module is created, it is attached directly to the <code>Application</code> object that it was constructed with. This means you can also use the normal dot notation to access your module; but this time, it <em>must</em> be defined beforehand, otherwise you’ll get <code>undefined</code> back.</p>
<pre><code class="language-javascript">
// Works but I don't recommend it
var myModule = App.myModule;
</code></pre>
<p>While this syntax is shorter, it doesn’t convey the same meaning to other developers. I would recommend using <code>module</code> to access your modules so that it is obvious you are accessing a module and not some other property of <code>App</code>. The convenience and danger here is that it will create the module if it doesn’t already exist. The danger comes if you misspell the name of the module; you won’t have any way of knowing that you didn’t get the correct module until you try to access a property on it that doesn’t exist.</p>
<h3>Submodules</h3>
<p>Modules can also have submodules. Sadly, <code>Module</code> doesn’t have its own <code>module</code> method, so you can’t add submodules to it directly, but that won’t stop us. Instead, to create submodules, you call <code>module</code> on <code>App</code>, just like you used to do; but for the name of the module, you need to put a dot (<code>.</code>) after the parent module’s name and then put the name of the submodule.</p>
<pre><code class="language-javascript">
App.module('myModule.newModule', function(){
    ...
});
</code></pre>
<p>By using the dot separator in the module’s name, Marionette knows that it should be creating a module as a submodule of the module before the dot. The cool (and potentially dangerous) part is that if the parent module isn’t created at the time that you call this, it will create it along with its submodule. This can be dangerous because of the same potential for misspelling that I mentioned earlier. You could end up creating a module that you didn’t intend to create, and the submodule would be attached to it, instead of to the module you intended.</p>
<h4>Accessing Submodules</h4>
<p>As before, submodules can be accessed the very same way they are defined, or you can access them as properties of the module.</p>
<pre><code class="language-javascript">
// These all work. The first example is recommended
var newModule = App.module('myModule.newModule');
var newModule = App.module('myModule').newModule;
var newModule = App.myModule.newModule;

// These don't work. Modules don't have a 'module' function
var newModule = App.myModule.module('newModule');
var newModule = App.module('myModule').module('newModule');
</code></pre>
<p>Any of these methods of accessing the submodule will work equally well if both the module and submodule have already been created.</p>
<h3>Starting And Stopping Modules</h3>
<p>If you read the previous article in the series, about <code>Application</code>, you will know that you can start an <code>Application</code> with <code>start</code>. Well, starting modules is the same, and they can also be stopped with <code>stop</code>.</p>
<p>If you recall (assuming you’ve read the previous article), you can add initializers with <code>addInitializer</code> to an <code>Application</code>, and they will be run when it is started (or will run immediately if the <code>Application</code> has already started). A few other things happen when you start an <code>Application</code>. Here are all of the events, in order:</p>
<ul>
<li>fires the <code>initialize:before</code> event,</li>
<li>starts all of the defined modules,</li>
<li>runs all of the initializers in the order they were added,</li>
<li>fires the <code>initialize:after</code> event,</li>
<li>fires the <code>start</code> event.</li>
</ul>
<p>A <code>Module</code> behaves in a very similar way. The number of events and some of the names of the events are different, but overall it is the same process. When a module is started, it:</p>
<ul>
<li>fires the <code>before:start</code> event,</li>
<li>starts all of its defined submodules,</li>
<li>runs all of its initializers in the order they were added,</li>
<li>fires the <code>start</code> event.</li>
</ul>
<p>The <code>stop</code> method is also very similar. Instead of adding initializers, though, you need to add finalizers. You do this with <code>addFinalizer</code> and by passing in a function to run when <code>stop</code> is called. Unlike with initializers, no data or options are passed along to each of the functions. When <code>stop</code> is called, it:</p>
<ul>
<li>fires the <code>before:stop</code> event,</li>
<li>stops its submodules,</li>
<li>runs its finalizers in the order they were added,</li>
<li>fires the <code>stop</code> event.</li>
</ul>
<p><strong>Initializers and finalizers aren’t only meant for use by others.</strong> In fact, they are quite helpful when used inside the module definition. This way, you can define a module inside the definition without actually creating any objects to be used, but then write your initializers to start creating the objects and setting them up, such as in the example below.</p>
<pre><code class="language-javascript">
App.module("myModule", function(myModule){
    myModule.startWithParent = false;

    var UsefulClass = function() {...}; // Constructor definition
    UsefulClass.prototype ... // Finish defining UsefulClass
    ...

    myModule.addInitializer(function() {
        myModule.useful = new UsefulClass();
        // More setup
    });

    myModule.addFinalizer(function() {
        myModule.useful = null;
        // More tear down
    });
});
</code></pre>
<h4>Automatic And Manual Starting</h4>
<p>When a module is defined, by default it will automatically start at the same time that its parent starts (either the root <code>Application</code> object or a parent module). If a module is defined on a parent that has already started, it will start immediately.</p>
<p>You can set up a module to not start automatically by changing its definition in one of two ways. Inside the definition, you can set a module’s <code>startWithParent</code> property to <code>false</code>, or you can pass an object (instead of a function) to <code>module</code> that has a <code>startWithParent</code> property set to <code>false</code> and a <code>define</code> property to replace the normal function.</p>
<pre><code class="language-javascript">
// Set 'startWithParent' inside function
App.module("myModule", function(){
    // Assign 'startWithParent' to false
    this.startWithParent = false;
});

// -- or --

// Pass in object 
App.module("myModule", {
    startWithParent: false,

    define: function(){
        // Define module here
    }
});

App.start();

// myModule wasn't started, so we need to do it manually
App.module('myModule').start("Data that will be passed along");
</code></pre>
<p>Now the module won’t autostart. You must call <code>start</code> manually to start it, as I did in the example above. The data that is passed to <code>start</code> could be anything of any type, and it will be passed along to the submodules when they’re started, to the initializers, and to the <code>before:start</code> and <code>start</code> events.</p>
<p>As I said, data isn’t passed along like this when you call <code>stop</code>. Also, <code>stop</code> <em>must</em> be called manually, and it will always call <code>stop</code> on submodules; there is no way around this. This makes sense because a submodule shouldn’t be running when its parent isn’t running, although there are cases when a submodule should be off when its parent is running.</p>
<h3>Other Events And Built-In Functionality</h3>
<p>I mentioned that <code>Module</code> comes with some baked-in functionality, such as the <code>EventAggregator</code>. As discussed, we can use the <code>on</code> method on a module to watch for events related to starting and stopping. That’s not all. There are no other built-in events, but a module can define and trigger their own events. Take a look:</p>
<pre><code class="language-javascript">
App.module('myModule', function(myModule) {
    myModule.doSomething = function() {
        // Do some stuff
        myModule.trigger('something happened', randomData);
    }
});
</code></pre>
<p>Now, whenever we call <code>doSomething</code> on the module, it will trigger the <code>something happened</code> event, which you can subscribe to:</p>
<pre><code class="language-javascript">
App.module('myModule').on('something happened', function(data) {
    // Whatever arguments were passed to `trigger` after the name of the event will show up as arguments to this function
    // Do something with `data`
});
</code></pre>
<p>This is very similar to the way we do things with events on collections, models and views in normal Backbone code.</p>
<h3>How We Might Actually Use A Module</h3>
<p>The modules in Marionette can definitely be used to define modules very similarly to any other module definition library, but that’s actually not how it was designed to be used. The built-in <code>start</code> and <code>stop</code> methods are an indication of this. The modules that Marionette includes are meant to represent somewhat <em>large</em> subsystems of an application. For example, <strong>let’s look at Gmail</strong>.</p>
<p>Gmail is a single application that actually contains several smaller applications: email client, chat client, phone client and contact manager. Each of these is independent &mdash; it can exist on its own &mdash; but they are all within the same application and are able to interact with one another. When we first start up Gmail, the contact manager isn’t up, and neither is the chat window. If we were to represent this with a Marionette application, each of those sub-applications would be a module. When a user clicks the button to open the contact manager, we would stop the email application (because it becomes hidden &mdash; although, for speed, we could keep it running and just make sure it doesn’t show in the DOM) and start the contacts manager.</p>
<p>Another example would be an application built largely out of widgets. Each widget would be a module that you can start and stop in order to show or hide it. This would be like a customizable dashboard such as iGoogle or the dashboard in the back end of WordPress.</p>
<p>Of course, we’re not limited to using Marionette’s modules in this way, although it’s difficult to use it in the traditional sense. This is because Marionette’s modules are fully instantiated objects, while traditional modules are “classes” that are meant for instantiation later.</p>
<h3>Conclusion</h3>
<p>Phew! That’s a lot of information. If you’ve made it this far, I commend you (although it was much easier for you to read this than for me to write it). Anyway, I hope you’ve learned a lot about the way that Marionette handles defining, accessing, starting and stopping modules and submodules. You may find it to be a very handy tool, or you might choose to completely ignore its existence. That’s one of the great things about Backbone and Marionette: most of their features are largely independent, so you can pick and choose what you want to use.</p>
<p><em>Credits of image on front page: <a href="http://www.flickr.com/photos/ruiwen/3260094840/">ruiwen</a></em></p>
<p><em>(al) (ea)</em></p>
<hr />
<p><small>© Joseph Zimmerman for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/04/02/a-thorough-introduction-to-backbone-marionette/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/a-thorough-introduction-to-backbone-marionette-part-2/" data-text="A Thorough Introduction To Backbone.Marionette (Part 2)"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/a-thorough-introduction-to-backbone-marionette-part-2/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fa-thorough-introduction-to-backbone-marionette-part-2%2F&amp;title=A%20Thorough%20Introduction%20To%20Backbone.Marionette%20%28Part%202%29" id="wpa2a_28"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/a-thorough-introduction-to-backbone-marionette-part-2/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>First-Hand Advice: Practical Tips From Top WordPress Pros</title>
		<link>http://drewmturner.com/first-hand-advice-practical-tips-from-top-wordpress-pros/</link>
		<comments>http://drewmturner.com/first-hand-advice-practical-tips-from-top-wordpress-pros/#comments</comments>
		<pubDate>Wed, 20 Mar 2013 14:05:13 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=700</guid>
		<description><![CDATA[&#160;&#160; Recently I shared with you some advice from the WordPress community to beginners. But what if starting out is already a dim memory? What if you’re already so immersed in the world of WordPress that you dream of Trac and you bore your partner with talk of your latest achievement with custom post types? [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>Recently I shared with you some <a href="http://wp.smashingmagazine.com/2013/02/01/wordpress-community-offers-advice-beginners/">advice from the WordPress community to beginners</a>. But what if starting out is already a dim memory? What if you’re already so <strong>immersed in the world of WordPress</strong> that you dream of Trac and you bore your partner with talk of your latest achievement with custom post types?</p>
<p>Below are some tips from WordPress pros from across the community. Many of the tips cover development, but there’s also advice on business, running your website and, of course, getting involved with the community.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/03/Wordpress-start-image.jpg"><img src="http://media.smashingmagazine.com/wp-content/uploads/2013/03/Wordpress-start-image.jpg" alt="Wordpress-start-image" width="500" height="357" class="alignnone size-full wp-image-108643" /></a><br /><em>Image: <a href="http://www.flickr.com/photos/oakleyfamily/4919659112">Phil Oakley</a></em></p>
<h3>Tips For Developers</h3>
<h4>Use Everything WordPress Has To Offer</h4>
<p>WordPress’ core can do a lot for you, without you having to write a bunch of code. WordPress is much more powerful when you make use of its APIs and built-in functionality. “If you use WordPress as your framework,” says <a href="http://trentlapinski.com/">Trent Lapinski</a>, “it will enable you to focus on developing an innovative plugin or theme.”</p>
<p><a href="http://matty.co.za/">Matty Cohen</a> recommends always looking for and using functionality available within WordPress before creating a function from scratch. “Examples of this include, at the higher level, using the WordPress Settings API and, at the lower level, using the <code>media_handle_upload()</code> function to upload your files, rather than a custom upload routine.” Matty gives an example of this with his <a title="WooSlr " href="http://www.woothemes.com/products/wooslider/">WooSlider</a> plugin. In order to create a familiar and consistent experience for <a href="http://woothemes.com/">WooThemes</a> users, he did the following:</p>
<ul>
<li>He used the Settings API for the settings screen.</li>
<li>He added a tab to the “Upload/Insert Media” popup for creating shortcodes. This interface uses a combination of the Settings API, custom form-creation logic, and some custom JavaScript to create the HTML output and the shortcode.</li>
</ul>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/wooslider.jpg"><img class="alignnone size-full wp-image-78211" title="wooslider" alt="Screenshot of WooSlider settings" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/wooslider.jpg" width="500" /></a><br />
<em>WooSlider uses built-in WordPress functionality to make the user experience better.</em></p>
<p>Making use of everything WordPress has to offer results in less coding for you and a better overall experience for users. But those aren’t the only benefits. <a href="http://amyhendrix.net/">Amy Hendrix</a> points out that the code you write will be future-proof. Writing your own scripts could eventually result in conflicts.</p>
<h4>Use Hooks</h4>
<p><a href="http://codex.wordpress.org/Plugin_API#Hooks.2C_Actions_and_Filters">Hooks</a> are the means by which you hook into WordPress and add your own code without modifying core files. There are two types of hooks: actions and filters. Action hooks are places where you can insert and run code. Filters are used to manipulate output.</p>
<p>If you’re working with WordPress’ core and with plugins and themes, then you should be extending by making use of all of the hooks available. Adam Brown maintains a <a title="WordPress hooks database - action and filter hooks for wp plugin developers -- Adam Brown, BYU Political Science" href="http://adambrown.info/p/wp_hooks">list of all of the hooks</a> that have ever appeared in WordPress.</p>
<h4>Implement Hooks</h4>
<p>Create your own hooks. By implementing hooks in your plugins and themes, you create opportunities for other people to extend them and create add-ons. <a href="http://tri.be">Shane Pearlman</a> believes that by doing so, you “encourage plugin developers to make opportunities for the community to extend and also use them.”</p>
<p>Not only does this create opportunities for other developers, but you make life easier for yourself. “With a ‘well-hooked’ theme or plugin,” says <a href="http://codeforthepeople.com">Simon Wheatley</a>, “you can make adjustments between clients, or between sites on a multisite setup, a lot more easily than by effectively forking your own code for every scenario.”</p>
<h4>Write Secure Code</h4>
<p>If you write plugins or themes, keeping the code secure is critical. How bad would you feel if your code was responsible for websites getting hacked? <a href="http://webdevstudios.com">Brad Williams</a> recommends learning <strong>how data validation pertains to WordPress</strong>. A detailed <a href="http://codex.wordpress.org/Data_Validation">page on data validation</a> can be found in the Codex; so, if you’re a developer, you have no excuse for writing insecure WordPress plugins and themes. Following the guidelines will ensure that your code is safe and secure from exploits and hacks. As <a href="http://ryanhellyer.net">Ryan Hellyer</a> points out, “Having a beautiful website which does exactly what a client requires is great, but it’s not so great when it gets injected with spam links and is de-indexed from search engines!”</p>
<h4>Follow Best Practices</h4>
<p><a href="http://fusionized.com/">Ryan Duff</a> and Brad Williams highlight some best practices that developers should stick to:</p>
<ul>
<li>Make sure the data that you’re passing is always being passed in the way it’s expected to. Setting a variable on an incorrect line could result in a trickle-down effect of error messages.</li>
<li>WordPress has <a title="WordPress Coding Standards « WordPress Codex" href="http://codex.wordpress.org/WordPress_Coding_Standards">coding standards</a>, so stick to them. This will keep your code in a format that all WordPress developers will recognize, making bug tracking much easier!</li>
</ul>
<h4>Embrace the Code Base</h4>
<p>Both <a href="http://helenhousandi.com/">Helen Hou-Sandi</a> and <a href="http://10up.com/">Jake Goldman</a> of 10up recommend that you spend time looking at the code base. As Jake points out, “Relying on the Codex and Google searches for solving unique problems with WordPress is like trying to tune a car’s performance without ever looking under the hood.” <a href="http://rachelbaker.me/">Rachel Baker</a> also suggests looking at the change logs, and Silviu-Cristian Burcă points us to his advice in “<a href="http://scribu.net/wordpress/how-to-become-a-wordpress-guru.html">How to Become a WordPress Guru</a>.”</p>
<p>A good integrated development environment (IDE) for PHP &mdash; such as NetBeans, PhpStorm, phpDesigner or Vanilla Eclipse &mdash; will offer <strong>code auto-completion for WordPress functions</strong> and their arguments and will display documentation on functions inline. You’ll be able to easily jump to function and class declarations to study them. “Think the core code base is too scary?” asks Jake. “Pick a file in <code>wp-includes</code> and start reading &mdash; you might be surprised by how approachable it is, and how much you can learn.&#8221;</p>
<p>Looking at the code, as Helen adds, also increases the likelihood that you’ll find a way to contribute code to the WordPress project. You’ll also become familiar with plugins and themes, understand how people do things properly, and recognize when they get it wrong.</p>
<h4>Share Your Code</h4>
<p>It’s in the nature of code in an open-source project to be shared, forked and iterated on. If you’re working on solutions, then share them with the community. “Share and publish your solutions, as a plugin, widget or theme,” says <a href="http://www.catiakitahara.com.br/">Cátia Kitahara</a>. “Not for every project, but with most of them, we end up with a solution that could be of use to many others. So, do it as a way of giving back to the community. I know it takes time to prepare something to be distributed through the repositories, but remember the time WordPress saves for us!”</p>
<p>You could put your code on <a href="https://github.com/">GitHub</a>, which <a href="http://ben.balter.com/">Ben Balter</a> recommends:</p>
<blockquote>
<p>&#8220;GitHub’s got a very different culture, and the ability for anyone to submit a pull request is a real game changer. It really lowers the barrier to contribute, and democratizes the entire plugin authoring experience. As a bonus, use GitHub’s built-in wiki functionality to maintain your plugin’s documentation (especially FAQ), so that anyone, even non-technical users, can contribute.</p>
<p>Lastly, if you have plugin tests, integrate with Travis CI so that you can automatically test pull requests before merging. To help you get started, a handful of tools are out there, such as GitHub &rarr; WordPress.org deployment scripts and GitHub wiki &rarr; WordPress readme converters.&#8221;</p>
</blockquote>
<p><a href="http://jumping-duck.com/">Eric Mann</a> points out that if you’ve built your project in isolation, then you’re likely missing out on different approaches. Sharing your code with people gives them the opportunity to point out how it can be improved. WordPress itself is built collaboratively and is the result of hundreds of minds looking at it from different perspectives. If you want your code to excel, you should be sharing it, too.</p>
<h4>Use Custom Post Types</h4>
<p>Taking advantage of custom post types for specific use cases is a great way to <strong>leverage WordPress</strong>. At the <a title="The Theme Foundry" href="http://thethemefoundry.com">Theme Foundry</a>, Drew Strojny has three custom post types: themes, stories and tutorials. This enables members of his team to quickly find and create content.</p>
<p>Drew recommends making custom post types even more flexible by adding custom meta data. This enables you to style your content and provides opportunities to reuse that meta data across your website. He provides the example of the meta data he uses with the “Story” post type in use on his “<a title="Stories — The Theme Foundry" href="http://thethemefoundry.com/stories/">Customer Stories</a>” page.</p>
<p><a href="http://thethemefoundry.com/stories/"><img class="alignnone size-full wp-image-78211" title="core team" alt="a screenshort of a theme foundry story" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/themefoundry.jpg" width="500" /></a><br />
<em>Theme Foundry uses custom post types to display customer stories.</em></p>
<p>Four pieces of meta data are collected: “Location,” “Site title,” “URL” and “Theme name.” These are outputted as part of the post itself. But the meta data can also be used to output the latest story for a theme on the <a title="Portfolio — A WordPress theme by The Theme Foundry" href="http://thethemefoundry.com/wordpress/portfolio/">product page itself</a>.</p>
<h4>Think of Your User</h4>
<p>When you develop with WordPress, you’re usually producing something that will be used daily by the average WordPress user. So, the interface should fit their needs. Starting off with the user workflow and interface, while keeping code in mind, will make for a better experience for users. Helen Hou-Sandi points out the following:</p>
<blockquote>
<p>&#8220;It is certainly harder to mold an interface to the unknown average user, but worth the effort. A user keeps coming back because they feel confident using your software, and the interface is a huge part of that comfort. Good code behind the scenes is good for the user, but unless they can see or feel the positive results, they may never know.&#8221;</p>
</blockquote>
<p><a href="http://ronandandrea.com/">Andrea Rennick</a> takes this even further, suggesting that “every so often, <strong>spend some time with a new user</strong>. It will open your eyes to the things you take for granted.” If you go to WordPress events, talk to novice users of your plugin to find out how they interact with it. If you run a WordPress business, spend some time with your newest members to see how they are getting on with your product. This sort of feedback is invaluable.</p>
<h4>Provide Support</h4>
<p>It’s not for punishment that new Automattic employees spend three weeks providing support, and that each team does a week of support every year. It keeps the people who write the code close to the people who use the product. It’s easy for developers to work in a bubble and forget about the users they are developing for. <strong>Stop seeing support as a chore</strong>; see it as an opportunity to stay in touch with the people who use WordPress. Andrea Rennick says this:</p>
<blockquote>
<p>&#8220;I heartily believe everyone should spend a bit of time doing support, just to remember what it’s like being a new user. It can also open your eyes to potential issues in the software, in the UX, and just give a better sense of people’s expectations and assumptions.&#8221;</p>
</blockquote>
<p>Even if you’re in the enviable position of employing supporters to do most of the work, as long as you write code or create products for WordPress, take some time to answer support threads and to stay in touch with your users.</p>
<h4>Tools</h4>
<p>Developers have recommended a number of tools.</p>
<p>Use the <a href="https://github.com/Automattic/developer">Developer Tools</a> plugin from Automattic to eliminate all notices, especially deprecated notices. You’ll see a performance boost on websites that get a lot of traffic. <a href="http://zippykid.com">Vid Luther</a> points out that you slow down your side by 20 milliseconds for every notice your code throws out, and 40 milliseconds for every deprecated notice your code throws out. “Even if you have error reporting turned off,” says Vid, “it’s still shitty code.”</p>
<p><a href="http://tri.be/">Timothy Wood</a> recommends using <a title="Sublime Text - Download" href="http://www.sublimetext.com/2">SublimeText2</a> as your development IDE. It’s cross-platform, lightweight and fast, and it improves code. “The goal of a good developer,” says Timothy, “is to be efficient in the code and to spend time using thought instead of (brute) code force.” He keeps a <a href="https://gist.github.com/3418928">list of SublimeText2 add-ons</a> that he finds useful.</p>
<h3>Managing Your Website</h3>
<h4>Keep Your Website Secure</h4>
<p>Keeping your WordPress website secure is important. I wrote about this a few months ago, <a title="Common WordPress Malware Infections" href="http://wp.smashingmagazine.com/2012/10/09/four-malware-infections-wordpress/">highlighting the types of attacks</a> that a website could come under. The little guys aren’t the only ones who get hit; huge websites are susceptible, too. Here are <a href="http://dre.im">Dre Armeda</a>’s top tips for keeping your website secure:</p>
<ol>
<li>Don’t leave outdated software on your server, including old installations that you no longer use. If it’s not in use, remove it. If it’s outdated and you need it, update it.</li>
<li>Limit access. Not everyone needs to be an admin, and <strong>not everyone needs FTP or SSH access</strong>. Give folks enough access to do their job, nothing more. When they are done, remove access. This should include every account on the server that has access ranging from WordPress to the server.</li>
<li>Managing passwords is key. Using 12345 is not a good idea. Use different passwords for your accounts, and use a lot of characters, including numbers, symbols and both cases. Using a password manager where possible is also wise.</li>
</ol>
<p>You’re going to feel stupid if you work professionally with WordPress and you get hacked. “This applies to everyone,” says Dre, “and I think it is even more important for WordPress pros. You don’t want to be in a position where you’re hacked or infected with malware because you weren’t taking care of the common sense basics. Be a pro, be a leader. Minimize the risk of security issues for you and your users.”</p>
<h4>Back Up Your Website</h4>
<p>Good backup practices are really important. What if your website is hacked or your server fails? <a href="http://wpbeginner.com">Syed Balkhi</a> recommends not simply relying on regular database backups either. Without all of your other data, such as images and plugins, your backup is incomplete. Syed recommends a service such as <a href="http://vaultpress.com/">VaultPress</a> or <a href="http://ithemes.com/purchase/backupbuddy/">BackupBuddy</a>. As <a href="http://envato.com">Collis Ta’eed</a> points out, you should “test regularly, and make sure you do a decent verification to ensure the backup is actually, completely, fully there and working. You don’t want to find out your backup wasn’t working… on the day you need it.”</p>
<h3>Running Your Business</h3>
<h4>Collaborate in Business</h4>
<p><a href="http://wysija.com">Kim Gjerstad</a> points out that the WordPress economy is a bit of a gold rush right now. People are rushing in, setting up businesses and making money. People assume that they should keep ideas to themselves, otherwise people will steal them. In reality, once you start to scale your business, you should start collaborating. The only way to do this is to start talking to other developers and business people. “Nobody’s really going to steal your ideas,” says Kim. “It takes a year to two years to become profitable in many start-ups, so it’s not like your idea is going to be stolen overnight. Go find the right people; talk to the right people.”</p>
<p>Similar advice comes from <a href="http://page.ly">Josh Strebel</a>, who recommends collaborating regularly, but choosing your partners carefully.</p>
<blockquote>
<p>&#8220;It is good practice to collaborate as often as possible to avoid the duplication of effort and gain a wider audience for your wares. However, be diligent about who you choose to hitch your wagon to. Not all partnerships are in the best interest of both parties from a public relations or economic viewpoint.&#8221;</p>
</blockquote>
<h4>Know Your Mobile Audience</h4>
<p>More and more people are using portable devices to access the Internet. So, we can’t just build websites for big screens anymore. <a href="http://www.isaackeyet.com/">Isaac Keyet</a> is the lead for the <a href="http://make.wordpress.org/mobile/">WordPress.org Mobile Group</a>. He says:</p>
<blockquote>
<p>&#8220;We constantly hear how important mobile is, and how people are using their portable devices more and more to access the Internet. But just how this happens varies widely from continent to continent, country to country. If you want to target developing countries, a responsive theme or app may not be enough &mdash; you may have to consider a very basic layout and/or a mobile site to gain full traction.</p>
<p>Other parts of this world do not speak English at all. If your site is not translated correctly, you’ll miss out. It’s a global world and mobile devices have democratized people’s ability to access the Internet.&#8221;</p>
</blockquote>
<h4>Reduce Support Load</h4>
<p>In addition to providing support, make an effort to reduce your support load. To do this <a href="http://www.fredericktownes.com/">Frederick Townes</a> recommends consistency. “Cultivating success,” he says, “is the result of countless small (and sometimes large) victories that occur in aggregate and culminate in some outcome.”</p>
<p>By reducing your support load, you can <strong>spend more time creating value for customers</strong>. Frederick suggests the following ways to achieve this:</p>
<ul>
<li>Create secure, well-documented and reliable code.</li>
<li>Pick the right tools for the job.</li>
<li>Remember that users don’t read manuals, so design usable interfaces with pointers, tooltips and captions.</li>
<li>Localize wherever possible.</li>
<li>Make FAQs and canned responses available.</li>
<li>Iterate on feature requests.</li>
<li>Nurture advocates who love your project and who will help others and figure out how to get new advocates.</li>
</ul>
<h4>Find a Niche</h4>
<p><a href="http://andrewnorcross.com/">Andrew Norcross</a> points out that WordPress has a lot of venues for people to use their skill set. Expand your own skills, while maintaining a strong focus. This could be in themes, plugins, front-end design, support, writing, etc. You could focus on developing with a particular framework, such as Genesis, or with the products of a particular theme shop, such as WooThemes. As <a href="http://www.bluelimemedia.com/">Christine Rondeau</a> puts it:</p>
<blockquote>
<p>&#8220;Saying you build WordPress sites is like saying you build houses. It’s simply not clear enough, and you need to drill down and be really clear about your niche. It’s also important that your niche brings you joy; otherwise, there’s no point.&#8221;</p>
</blockquote>
<h4>Educate Your Clients</h4>
<p><a href="http://halfelf.org/">Mika Epstein</a> notes that one of the most common reasons she hears people give for why they can’t do the right thing is, “My client doesn’t want it.” Her reply is, “It’s time to educate your clients.” Don’t let your clients force you into making bad choices. Remember that you are the expert &mdash; that is why they are paying you.</p>
<p>Mika has two recommendations for dealing with clients in this situation:</p>
<ul>
<li>Educate them on why what they’re doing is bad.</li>
<li>Make it easier for them to do the right thing for themselves.</li>
</ul>
<p>By educating them and creating the right tools, you make it easier for them to avoid link scams, SEO black hats and other bad practices. This makes the Web better for everyone.</p>
<h3>Get Involved In The Community</h3>
<p>Whether you’re a beginner or a pro, getting involved in the community is a great way to hone your skills. <a href="http://thewpvalet.com">Mason James</a> suggests getting involved with <a href="http://core.trac.wordpress.org">Trac</a>. If something doesn’t work, report it! The more feedback is provided, the quicker the software will progress.</p>
<p>Communicate with other members of the community. <a href="http://pippinsplugins.com">Pippin Williamson</a> says that he loves a lot of different software, but most of them are just pieces of software, “whereas WordPress is a piece of software that keeps me involved with dozens (or hundreds) of the best people I’ve ever met. It’s this involvement that makes my usage and development work in WordPress so fulfilling.”</p>
<p><a href="http://byotos.com">Paul Gibbs</a> notes that he has become a better developer because he has worked with the people who build the software. He recommends taking every opportunity to meet new people, to collaborate on projects and to talk to your audience and customers.</p>
<p>“WordPress,” says Paul, “gives you a sandbox in which to build your dreams.”</p>
<h4>Contribute</h4>
<p>Once you become involved in the community, look at ways to contribute back to it. <a href="http://markoheijnen.com/">Marko Heijnen</a> says that the learning curve is big and that you’ll learn a lot from others. You’ll also become more tightly integrated in the community. “WordPress has a great karma currency,” says <a href="http://logicalbinary.com/">Tammie Lister</a>. “From contributing to passing on what you learn, you’ll reap the rewards.”</p>
<p><a href="http://en.wp.obenland.it/">Konstantin Obenland</a> points out that there are plenty of ways to get involved in WordPress. You don’t just have to get involved with core &mdash; you could contribute to the <a href="http://make.wordpress.org/themes/">Theme Review Team</a>, for instance, where you’ll enhance your knowledge of best practices. <a href="http://kovshenin.com/">Konstantin Kovshenin</a> says:</p>
<blockquote>
<p>&#8220;Get involved. Follow WordPress development, read the trac, follow changesets, follow weekly dev chats. Study the core contributor handbook, help with beta testing, help reproduce trac issues, submit a patch, write a unit test, go to a WordPress event (meetups, WordCamps, etc.), organize a WordPress event, spread the word and knowledge, blog about your experiences.&#8221;</p>
</blockquote>
<h3>Learn</h3>
<p>“You’re never too smart to learn,” says <a href="http://theandystratton.com/">Andy Stratton</a>. “In fact, the smartest people don’t know everything; they just know when to ask questions and learn.” WordPress is vast, and there is always more to learn. Andy suggests making a list of things you want to learn in one month, two months, six months and twelve months. “Speak at a WordCamp, build a custom widget, work with the HTTP API, create custom rewrite rules, etc. At least every three months, you should be able to say you’ve accomplished or learned something new.”</p>
<h4>Do Peer Review</h4>
<p>“Peer review is one of the best things you can do for your development workflow,” says <a href="http://japh.com.au/">Japh Thomson</a>. Ask a trusted friend or colleague to look over your plugin, theme or functionality. Japh outlines the ways that this helps:</p>
<ol>
<li>Your reviewer could remind you of any best practices that you might not have been aware of or had forgotten about during the development process.</li>
<li>Your reviewer could also let you know about a <strong>better approach</strong> that you hadn’t thought of.</li>
<li>Your development will benefit just from your knowing that someone else is looking at your code!</li>
</ol>
<p>Japh adds:</p>
<blockquote>
<p>&#8220;If you think this is something that those holding the purse strings might consider an unnecessary expense, consider integrating it with other parts of the process &mdash; such as documentation, where the reviewer creates documentation as they review, and also knowledge sharing, so that at least one other developer on your team knows and understands the code you’ve written (you know, the whole “bus factor”).&#8221;</p>
</blockquote>
<h4>Be Open to Criticism</h4>
<p>Whoever you are, whatever profession you’re in, taking criticism can be hard &mdash; especially if you’ve worked really hard on something and someone points out its flaws and tells you that you’re doing it wrong. Yet the nature of an open-source community is for people to take what you’ve done and improve upon it. <a href="http://kaileylampert.com/">Kailey Lampert</a> talks about this from the perspective of a developer:</p>
<blockquote>
<p>&#8220;We can get to be really proud of code we’ve put a lot of time into. And we love it when someone agrees that our code is clever and clean. But believe it or not, sometimes we make mistakes, and people notice. It can be almost heartbreaking to hear someone tell you all the ways you could have made your code better. It may be tempting to never release code again for fear of being embarrassed, but with that attitude, how can we grow? Be humble, take the advice, learn from it, and make new mistakes next time.&#8221;</p>
</blockquote>
<h4>Read the News</h4>
<p>There are a lot of ways to stay up to date on what’s happening with WordPress. <a href="http://zed1.com/journalized/">Mike Little</a> recommends subscribing to the <a href="http://make.wordpress.org">Make WordPress.org</a> blogs, and even the <a href="http://codex.wordpress.org/Mailing_Lists#Trac">Trac mailing list</a>. “Keep an eye on them, and learn what is coming up,” he says. “It may affect the work you are doing now, and certainly will in the future. If you are still writing the same code now that you were writing a year ago, you are out of date.”</p>
<p>By following other WordPress developers on Twitter and GitHub, you’ll find scripts and tools that others have written. <a href="http://www.jaredatchison.com/">Jared Atchison</a> has developed his own set of tools but finds that the tools others share often do it better. <a href="http://stephanis.info/">George Stephanis</a> and <a href="http://kpayne.me/">Kurt Payne</a> have some great suggestions on places you can tap into to get information:</p>
<ul>
<li>Attend the weekly <a href="http://make.wordpress.org/core/weekly-developer-chats/">#wordpress-dev</a> and <a href="http://make.wordpress.org/ui/">#wordpress-ui</a> chats.</li>
<li>Sign up for the <a title="wp-hackers Info Page" href="http://lists.automattic.com/mailman/listinfo/wp-hackers">wp-hackers</a> mailing list.</li>
<li>Read the core development <a href="https://irclogs.wordpress.org/">chat logs</a>.</li>
<li>Follow WordCamp hashtags.</li>
<li>Meet people face to face at <a title="WordCamp Central | WordCamp is a conference that focuses on everything WordPress." href="http://central.wordcamp.org/">WordCamps</a> and <a title="WordPress Meetup Groups - WordPress Meetups" href="http://wordpress.meetup.com/">meetups</a>.</li>
<li>Add yourself as a core contributor (CC) to any <a title="WordPress Trac" href="http://core.trac.wordpress.org/">Trac</a> tickets that you’re interested in.</li>
</ul>
<p>Staying up to date on WordPress will help you improve over time.</p>
<p><a href="http://dougal.gunters.org/">Dougal Campbell</a> has this to say:</p>
<blockquote>
<p>&#8220;If you stay isolated and develop in a vacuum, you are going to miss out on all sorts of useful discoveries. I try to keep myself on top of things, and I can’t tell you how many times I’ve seen a blog post or tweet that made me say, “I didn’t know about that function!”&#8221;</p>
</blockquote>
<p>In addition to keeping up with what’s happening on WordPress, <a href="http://upthemes.com">Chris Wallace</a> stresses the importance of keeping up with new plugins. You need to know whether the plugins you use do what they do best. You never know when a new plugin will appear that surpasses all of its competitors.</p>
<h3>Do What Makes You Happy</h3>
<p>If you work with WordPress, then you’re probably in the happy position of being inundated with work. There is great demand for people with WordPress expertise, so make sure to <strong>get paid to do what you like doing</strong>. Market yourself to the types of clients who will provide you with work that makes you happy. <a href="http://boone.gorg.es/">Boone Gorges</a> talks about his experience:</p>
<blockquote>
<p>&#8220;I’m passionate about education and academic institutions, and about building free social software that helps these kinds of organizations do their work better. So, first of all, I market myself to educational institutions, and tend to turn down most work outside of that area.</p>
<p>Then, I only take on projects that either will become standalone free software projects or will contribute back to a project like BuddyPress. This strategy helps me to make the most of my time, since I’m getting paid to do work that, in many cases, I would eventually have done in my free time.&#8221;</p>
</blockquote>
<p>Find clients in the field that you’re passionate about. In the end, you’ll be happier, and you’ll do work that you find rewarding.</p>
<h4>Some Final Tips</h4>
<p>Below are some final tips that didn’t quite fit elsewhere.</p>
<p><a href="http://tinybit.co.jp/">Seisuke Kuraishi</a> says:</p>
<blockquote>
<p>&#8220;Do ego searching. In most cases, people won’t come directly to you to tell you the problem with your plugin or theme.&#8221;</p>
</blockquote>
<p><a href="http://danieldvork.in/">Daniel Dvorkin</a> says:</p>
<blockquote>
<p>&#8220;Performance and ability to scale shouldn’t come after the fact. It’s a mentality you should have while developing. If you’re planning to make your code public, always assume that your code already needs to scale.&#8221;</p>
</blockquote>
<p><a href="http://coveredwebdesign.com">Mark Jaquith</a> says:</p>
<blockquote>
<p>&#8220;If you get a lot of comments, enable and learn the keyboard shortcuts for moderating comments. (This is a per-user option, so set this in your profile.) This will save you a lot of time!&#8221;</p>
</blockquote>
<p><a href="http://woothemes.com/">Magnus Jepson</a> says:</p>
<blockquote>
<p>&#8220;Use a child theme when customizing a theme, and keep the parent theme updated, along with WordPress and all of your plugins. Minimize the number of plugins you have activated, and delete any inactive plugins for security reasons.&#8221;</p>
</blockquote>
<p>Got your own tips? Let us know in the comments!</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Siobhan McKeown for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/03/20/practical-tips-from-top-wordpress-pros/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/first-hand-advice-practical-tips-from-top-wordpress-pros/" data-text="First-Hand Advice: Practical Tips From Top WordPress Pros"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/first-hand-advice-practical-tips-from-top-wordpress-pros/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Ffirst-hand-advice-practical-tips-from-top-wordpress-pros%2F&amp;title=First-Hand%20Advice%3A%20Practical%20Tips%20From%20Top%20WordPress%20Pros" id="wpa2a_32"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/first-hand-advice-practical-tips-from-top-wordpress-pros/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Considering Various Approaches: A Guide To WordPress Theme Options</title>
		<link>http://drewmturner.com/considering-various-approaches-a-guide-to-wordpress-theme-options/</link>
		<comments>http://drewmturner.com/considering-various-approaches-a-guide-to-wordpress-theme-options/#comments</comments>
		<pubDate>Wed, 13 Mar 2013 14:05:12 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=697</guid>
		<description><![CDATA[&#160;&#160; At the recent WordCamp Edinburgh, I took part in a panel discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that there isn’t a one-size-fits-all answer and that the best method depends on the needs of the website and the capabilities of [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>At the recent <a href="http://2012.edinburgh.wordcamp.org/">WordCamp Edinburgh</a>, I took part in a panel discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that <strong>there isn’t a one-size-fits-all answer</strong> and that the best method depends on the needs of the website and the capabilities of the developer.</p>
<p>But if you’re starting out building WordPress themes or want to develop a system for building them more efficiently or robustly, how do you decide which approach to take? In this article, we’ll briefly describe how WordPress themes work and then look at some of the different approaches to developing them, with tips on which approach might be most suitable for your website and circumstances.</p>
<h3>How Does A WordPress Theme Work?</h3>
<p>In WordPress, themes drive a website and determine what it contains, how it behaves and what it looks like. The theme is separate from the content, which is held in the database. This means you can use the same theme on more than one website, regardless of the content of the websites &mdash; which you might already be doing if you’ve downloaded themes from <a href="http://wordpress.org/extend/themes/">WordPress’ theme repository</a>.</p>
<p>A theme consists of a number of template files, all stored in the theme folder, which you’ll find in <code>wp-content/themes</code> in your WordPress installation. Every WordPress theme has to include <strong>at least two files</strong>: <code>index.php</code> and <code>style.css</code>. The index file defines what content is displayed by the theme, and the style sheet (you guessed it) styles it, as well as contains meta information about the theme that WordPress uses to make the theme work correctly.</p>
<p>Actually, most themes have a few additional files:</p>
<ul>
<li><code>header.php</code><br />
Contains the <code>&lt;head&gt;</code> section of each page, plus the header of the website’s design.</li>
<li><code>sidebar.php</code><br />
Contains the sidebar, including any widget areas.</li>
<li><code>footer.php</code><br />
Contains the footer, which may or may not have widget areas.</li>
<li><code>functions.php</code><br />
Contains any functions that are specific to your theme. You can find out about the functions file <a href="http://codex.wordpress.org/Theme_Development#Functions_File">in the WordPress Codex</a>.</li>
<li>Files that contain the <a href="http://codex.wordpress.org/The_Loop">loop</a>, which call the content from the database. Depending on which part of the website you’re working in, this could be one of a number of files:
<ul>
<li><code>page.php</code><br />
For static pages</li>
<li><code>single.php</code><br />
For individual posts (blog posts, for example)</li>
<li><code>index.php</code>, <code>archive.php</code>, <code>category.php</code>, etc.<br />
For pages that list a number of posts</li>
</ul>
</li>
</ul>
<p>Yoast has written a great <a href="http://yoast.com/wordpress-theme-anatomy">visual representation of how theme files work</a>, and the <a href="http://codex.wordpress.org/Theme_Development">WordPress Codex</a> includes a detailed description of themes, including details on the various files and when they are called.</p>
<p>I would argue that the style sheet, however, is the most important file and the one you are likely to begin with, because a “child theme” (more of that shortly) needs a style sheet even if it contains nothing else. The style sheet contains important meta information about the theme itself, which is commented out before all of the styles. Below are the opening comments for WordPress’ current default theme, <a href="http://wordpress.org/extend/themes/twentyeleven">Twenty Eleven</a>:</p>
<pre><code class="language-css">/*
   Theme Name: Twenty Eleven
   Theme URI: http://wordpress.org/extend/themes/twentyeleven
   Author: the WordPress team
   Author URI: http://wordpress.org/
   Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. …
   Version: 1.3
   License: GNU General Public License
   License URI: license.txt
   Tags: dark, light, white, black, …
*/</code></pre>
<p>This information is commented out so that it isn’t read by browsers, but it is read by WordPress, and it provides information to anyone using your theme. We’ll come back to this shortly when we look at how to create a child theme.</p>
<p>Now that you know how themes work, the next step is to figure out how to go about building your own. Before starting, it would be worth considering some points that will help you make that decision.</p>
<h3>What To Consider When Developing A WordPress Theme?</h3>
<p>Before deciding which approach to take to develop your theme, identify your constraints. These likely include the following:</p>
<ul>
<li><strong>Time</strong><br />
How much time do you have to develop your theme, or to learn how to do it?</li>
<li><strong>Budget</strong><br />
This is related to time but also has to do with whether you can afford to pay for a premium theme or a theme framework.</li>
<li><strong>Capability</strong><br />
How familiar are you with theme development, with CSS and PHP and with how themes work? If you’re not familiar, how much do you want to learn?</li>
<li><strong>Future-proofing</strong><br />
Will your theme need to be updated in future? Will other developers be working on it in addition to you? If so, then your approach will need to be as robust as possible.</li>
<li><strong>Repetition</strong><br />
Do you see yourself developing a number of similar themes in future? If so, your approach will have to allow for code to be reused.</li>
</ul>
<p>We’ll revisit these considerations at the end of the article and identify which development options are most suitable for various situations.</p>
<h3>Theme Development: Your Options</h3>
<p>A few options are available for developing your theme or themes, and investigating them before you roll your sleeves up and start coding would be worthwhile. Picking the right approach will result in a better theme, with more robust code, and it will minimize the amount of revisions you’ll have to do later. It will also help you to build the theme more efficiently.</p>
<p>The options we’ll look at here are:</p>
<ul>
<li>Build a theme from scratch,</li>
<li>Edit (or “hack,” some might say) an existing theme,</li>
<li>Use the theme customizer to tweak an existing theme,</li>
<li>Create a child theme to make changes to an existing theme,</li>
<li>Create your own parent theme (using one of the approaches above) and child themes,</li>
<li>Use a theme framework.</li>
</ul>
<h4>1. Build A Theme From Scratch</h4>
<p>This approach is the most difficult if you’re inexperienced. But if you’re a seasoned WordPress developer, it will give you the <strong>most control</strong>. It might be the most appropriate method if you’re importing HTML from an existing static website that is being upgraded to WordPress with no other changes.</p>
<p>However, when transferring a website to WordPress, conducting a review of it as part of the process, rather than simply copying the code across, is a good idea. If you are copying a static website, you’ll need to keep a close eye on your code to ensure that it’s clean, efficient and valid.</p>
<h4>2. Edit (or Hack) an Existing Theme</h4>
<p>This is how most people start with WordPress theme development: in working on a theme that they’ve downloaded, they see that some styling isn’t quite right, so they delve into the style sheet and make some edits. Starting like this is tempting because it feels like a quick and easy way to achieve the effect you want. But <strong>there are some dangers</strong>:</p>
<ul>
<li>If you ever switch themes, that update will override any changes you’ve made.</li>
<li>It’s easy to add repetitive code by adding new styles lower down in the style sheet that override styles higher up, rather than removing what you don’t need.</li>
<li>The website could end up with a lot more code than it needs.</li>
<li>If the theme isn’t well coded or commented to begin with, you could get yourself into a bigger mess and find that you have to make a lot of fixes.</li>
</ul>
<p>However, hacking a theme can work if you <strong>go into it with your eyes open</strong>. It may be an option if the following are true:</p>
<ul>
<li>The theme you&#8217;re using is well written, valid and commented (e.g., the default WP theme, Twenty Eleven);</li>
<li>The changes you’re making are so drastic that you wouldn’t need to update the original theme;</li>
<li>You understand the PHP and CSS contained in the theme and are comfortable editing, adding to and removing it without breaking the theme.</li>
</ul>
<p>If you do decide to go down this route, keeping a backup of the original theme and commenting your code thoroughly are important. I would also advise commenting out any code that you don’t want and then testing to see what happens before deleting anything.</p>
<h4>3. Use the Theme Customizer to Tweak an Existing Theme</h4>
<p>The theme customizer was released with WordPress 3.4. It gives you the option to customize a theme without writing any code, simply by using a WYSIWYG interface. Depending on how well the customizer is written into the theme itself, you can use it to change images, titles, colors and even the layout. Expect to see more themes with the customizer integrated into them.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/08/wordpress_theme_customizer.jpg"><img class="size-full wp-image-106917" title="Using the WordPress theme customizer with the Twenty Ten theme." src="http://media.smashingmagazine.com/wp-content/uploads/2012/08/wordpress_theme_customizer.jpg" alt="Using the WordPress theme customizer with the Twenty Ten theme." width="500" height="300" /></a><br />
<em>Using the WordPress theme customizer with the Twenty Ten theme.</em></p>
<p>The theme customizer stores your changes in a separate file, not in the theme’s style sheet, so there will be repetitive code.</p>
<p>For more information, take a look at Otto on WordPress’ <a href="http://www.youtube.com/watch?v=vD8v6u3noPg">video tutorial</a> or <a href="http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/">guide to integrating the theme customizer into your own themes</a>.</p>
<h4>4. Create a Child Theme to Make Changes to an Existing Theme</h4>
<p>This approach is similar to editing an existing theme, but safer. It consists of creating a brand new theme that is defined as a child of the existing theme. Where your child theme doesn’t have a particular file but the parent theme does, it will use that. Where the child theme does have a file, that file will override the equivalent in the parent. Let’s look at an example:</p>
<table id="price_list">
<tbody>
<tr>
<th>Parent theme files</th>
<th>Child theme files</th>
</tr>
<tr>
<td>
<ul>
<li><code>style.css</code></li>
<li><code>page.php</code></li>
<li><code>single.php</code></li>
<li><code>archive.php</code></li>
<li><code>header.php</code></li>
<li><code>sidebar.php</code></li>
<li><code>footer.php</code></li>
</ul>
</td>
<td>
<ul>
<li><code>style.css</code></li>
<li><code>page.php</code></li>
<li><code>header.php</code></li>
</ul>
</td>
</tr>
</tbody>
</table>
<p>In the example above, WordPress would use the following files to deliver content:</p>
<ul>
<li><code>style.css</code> from the child theme,</li>
<li><code>page.php</code> from the child theme,</li>
<li><code>single.php</code> from the parent theme,</li>
<li><code>archive.php</code> from the parent theme,</li>
<li><code>header.php</code> from the child theme,</li>
<li><code>sidebar.php</code> from the parent theme,</li>
<li><code>footer.php</code> from the parent theme.</li>
</ul>
<p>You can see how this would be useful if you wanted to use most of the parent theme’s markup but change the content of the header (adding, say, your logo and address details) and any static pages (maybe changing the way that meta data is displayed).</p>
<p>The one <strong>file that every child theme must have</strong> in order to work is the style sheet, because it contains the information that WordPress needs to make the child theme function correctly. To do this, add some extra code to the style sheet’s comments:</p>
<pre><code class="language-css">/*
	Theme Name: Twenty Eleven Child Theme
	Theme URI: http://example.com
	Author: you!
	Author URI: http://example.com/
	Description:  Child theme based on Twenty Eleven.
	Template: twentyeleven
	Version: 1.0
	Tags: your tags (optional)
 */
@import url("../twentyeleven/style.css");</code></pre>
<p><strong>Can you spot the extra lines?</strong> The first one is:</p>
<pre><code class="language-css">Template: twentyeleven</code></pre>
<p>This line tells WordPress that the theme is a child theme and that Twenty Eleven is its parent. You would add the name of the parent theme’s directory, not its full name.</p>
<p>And the second one:</p>
<pre><code class="language-css">@import url("../twentyeleven/style.css");</code></pre>
<p>This line tells the browser to load the parent theme’s style sheet before rendering any of the styles in the current style sheet. This frees you from having to duplicate any styles in the parent theme that you want to use.</p>
<p>So, that’s how child themes work. But when is this <strong>the best approach?</strong> I would suggest using it in the following cases:</p>
<ul>
<li>You already have a theme (to be used as the parent) that contains most of what you need for your theme;</li>
<li>You want to be able to update your parent theme (for example, when theme updates are released following a WordPress update);</li>
<li>You don’t want to get tied up in knots from hacking an existing theme;</li>
<li>You want the option to revert to the parent theme or to develop another similar theme in future (which would be a new child theme);</li>
<li>You’re developing a number of similar websites with some minor stylistic or content differences (I did this when building similar websites for a client that owned multiple companies);</li>
<li>The difference between your child and parent themes is not so huge that you need to start from scratch, or not so huge that your child theme’s code will override anything affected by updates to the parent theme.</li>
</ul>
<h4>5. Create Your Own Parent Theme (Using One of the Approaches Above) and Child Themes</h4>
<p>The situation I just alluded to, of building a set of websites for a client with multiple companies, is an occasion when you might create a parent theme and then set up child themes for individual websites. You might also want to do this in the following cases:</p>
<ul>
<li>You plan to develop a lot of websites with similar content and markup in future (not just for one client);</li>
<li>You manage a lot of websites and have to dip into each of them regularly, and you want the code to be very similar;</li>
<li>You’re comfortable creating your own parent theme, editing the code to create a robust parent that will work well with child themes.</li>
</ul>
<p>If you decide to adopt this approach, you could either build your parent theme from scratch or hack an existing theme. For most of the websites I build, I use a parent theme that I developed by hacking the Twenty Ten theme, the former default theme for WordPress. I made so many changes that I no longer needed to activate updates to the original theme. I was also comfortable with the code in the theme and wanted to make significant changes to it, reducing the code, restructuring it to <strong>fit the way I work</strong> and removing code that I knew I wouldn’t need.</p>
<p>You could also create a child theme based on an existing theme and then create child themes for that &mdash; effectively, grandchildren of the original theme. The advantage of this is that you will not overwrite the code in the original theme, while having the flexibility to make modifications to the child theme that will be passed down to the grandchild themes. A word of warning here, though: with three themes in use, it’s easy to get confused about what’s happening, and you could end up with a lot of unnecessary code.</p>
<h4>6. Use a Theme Framework</h4>
<p>The final option is one used by thousands of WordPress users and developers. A number of theme frameworks exist that you can use as a kind of parent theme, but with much more functionality, and in some cases with the option to make quite fancy layout and style changes without writing a line of code. Some frameworks are free, while others are premium. They have been <a href="http://wp.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/">reviewed in detail already on Smashing Magazine</a>, but the main ones are listed below.</p>
<p><strong>Free WordPress frameworks:</strong></p>
<ul>
<li><a href="http://themehybrid.com/">Theme Hybrid</a> includes a myriad of hooks and widget areas to help you customize your themes. It also has some child themes available. The framework and child themes are all free, but if you want support, you’ll have to pay for it by registering on Theme Hybrid’s website. Working with it can be quite complex unless you understand PHP or use one of the child themes.</li>
<li><a href="http://wonderflux.com/">Wonderflux</a> is based on a flexible grid system. It has options for adjusting layout and styles without having to write code, and it includes a lot of hooks and widget areas. It’s free to use and supported via the WordPress forums.</li>
<li><a href="http://carringtontheme.com/">Carrington</a> is the most established of the free frameworks, and it has a number of child themes.</li>
<li><a href="http://themeshaper.com/thematic/">Thematic</a> is developed by Automattic, which develops WordPress itself. It includes a number of hooks, filters and widget areas.</li>
</ul>
<p><strong>Premium WordPress frameworks:</strong></p>
<ul>
<li>Its developers describe <a href="http://www.studiopress.com/">Genesis</a> as “the industry standard.” It comes with a wide variety of child themes, options to customize without writing code, and SEO features.</li>
<li><a href="http://diythemes.com/">Thesis</a> is the other big premium framework, and it also gives you the option to customize child themes without writing code.</li>
</ul>
<h3>Summary: Choosing An Approach</h3>
<p>Chances are that, having read this, you’ve got an idea of which approach to go with. But in case you’re still scratching your head, here’s a summary of when each method is appropriate:</p>
<table id="price_list">
<tbody>
<tr>
<th>Approach</th>
<th>Time</th>
<th>Cost</th>
<th>Capability</th>
<th>Future-proofing</th>
<th>Repetition</th>
</tr>
<tr>
<td>Build from scratch</td>
<td>High</td>
<td>Low</td>
<td>High</td>
<td>Low</td>
<td>Low</td>
</tr>
<tr>
<td>Hack existing theme</td>
<td>Low</td>
<td>Low</td>
<td>Medium</td>
<td>Low</td>
<td>Low</td>
</tr>
<tr>
<td>Use theme customizer</td>
<td>Low</td>
<td>Low</td>
<td>Low</td>
<td>Low</td>
<td>Low</td>
</tr>
<tr>
<td>Create child theme based on existing parent</td>
<td>Medium</td>
<td>Low</td>
<td>Medium</td>
<td>High</td>
<td>High</td>
</tr>
<tr>
<td>Create parent theme</td>
<td>High</td>
<td>Low</td>
<td>High</td>
<td>High</td>
<td>High</td>
</tr>
<tr>
<td>Theme framework (free)</td>
<td>Medium</td>
<td>Low</td>
<td>Medium</td>
<td>High</td>
<td>High</td>
</tr>
<tr>
<td>Theme framework (premium)</td>
<td>Medium</td>
<td>High</td>
<td>Low to medium</td>
<td>High</td>
<td>High</td>
</tr>
</tbody>
</table>
<p>All in all, each approach has its place; it just depends on the website and on you. The important thing is to <strong>choose an approach after having weighed the pros and cons</strong> &mdash; not just to dive in and have a go, only to discover that you’ve broken a theme or that you’ve created a lot of rework for yourself.</p>
<p>And as always, whatever you decide, don’t forget to keep backups!</p>
<p><em>(al)</em></p>
<p><!-- deleted style tag --></p>
<hr />
<p><small>© Rachel McCollin for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/03/13/a-guide-to-wordpress-theme-options/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/considering-various-approaches-a-guide-to-wordpress-theme-options/" data-text="Considering Various Approaches: A Guide To WordPress Theme Options"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/considering-various-approaches-a-guide-to-wordpress-theme-options/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fconsidering-various-approaches-a-guide-to-wordpress-theme-options%2F&amp;title=Considering%20Various%20Approaches%3A%20A%20Guide%20To%20WordPress%20Theme%20Options" id="wpa2a_36"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/considering-various-approaches-a-guide-to-wordpress-theme-options/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
		<item>
		<title>Adapting To The Ink: Tips And Tricks For Print Style Sheets</title>
		<link>http://drewmturner.com/adapting-to-the-ink-tips-and-tricks-for-print-style-sheets/</link>
		<comments>http://drewmturner.com/adapting-to-the-ink-tips-and-tricks-for-print-style-sheets/#comments</comments>
		<pubDate>Fri, 08 Mar 2013 12:35:41 +0000</pubDate>
		<dc:creator>Drew M. Turner</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Smashing Magazine Feed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://drewmturner.com/?p=694</guid>
		<description><![CDATA[&#160;&#160; Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this [...]]]></description>
				<content:encoded><![CDATA[<table width="650">
<tr>
<td width="650">
<div style="width:650px;"><img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br /><a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a></div>
</td>
</tr>
</table>
<p>Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. <strong>In the real world</strong>, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation.</p>
<p>Web developers can take several steps to bridge the gap between the worlds of printers and LCD screens:</p>
<ul>
<li>Treat print as an equal partner in <a href="http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/">adaptive and responsive design</a>.</li>
<li>Print background images and colors, where appropriate.</li>
<li>Add visible URLs or scannable links for easy reference from the printed page.</li>
<li>Use CSS filters to improve the result of printed graphics.</li>
</ul>
<h3>Design For Print, Not Screen</h3>
<p>First, let’s cover the basics. Modern print style sheets are typically placed within a media query:</p>
<pre><code class="language-css">@media print {

}</code></pre>
<p>Recreating the entire CSS for your website is not necessary because the default styles will, on the whole, be inherited by the print query; only the <em>differences</em> need to be defined. Most browsers will automatically reverse colors when printing in order to save toner, but this won’t have the same degree of quality as a handcrafted solution. For best results, <strong>make color changes explicit</strong>. At the very least, a basic print media query should consist of the following:</p>
<pre><code class="language-css">@media print {
   body {
      color: #000;
      background: #fff;
   }
}</code></pre>
<p>While <code>display: none</code> has rightly been <a href="http://laurakalbag.com/display-none/">derided in responsive design</a>, it is entirely appropriate for print style sheets: in most cases, our goal is not to recreate a screenshot of an entire page, but to provide a concise, well-designed print version of it. As a second step, eliminate page elements that are simply irrelevant in print, including navigation bars and background images.</p>
<pre><code class="language-css">/* Default styles */

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}</code></pre>
<p>Writing a print style sheet is one of the few times when you’ll ever use centimeters or inches in CSS. Largely irrelevant to screens, real-world measuring systems become very useful in print. To ensure that you are using the printed page effectively, write CSS to display your content edge to edge, negating any margins or padding that may be present, and balance this with an <code>@page</code> rule:</p>
<pre><code class="language-css">@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   @page {
      margin: 2cm;
   }
}</code></pre>
<p>For content to which users can be expected to add handwritten notes on the page, such as educational material, you might consider increasing the print margin.</p>
<p>We also need to ensure that content is not broken across pages when printed. One obvious step is to prevent headings from being printed at the bottom of the page:</p>
<pre><code class="language-css">h2, h3 {
   page-break-after: avoid;
}</code></pre>
<p>Another rule will prevent images from bleeding over the edge of the printed page:</p>
<pre><code class="language-css">img {
   max-width: 100% !important;
}</code></pre>
<p>A third will ensure that articles always start on a fresh page:</p>
<pre><code class="language-css">article {
   page-break-before: always;
}</code></pre>
<p>Finally, we can prevent large elements, such as unordered lists and images, from being split across multiple pages.</p>
<pre><code class="language-css">ul, img {
   page-break-inside: avoid;
}</code></pre>
<p>While these declarations are not exhaustive, they’re a good start.</p>
<h3>Force Background Images And Colors</h3>
<p>On some websites, such as portfolios, background images and colors are an important visual component. If the user is printing from a WebKit browser (Google’s Chrome or Apple’s Safari), we can force the printer to render the colors as seen on screen (i.e. force any background images and colors to appear on the printed page). Generally speaking, we would do this for color printers, which we can test for in a separate media query:</p>
<pre><code class="language-css">@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}</code></pre>
<p>Sadly, there is (as yet) no immediate equivalent in Firefox, Opera or Internet Explorer.</p>
<h3>Expand External Links For Print</h3>
<p>We can’t (yet) directly interface with a printed page to explore links, so link URLs should be visible on the printed version of the Web page. To keep the page relatively clean, I prefer to expand only outbound links in articles, and suppress internal ones. If you’ve used relative URLs on your website for local links, you can easily do this through an attribute selector and <code>:after</code> pseudo=classes, thus preventing internal links and links around images from being printed:</p>
<pre><code class="language-css">@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" &lt;" attr(href) "&gt; ";
   }
}</code></pre>
<p>Take the following HTML code and content:</p>
<pre><code class="language-markup tmp-html">&lt;p&gt;You’ve explored this &lt;a href="/blog"&gt;website&lt;/a&gt;; now it’s time to &lt;a href="http://www.webplatform.org/"&gt;read other Web development documentation&lt;/a&gt;.&lt;/p&gt;</code></pre>
<p>Here is the printed result:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/01/Screen-Shot-2013-01-13-at-8.58.10-PM.png"><img class="alignnone size-full wp-image-124314" alt="Screen Shot 2013-01-13 at 8.58.10 PM" src="http://media.smashingmagazine.com/wp-content/uploads/2013/01/Screen-Shot-2013-01-13-at-8.58.10-PM.png" width="468" height="101" /></a></p>
<p>One issue is that anchor links and links around images will also be expanded on the printed page. We can fix the anchor links fairly readily with a countermanding CSS rule:</p>
<pre><code class="language-css">article a[href^="#"]:after {
   content: "";
}</code></pre>
<p>Links around images are rather more difficult, because CSS does not currently allow for the selection of an element based on its children. Ideally, links around images would have a class that we could target via CSS. Longer term, CSS4 features a parent selector that will do the job:</p>
<pre><code class="language-css">$a:after &gt; img {
   content: "";
}</code></pre>
<p>CSS4 will also make expanding external links easier:</p>
<pre><code class="language-css">a:not(:local-link):after {
   content:" &lt;" attr(href) "&gt; ";
}</code></pre>
<p>All of these approaches assume that users will continue to type in URLs by hand. A better solution is to make the digital version of the page easier to access by providing a matching QR code.</p>
<h3>Print QR Codes For Easy URL References</h3>
<p>Often regarded as an advertising eyesore, QR codes have their place in certain circumstances. One obvious example is providing an easily-scanned sigil on a printed Web page that enables the user to return to the live version without having to type the URL.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/lizabeth.png"><img class=" wp-image-123957 " alt="Web page printed with a self-referential QR code" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/lizabeth.png" width="744" height="260" /></a><br />
<em>Web page printed with a self-referential QR code. <a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/lizabeth.png">Larger view</a>.</em></p>
<p>To create the matching QR code, we’ll use Google’s Chart API, which has four required components:</p>
<ul>
<li>The kind of chart information we want Google to deliver (<code>qr</code>, in our case);</li>
<li>The rendered size of the QR sigil, in pixels;</li>
<li>The URL to encode;</li>
<li>The form of character encoding to use.</li>
</ul>
<p>We’d typically associate the URL with a heading element at the top of the page:</p>
<pre><code class="language-markup tmp-html">&lt;header&gt;
&lt;h1&gt;Lizabeth’s Salon&lt;/h1&gt;
&lt;h2&gt;Providing Intellectual Stimulation Online Since 2001&lt;/h1&gt;
&lt;/header&gt;</code></pre>
<p>To create the printed result, we’ll provide a margin on the right side of the <code>h1</code> that is large enough for the heading, and then position a QR code in that area:</p>
<pre><code class="language-css">header h1 {
   margin-right: 200px;
   margin-bottom: 2rem;
   line-height: 1.5;
}</code></pre>
<p>Because the QR code will be unique to each page, this would be added as an embedded style sheet:</p>
<pre><code class="language-css">@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150&amp;chl=http://yourdomain.com&amp;choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}</code></pre>
<p>This approach has the downside of forcing the developer to enter a URL individually for each page into the API code. If your Web host is running PHP, you can provide the URL of the current page automatically:</p>
<pre><code class="language-php">@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150
&amp;chl=http://&lt;?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?&gt;
&amp;choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}</code></pre>
<p>For WordPress:</p>
<pre><code class="language-php">@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150
&amp;chl=http://&lt;?phpthe_permalink();?&gt;&amp;choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}</code></pre>
<p>Obviously, both of the solutions above will only work on PHP and WordPress pages.</p>
<h3>Use CSS3 Filters To Improve Print Quality</h3>
<p>Browsers often have issues with printing out banner images, especially if the banners are white against a dark background:</p>
<table>
<tbody>
<tr>
<th>Logo as a solid image</th>
<th>Printed result</th>
</tr>
<tr>
<td><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-300x105.png"><img alt="logo-black-background" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-300x105.png" width="300" height="105" /></a></td>
<td><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-printed-300x80.png"><img alt="logo-black-background-printed" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-printed-300x80.png" width="300" height="80" /></a></td>
</tr>
<tr>
<th>Logo as an alpha-masked PNG</th>
<th>Printed result</th>
</tr>
<tr>
<td><code><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-300x105.png"><img alt="logo-black-background" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-black-background-300x105.png" width="300" height="105" /></a></code></td>
<td><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-transperant-printed-300x87.png"><img class="alignnone size-medium wp-image-123721" alt="logo-transperant-printed" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-transperant-printed-300x87.png" width="300" height="87" /></a></td>
</tr>
</tbody>
</table>
<p>In theory, you could use a CSS sprite to switch between different versions of the logo for print, but that would mean doubling the file size for potentially little benefit. Instead, I recommend using CSS filters (and their SVG equivalent, for Firefox) to invert the image just before it hits the printed page:</p>
<pre><code class="language-css">@media print {
   header {
      background: none;
      color: #000;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}</code></pre>
<p>CSS3 filters do what you’d expect &mdash; invert the colors in header images, turning black to white and vice versa &mdash; but they only work in Chrome and Safari. To cover Firefox, we need a different approach &mdash; the equivalent filter written as a separate SVG file:</p>
<pre>
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
&lt;filter id="negative"&gt;
&lt;feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" /&gt;
&lt;/filter&gt;
&lt;/svg&gt;
</pre>
<p>The workings of the <code>feColorMatrix</code> SVG filter are a little complex to cover here. Much more information can be found in the article “<a href="http://dev.opera.com/articles/view/applying-color-tints-to-web-pages-with-s/">Applying Color Tints to Web Pages With SVG Filters and JavaScript</a> on Dev.Opera.</p>
<p>The result of printing either form of logo (i.e. alpha-masked PNG or solid-black background) is now this:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-inverted-printed-300x91.png"><img alt="logo-inverted-printed" src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/logo-inverted-printed-300x91.png" width="300" height="91" /></a></p>
<h3>Conclusion</h3>
<p>Due in part to the fact that printer use is <strong>not tracked by website analytics software</strong> and, thus, lacks strong metrics (although achieving this is possible, too, which we may discuss in a future article), print tends to be broadly ignored by Web developers. This is somewhat understandable, because most of the time we only read and browse pages online. As a result, developers tend to develop websites for the screens and devices in front of them, rather than for the printer at the other end of the office.</p>
<p>On the other hand, even if people only occasionally need to print something from the Web, it would be ideal if the page design adapted to the printer, just as modern websites adapt to various screen sizes and devices. Print should be considered another aspect of adaptive design, usability and accessibility, and an equally important part of Web development.</p>
<p>By treating print as another aspect of adaptive design, we fulfill the needs of more website users &mdash; and at the same time, save ink, paper and other resources, all of which are important aspects of <strong>sustainable design</strong>.</p>
<h4>More Resources</h4>
<p>A List Apart has a long and laudable history of supporting print style sheets through its articles and tutorials. While some of the following resources are now fairly old, they remain relevant to anyone who wishes to explore print as an equal partner in Web design.</p>
<ul>
<li><a href="http://www.alistapart.com/articles/goingtoprint/">CSS Design: Going to Print</a>, Eric Meyer (10 May 2002)</li>
<li><a href="http://www.alistapart.com/articles/improvingprint/">Improving Link Design for Print</a>, Aaron Gustafson (19 September 2005)</li>
<li><a href="http://www.alistapart.com/articles/building-books-with-css3/">Building Books With CSS3</a>, Nellie McKesson (12 June 2012)</li>
<li><a href="http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/">How To Set Up A Print Style Sheet</a>, Christian Krammer (24 November 2011)</li>
</ul>
<p><em>Source of image on front page: <a href="http://bottlerocketcreative.com/">Bottlerocket Creative</a>.</em></p>
<p><em>(al)</em></p>
<hr />
<p><small>© Dudley Storey for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2013.</small></p>
<p>via Smashing Magazine Feed http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/</p>
<p><a class="a2a_button_twitter_tweet addtoany_special_service" data-count="horizontal" data-url="http://drewmturner.com/adapting-to-the-ink-tips-and-tricks-for-print-style-sheets/" data-text="Adapting To The Ink: Tips And Tricks For Print Style Sheets"></a><a class="a2a_button_google_plusone addtoany_special_service" data-href="http://drewmturner.com/adapting-to-the-ink-tips-and-tricks-for-print-style-sheets/"></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fdrewmturner.com%2Fadapting-to-the-ink-tips-and-tricks-for-print-style-sheets%2F&amp;title=Adapting%20To%20The%20Ink%3A%20Tips%20And%20Tricks%20For%20Print%20Style%20Sheets" id="wpa2a_40"><img src="http://drewmturner.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://drewmturner.com/adapting-to-the-ink-tips-and-tricks-for-print-style-sheets/feed/</wfw:commentRss>
		<slash:comments></slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  drewmturner.com/feed/ ) in 10.99728 seconds, on May 25th, 2013 at 5:46 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on May 25th, 2013 at 6:46 am UTC -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Quick Cache Is Fully Functional :-) ... A Quick Cache file was just served for (  drewmturner.com/feed/ ) in 0.00104 seconds, on May 25th, 2013 at 6:39 am UTC. -->