<?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>WPShout.com</title> <atom:link href="http://wpshout.com/feed/" rel="self" type="application/rss+xml" /><link>http://wpshout.com</link> <description>WordPress Tips, Tricks and Hacks</description> <lastBuildDate>Mon, 30 Aug 2010 11:48:00 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0</generator> <item><title>Submit WordPress Posts From The Frontend</title><link>http://wpshout.com/wordpress-submit-posts-from-frontend/</link> <comments>http://wpshout.com/wordpress-submit-posts-from-frontend/#comments</comments> <pubDate>Wed, 18 Aug 2010 14:04:03 +0000</pubDate> <dc:creator>Jared</dc:creator> <category><![CDATA[Theme Development]]></category> <category><![CDATA[Advanced Uses of WordPress]]></category> <category><![CDATA[Custom Post Types]]></category> <category><![CDATA[Post Form]]></category><guid
isPermaLink="false">http://wpshout.com/?p=3222</guid> <description><![CDATA[If your looking to make adding new posts without having to log into the WordPress dashboard, or maybe to allow your visitors a way to submit some kind of content of their own, then here's a way you can create a new post form and display it on a custom page template. ]]></description> <content:encoded><![CDATA[<p><em>This is a guest post by Jared Williams of <a
href="http://new2wp.com">New2WP.com</a></em></p><p>If you&#8217;re looking to make adding new posts without having to log into the WordPress dashboard, or maybe to allow your visitors a way to submit some kind of content of their own, then here&#8217;s a way you can create a new post form and display it on a custom page template.</p><p>In order to write a new post in WordPress you have to do a number of steps just to get started. First you must login to get to the dashboard, then go to posts, and then add new post. That&#8217;s a total of 3 page refreshes with the need to type your name and password as well, and that&#8217;s just to get to the post write page. Yeah you could use the quick post widget on the dashboard page, but then you still have to go to edit the post if you want to add a category or some tags plus any other things you may use in your post.</p><p>If you have members of your site that join so they can submit some kind of content or another, it can be even better for them as well to not have to go through all the steps it takes in submitting a new post. Plus this can be used for making a new post form for custom post types, too.</p><p>This custom post form is something I developed after trying all the form plugins I could find, including the more well known TDOForms, and Gravity forms plugins which both are quite capable of doing this but are more than I needed. I&#8217;ve even hacked, dissected, and attacked the Prologue and P2 themes since they are Twitter-style themes that have a post form right on the main page. I mean I ripped them both apart, and slaughtered the code in them to death, and failed. Prologue couldn&#8217;t do what I wanted, and the P2 theme code is so intertwined within itself it was just too much of a pain to undo the knot of code it consists of.</p><h2>1. The Form</h2><p>First we will set up the basic form which you can use to enter in the information to submit new posts.</p><pre>&lt;!-- New Post Form --&gt;

&lt;div id="postbox"&gt;

&lt;form id="new_post" name="new_post" method="post" action=""&gt;

&lt;p&gt;&lt;label for="title"&gt;Title&lt;/label&gt;&lt;br /&gt;

&lt;input type="text" id="title" value="" tabindex="1" size="20" name="title" /&gt;

&lt;/p&gt;

&lt;p&gt;&lt;label for="description"&gt;Description&lt;/label&gt;&lt;br /&gt;

&lt;textarea id="description" tabindex="3" name="description" cols="50" rows="6"&gt;&lt;/textarea&gt;

&lt;/p&gt;

&lt;p&gt;&lt;?php wp_dropdown_categories( 'show_option_none=Category&amp;tab_index=4&amp;taxonomy=category' ); ?&gt;&lt;/p&gt;

&lt;p&gt;&lt;label for="post_tags"&gt;Tags&lt;/label&gt;

&lt;input type="text" value="" tabindex="5" size="16" name="post_tags" id="post_tags" /&gt;&lt;/p&gt;

&lt;p align="right"&gt;&lt;input type="submit" value="Publish" tabindex="6" id="submit" name="submit" /&gt;&lt;/p&gt;

&lt;input type="hidden" name="post_type" id="post_type" value="post" /&gt;

&lt;input type="hidden" name="action" value="post" /&gt;

&lt;?php wp_nonce_field( 'new-post' ); ?&gt;

&lt;/form&gt;

&lt;/div&gt;

&lt;!--// New Post Form --&gt;</pre><p>There&#8217;s nothing special with this form really. The only thing is the wp_dropdown_categories() function, which creates the list of categories you can select from. You can <a
href="http://codex.wordpress.org/Function_Reference/wp_dropdown_categories">learn more about this function here</a>. Everything else you enter into the form will automatically create a new entry, including tags. Make sure no matter what you do, always include the wp_nonce_field(), for <a
href="http://wpshout.com/10-practical-wordpress-security-tips/"target="_blank"title="WordPress Security Tips" >security</a> reasons.</p><h2>2. The PHP for Processing the Form</h2><p>Here is where the fun part begins. This is the PHP which you need to process and submit the form information.</p><pre>&lt;?
if( 'POST' == $_SERVER['REQUEST_METHOD'] &amp;&amp; !empty( $_POST['action'] )) {

	// Do some minor form validation to make sure there is content
	if (isset ($_POST['title'])) {
		$title =  $_POST['title'];
	} else {
		echo 'Please enter a title';
	}
	if (isset ($_POST['description'])) {
		$description = $_POST['description'];
	} else {
		echo 'Please enter the content';
	}
	$tags = $_POST['post_tags'];

	// Add the content of the form to $post as an array
	$post = array(
		'post_title'	=&gt; $title,
		'post_content'	=&gt; $description,
		'post_category'	=&gt; $_POST['cat'],  // Usable for custom taxonomies too
		'tags_input'	=&gt; $tags,
		'post_status'	=&gt; 'publish',			// Choose: publish, preview, future, etc.
		'post_type'	=&gt; $_POST['post_type']  // Use a custom post type if you want to
	);
	wp_insert_post($post);  // Pass  the value of $post to WordPress the insert function
							// http://codex.wordpress.org/Function_Reference/wp_insert_post
	wp_redirect( home_url() );
} // end IF

// Do the wp_insert_post action to insert it
do_action('wp_insert_post', 'wp_insert_post'); 

?&gt;</pre><p>Let&#8217;s go over this.</p><p>The first line checks if a post has been submitted, and if the action is not empty. You could do this check a number of ways, this is just how I&#8217;ve done it:<br
/> if( &#8216;POST&#8217; == $_SERVER['REQUEST_METHOD'] &amp;&amp; !empty( $_POST['action'] )) {</p><p>The second part is a basic form validation that checks to see if the title and description fields are set, and if so set the values to the variables $title and $description. You may want to check that each of the fields are set this way but I am just showing as an example.</p><p>Then, I set up a variable called $post, which is an array of values from the form fields.</p><ul><li>post_title = $title like we set above using the validation</li><li>post_content = $description as we set</li><li>post_category = the category that was selected</li><li>tags_input = the tags</li><li>post_status = publish, future or draft. Whatever you want to set it to</li><li>post_type = post, page, or if you have set up a custom post type you can use that instead</li></ul><p>To insert the new post information you can use the function <a
href="http://codex.wordpress.org/Function_Reference/wp_insert_post">wp_insert_post()</a> and passing the $post variable to it. This is all of course, only if the form has been submitted which is why we put all this within the &#8216;if&#8217; statement.</p><p><strong>Update:</strong> I&#8217;ve added the function wp_redirect() after the wp_insert_post() function, to fix the redirect to a 404 page. You can change the location by passing the function an argument. For example: wp_redirect( &#8216;/some-page/&#8217;) or wp_redirect( home_url() ).</p><p>Close the IF statement and then add the action. The line do_action(&#8216;wp_insert_post&#8217;, &#8216;wp_insert_post&#8217;); will add the wp_insert_post hook, with the wp_insert_post from the if statement as the callback, thereby adding the $post variable with all it&#8217;s information to the function. Without this line the post will not be submitted and your form will be useless.</p><p>I will leave the CSS up to you since I am not here to make your form look pretty, just work. Besides, everyone styles things differently anyways.</p><p>You can embed this code in a <a
href="http://codex.wordpress.org/Pages#Templates_by_page-ID_or_page-Slug">custom page template</a>, say for example: page-submit.php. Copy the code from page.php and paste it in your custom template. You can create custom pate templates using page-<strong>slug</strong>.php or page-<strong>id</strong>.php. I find making <a
href="http://new2wp.com/noob/wordpress-custom-templates-the-easy-and-most-logical-method/">custom templates this way 100 times better</a> than using the old way, which involves assigning the page a specific template in the page attributes.</p><p>Make sure that you create a new page in the WordPress dashboard, and that your page slug or page id match the name of your template file (ie: page-submit.php &#8211; page slug = submit). This new page you create will automatically use the custom template you make, so there is no need to do anything else. You can enter content into the page if you choose to of course, but as long as the custom template includes the new post form, either above or below the_content() function you are good to go.</p><p><a
href="http://new2wp.com/labs/downloads/New_Post_Forn_by-Jared_New2WP.txt">Download this code here</a></p><p>If you have any questions about this, or can&#8217;t get it to work let me know in the comments.</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/wordpress-submit-posts-from-frontend/feed/</wfw:commentRss> <slash:comments>20</slash:comments> </item> <item><title>Meet Alex Denning, 16 Year Old Geek</title><link>http://wpshout.com/meet-alex-denning-16-year-old-geek/</link> <comments>http://wpshout.com/meet-alex-denning-16-year-old-geek/#comments</comments> <pubDate>Mon, 19 Jul 2010 13:40:24 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Other]]></category><guid
isPermaLink="false">http://wpshout.com/?p=3124</guid> <description><![CDATA[Alex has some big news, about him, actually.]]></description> <content:encoded><![CDATA[<p>My name&#8217;s Alex Denning. I live just outside of London, England. I&#8217;m 16 years old. For the last year and a bit, I&#8217;ve been writing this site and just avoded/not mentioned age. Ideally, now I&#8217;ve told you, nothing changes.</p><p>I&#8217;ve not mentioned it before because I thought nobody would take me seriously. I thought I&#8217;d just be labelled as &#8220;some pretentious kid who doesn&#8217;t know what he&#8217;s talking about&#8221;. Just <a
href="http://www.problogdesign.com/other/3-years-on-time-to-show-you-who-i-am/">like Michael Martin</a>, I aired on the side of caution as it just seemed like a better idea not to mention it.</p><p>It&#8217;s only in the last month or so I&#8217;ve started telling more and more people, largely down to <a
href="http://blogussion.com">Alex Fraiser</a>&#8216;s persuasion skills <img
src='http://wpshout.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> After seeking out lots of advice, I came to the conclusion that the vast majority of readers wouldn&#8217;t have a problem and would &#8220;appreciate the honesty&#8221;, to quote <a
href="http://themelab.com">Leland</a>.</p><p>In the last year I&#8217;ve met and worked with some awesome people and slowly I started telling some of the awesome people my age and the usual response was &#8220;oh that&#8217;s cool. What were you saying about the options panel?&#8221; It&#8217;s this sort of reaction that made me realise I could probably tell everyone, so now I am.</p><p>Here&#8217;s the obligatory awkward headshot, again, inspired by <a
href="http://blogussion.com">Alex Fraiser</a>.</p><p><a
href="http://wpshout.com/media/2010/07/meet-alex.jpg"><img
class="alignnone size-thumbnail wp-image-3200" title="meet-alex" src="http://wpshout.com/media/2010/07/meet-alex-640x200.jpg" alt="" width="640" height="200" /></a></p><p>What follows are a series of PFAQs (potentially frequently asked questions). If you&#8217;ve got any yourself, do ask.</p><h2>Shouldn&#8217;t you be at school?</h2><p>Yes, I am. Quite a good one too.</p><h2>How do you balance your time?</h2><p>I don&#8217;t have nearly enough time. Obviously <em>stuff</em> comes first, which doesn&#8217;t leave much time for interwebs stuff. Annoyingly, this means there&#8217;ll be the odd fortnight when you won&#8217;t see anything from me appear here.</p><h2>So how did it all start?</h2><p>Well, it was around November, 2007. Along with a couple of friends, I wanted to start reviewing video games. I installed myself as &#8220;the tech guy&#8221; and so set up this <em>blog</em>, using this &#8220;WordPress&#8221; thing. I had no idea how to use it and I stretched my abilities by&#8230; changing the colour of the header to green! This was Kubrick, so there <em>was</em> a colour picker, but that&#8217;s irrelevant.</p><p>I had no idea really how to use WordPress or how to change the design, so I promptly gave up on it.</p><p>Thankfully, I returned in March the next year. Without even realising it, I&#8217;d recognised that I needed a good CMS and that WordPress was the best option (I remember trying out all the other blogging platforms in Fantastico as well as Joomla and Drupal, deciding that Joomla and Drupal were too complicated and WordPress was the best option because of the community!), even then.</p><p>As a result, the WordPress powered <a
href="http://nometet.com">Nometet.com</a> was born and still lives to this day.</p><h2>Meet your new friend, WordPress</h2><p>That summer I hacked together my first WordPress theme and came across this website called HackWordPress.com (now <a
href="http://wphacks.com">WPHacks</a>). I was amazed by the wealth of material available and in a masterstroke, introduced into the world of blogging.</p><p>In the next couple of months I saw, and was fascinated by how Jean-Baptiste Jung was able to launch a blog and find a readership so quickly, bouncing off the success of WordPressHacks. At this point I was still fairly new to WordPress, but this didn&#8217;t stop me getting stuck into blogging and late 2008, I had my first post published, on Jean&#8217;s blog, <a
href="http://catswhocode.com">CatsWhoCode</a>.</p><p>The post was called &#8220;<a
href="http://www.catswhocode.com/blog/make-full-use-of-wordpress-with-the_excerpt_reloaded">Make Full Use of WordPress [lowercase p <img
src='http://wpshout.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ] with the_excerpt_reloaded</a>&#8220;. It was absolutely horrendous, and, in retrospect and I really had <em>no idea</em> what I was talking about. But that didn&#8217;t matter. Real people had actually read my post! Wow!</p><p>I published a couple more CatsWhoCode tutorials in early 2009, but in April launched Nometech, a spin off from Nometet. It was meant to be about web development, in a similar vain to CatsWhoCode, but it quickly became clear that the main focus was going to be WordPress and so in the summer changed the name of the site to WPShout.</p><p>Even at this point, I wasn&#8217;t great with WordPress. It was only over the summer I started to become more knowledgeable about WordPress and could really write with any authority about it. After this, WPShout sprang into life and by November, writing came up to the standard you read today.</p><p>It was also around that time I started work, along with <a
href="http://epicalex.com">Alex Cragg</a>, on <a
href="http://wpshift.com">WPShift</a>, a project we thought would revolutionise <a
href="http://wpshout.com/theme-house/"target="_blank"title="Free WordPress Themes" >WordPress themes</a>. We were wrong, but the concept remains a solid one and we&#8217;ll be back with that. Even as I write this, I&#8217;m working on an awesome backbone to all future themes :)</p><p>Into 2010, early on I decided I wanted to take WPShout to the next level and so approached <a
href="http://smashingmagazine.com">Smashing Magazine</a> about writing for them. My article idea was accepted and so I wrote and wrote, adding bits, taking out bits until the guys there were happy with <a
href="http://www.smashingmagazine.com/2010/04/29/extend-wordpress-with-custom-fields/">my submission</a>. The whole process took a good few months but was well worth it in the end <img
src='http://wpshout.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>Onto now. I&#8217;m currently freelancing, <a
href="http://wpshout.com/wordpress-guru-for-hire/">as you may know</a> and looking forward to continuing to make lovely content for you all to read.</p><p>If you&#8217;ve got any questions, do ask. I&#8217;d be very happy to answer.</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/meet-alex-denning-16-year-old-geek/feed/</wfw:commentRss> <slash:comments>46</slash:comments> </item> <item><title>SEO Optimization For WordPress</title><link>http://wpshout.com/best-seo-optimization-for-wordpress/</link> <comments>http://wpshout.com/best-seo-optimization-for-wordpress/#comments</comments> <pubDate>Thu, 15 Jul 2010 15:25:43 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[SEO]]></category><guid
isPermaLink="false">http://wpshout.com/?p=3170</guid> <description><![CDATA[Today I did something I've never done before: I started to "SEO Optimize" my WPShout posts, seeing which posts were doing well in search results and how I can make these posts do better in search results. I also had a fiddle around with my theme to make sure it was all in fine optimised order.]]></description> <content:encoded><![CDATA[<p>Today I did something I&#8217;ve never done before: I started to &#8220;SEO Optimize&#8221; my WPShout posts, seeing which posts were doing well in search results and how I can make these posts <em>do better</em> in search results. I also had a fiddle around with my theme to make sure it was all in fine optimised order.</p><p>I have no idea if it&#8217;s as a result of this, but after doing my optimization, WPShout has suddenly jumped to PR 5 (I believe it was last at PR 3).</p><p>The finding bit.</p><h2>1. Find your best posts</h2><p>Head over to Analytics (or whatever you use), set the time back to the beginning of the year and see what your best ten results have been. It&#8217;s important to you&#8217;ve got a wide date span so results aren&#8217;t skewed by your most recent posts.</p><p>I did this and found there were eight posts which were all a couple of thousands visits ahead of the pack. I focused on these eight; statistically, they&#8217;re my best posts.</p><h2>2. Find your best keywords</h2><p>Whilst you&#8217;re still in Analytics, see which keywords people are using to find your site. Again, there are probably a couple which stand out as your top ones. Pick these out and then see where you&#8217;re appearing in the results for these searches. If you&#8217;re halfway down the first page, then it&#8217;s time to roll out the optimisation. Actually, regardless of where you are, it&#8217;s time to roll out the optimization.</p><p>The optimization bit.</p><h2>1. Redirection</h2><p>My theme options tutorials have always been popular, to the extent I updated the whole lot last year. The trouble was the original, not-so-good original tutorial ranks very highly and visitors would often not see the link to the new version. Plus, it made Shout look bad, having a fairly bad tutorial getting thousands of visits &#8212; these thousands of visitors would assume the site was horrendous.</p><p>The solution was to use a plugin, the first of a couple. This one&#8217;s called &#8220;<a
href="http://urbangiraffe.com/plugins/redirection/">Redirection</a>&#8220;. Essentially, it&#8217;s an easy way of adding 301 redirects to posts which tell search engines the post has permanently moved to a new location &#8212; soon the updated, better post will be the one ranking high.</p><p><a
href="http://wpshout.com/media/2010/07/redirect.jpg"><img
class="alignnone size-full wp-image-3180" title="redirect" src="http://wpshout.com/media/2010/07/redirect.jpg" alt="" width="640" height="343" /></a></p><p>It works, too; as you can see I set up two redirects, the first to test it out and the second redirecting the aforementioned post. At a glance I can see 79 people have been saved from seeing the old post. It also tracks 404 errors and seems to be working well! Thoroughly recommended if you need to redirect posts.</p><h2>2. Auto linking keywords</h2><p>Google needs to know if your post is relevant to a certain keyword, we all know this (or at least, <a
href="http://www.kadavy.net/blog/posts/everything-you-already-know-about-seo/">pretend to</a>). Therefore it makes sense to link words of phrases on your blog to relevant posts.</p><p>A quick bit of Googling and I found a plugin: &#8220;<a
href="http://cvs.aesinformatica.com/download/automatic-seo-links">Automatic SEO Links</a>&#8220;. It pretty much does what it says on the tin: goes through your posts, if it finds the word you&#8217;ve asked it to find, it links it up to the link you&#8217;ve asked it to. And that&#8217;s pretty much it:</p><p><a
href="http://wpshout.com/media/2010/07/seo-links.jpg"><img
class="alignnone size-full wp-image-3181" title="seo-links" src="http://wpshout.com/media/2010/07/seo-links.jpg" alt="" width="640" height="283" /></a></p><h2>3. Updating better posts</h2><p>Some of my more successful posts were older and as a result weren&#8217;t quite as good as the newer ones.</p><p>They were still bringing in a ton of traffic though, so I went through and made sure they follow the best practices of today, not the best practices of a year ago. This may not help your SEO, but it will increase your readership as search engine visitors will find your content interesting and thus come back for more, instead of leaving immediately.</p><h2>4. Change titles</h2><p>I make a point of not writing my titles for search engines, instead writing them for readers.</p><p>Lately I&#8217;ve started getting quite good at combining the two: short, punchy titles that tell you immediately what&#8217;s in the post and also are keyword relevant. The title of this post, for example, couldn&#8217;t really be much shorter or more relevant.</p><p>On my older, successful posts I started changing the titles to make them lean further towards keyword relevant rather than reader relevant as the majority of readers will now be coming from search engines and thus they need to be able to find the post. In my mind, it makes sense to change the titles so they&#8217;re shorter and punchier.</p><h2>5. Short, relevant URLs</h2><p>Along with long post titles, in the past I&#8217;ve had long URLs which I&#8217;ve kept the same as the title. Turns out this too was a bad idea: if you&#8217;re not writing your titles for search engines (as you shouldn&#8217;t be) then it seems reasonable to write URLs for search engines; they&#8217;re not designed to show you what the article is about, they&#8217;re just the location of the article!</p><p>I first noticed Chris Coyier doing this: wordy titles and short URLs. Take the latest post, for example: &#8220;Tips for Web Design that Crosses Cultures&#8221; or, <a
href="http://css-tricks.com/cross-culture-design/">http://css-tricks.com/cross-culture-design/</a>.</p><p>Ideally you do this before you publish, but if not, you can use the plugin from earlier to give a permanent redirect to the new URL. This <em>should</em> have a noticeable impact.</p><h2>And that&#8217;s the game!</h2><p>That&#8217;s it. More or less all I did in a couple of hours. Already, as I said at the top of the post, it seems to already have had an impact on my search engine results and visits from search engines.</p><p>(sorry, no <a
href="http://wpshout.com/art-direction-wordpress/"target="_blank"title="WordPress Art Direction" >art direction</a>!)</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/best-seo-optimization-for-wordpress/feed/</wfw:commentRss> <slash:comments>8</slash:comments> </item> <item><title>A Guide For Selling WordPress Themes</title><link>http://wpshout.com/selling-wordpress-themes/</link> <comments>http://wpshout.com/selling-wordpress-themes/#comments</comments> <pubDate>Thu, 08 Jul 2010 16:33:07 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Theme Development]]></category><guid
isPermaLink="false">http://wpshout.com/?p=3091</guid> <description><![CDATA[Recently there's been a lot of (mis) information around about "how to start your own premium WordPress themes site". They make all make it sound fairly easy: just make a design, hack it into a WordPress theme, buckle on a zillion theme options using the old Woo options panel and you have yourself a wonderful theme that'll make you rich.Not so, this tutorial explains some of the things to look out for when building a premium theme.]]></description> <content:encoded><![CDATA[<p>Recently there&#8217;s been a lot of (mis) information around about &#8220;how to start your own premium <a
href="http://wpshout.com/theme-house/"target="_blank"title="Free WordPress Themes" >WordPress themes</a> site&#8221;.</p><p>They make all make it sound fairly easy.</p><p>Just make a design, hack it into a WordPress theme, buckle on a zillion theme options using the old Woo options panel and you have yourself a wonderful theme that&#8217;ll make you rich.</p><p>It&#8217;s a lot harder than you think to make a good, respectable theme; only about 10% of premium themes are actually any good.</p><p>&#8220;Good&#8221;, being a theme that&#8217;s well built, well supported and follows best practises. I&#8217;m of the view that the vast majority of themes don&#8217;t do this. Don&#8217;t let your new site join the ranks of other mediocre themes, follow my handy guide and you&#8217;ll be flying in no time.</p><h2>Run, faster</h2><p>First off is to make sure your code and template files are the right bits for the job. Have you got too many template files? Is your author.php file doing essentially the same as your index file? <a
href="http://wpshout.com/wordpress-template-file-hierarchy-explained/">Know your file structure</a> and you can vastly reduce the amount of work you&#8217;ll need to do. Equally, ensure your loops are run as efficiently as you can; do <em>really</em> need a second loop for that <a
href="http://wpshout.com/featured-content-wordpress/"target="_blank"title="WordPress Featured Content" >featured content</a> area?</p><h2>Add features, not bloat</h2><p>Building in features is always fun, but it is very, very easy to get carried away and start adding a whole load of widgets and fairly useless features that nobody will actually use. Be very careful when adding features like widgets; always be thinking &#8220;who will actually use this? Would I be better off bundling an optional plugin with the theme?&#8221; Speaking of plugins&#8230;</p><h2>Don&#8217;t rely on plugins</h2><p>I thought I&#8217;d seen the back of this one a while ago, but apparently not. Under no circumstances <em>whatsoever</em> make your theme reliant on plugins. What does that mean? It means if a user has to install a plugin for your theme to work, that&#8217;s relying on a plugin. By all means build in support for popular plugins, in fact, that&#8217;s always a good thing to do, just wrap calls to plugins in <em>ifs</em> so if the plugin isn&#8217;t installed then the theme still works.</p><p>In my list of bad things to have, this is right up there. Whilst the line between theme and plugin has blurred of late, themes shouldn&#8217;t be reliant on plugins.</p><h2>Run out of the box</h2><p>&#8220;With built in 1000 options!&#8221; About nine months ago this was very cool. <em>1000 options! Wow! </em>That&#8217;s the reaction you could expect from potential customers.</p><p>Not any more.</p><p>Just take a moment to think <em>how long it would take to set up 1000 options.</em> <a
href="http://binarymoon.co.uk">Ben</a> first told me this and at first I wasn&#8217;t too keen on it, but on reflection, he&#8217;s bang on. Themes should work as much as possible out of the box, without any customisation or set up. When someone first installs your theme, they should be greeted by their latest posts, not a whole load of errors telling them to set up the options page. Speaking of&#8230;</p><h2>Make a useful options page, if at all</h2><p>Options pages should have as few options as possible. If your options page spans five pages, you&#8217;ve got something is fundamentally wrong. Users have come to expect options pages and whilst five pages of options <em>does</em> sound impressive, it means there&#8217;s too much in your theme that&#8217;s fiddly. Let&#8217;s have a couple of examples:</p><ul><li>&#8220;Link to logo image&#8221; &#8212; big no no. Provide an uploader and auto resizer so users can upload something quickly and easily.</li><li>Featured content images and text &#8212; another no no. You should be using a category, custom field or even custom post type for this, but don&#8217;t make users type in their featured content by using the options page.</li><li>Category/Page IDs &#8212; don&#8217;t make your users search around for the IDs of various categories, give them a nice list of categories/pages to choose from instead.</li></ul><p>You should also ask yourself whether you actually need an options page <em>at all</em>. If all the options you&#8217;ve got are Analytics and Footer text, why not <a
href="http://www.themelab.com/2010/04/15/cool-blue-free-wordpress-theme/">follow Leland&#8217;s example</a> and instead recommend a purpose built plugin?</p><h2>Don&#8217;t duplicate WordPress&#8217; functionality</h2><p>The number of themes that have some fancy menu system, some odd way of doing images for posts or a quirky way of organising widgets through layers of options is just astounding. If WordPress already does something, then <em>don&#8217;t duplicate the functionality</em>. Use the post thumbnail function, the 3.0 menu manager and the widgets page. Work with WordPress, not against it.</p><h2>And finally</h2><p>I&#8217;ve not really touched on the other ingredients outside of the themes themselves, but they&#8217;re going to change in each situation; you may decide a ticket system works better for you than a forum, for example.</p><p>Either way, just because the barrier for entry into the premium themes market is low, don&#8217;t let your themes be of that all too common low quality.</p><p><em>Awesome background image from <a
href="http://www.smashingmagazine.com/2010/06/30/desktop-wallpaper-calendar-july-2010/">Smashing Magazine</a>, designed by <a
href="http://ataldathais.deviantart.com/">Thais Trizoli</a>.</em></p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/selling-wordpress-themes/feed/</wfw:commentRss> <slash:comments>17</slash:comments> </item> <item><title>WordPress Designer and Developer For Hire</title><link>http://wpshout.com/wordpress-guru-for-hire/</link> <comments>http://wpshout.com/wordpress-guru-for-hire/#comments</comments> <pubDate>Tue, 06 Jul 2010 13:42:59 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Other]]></category><guid
isPermaLink="false">http://wpshout.com/?p=3032</guid> <description><![CDATA[Alex is going freelance and would like to build a website for you.]]></description> <content:encoded><![CDATA[<div
id="quote"><p><span
class="open">&ldquo;</span><br
/> <span
class="quote">Alex always exceeded [my] expectations&#x2026; Working with Alex has been my pleasure.</span><br
/> <span
class="client">&mdash; <a
href="http://herbfirestoneseo.com/">Herb Firestone</a></span><br
/> <span
class="close">&rdquo;</span></p></div><p></p><p>Excuse the slightly odd post here today (normal service <em>will</em> be resumed, I promise!), but today I&#8217;ve got an exciting announcement: <strong>I&#8217;m going freelance</strong>; for the next month I&#8217;ll be building websites full time.</p><p>And I&#8217;d like to design your website for you. Blogs, magazines, CMS style sites; they&#8217;re all within my field of expertise: WordPress.</p><div
class="portfolio"><h4>Recent Projects</h4><p><a
href="http://wpshout.com/media/2010/07/gamedot.png"><img
src="http://alexdenning.com/wp-content/themes/Direction/images/gamedot.jpg" alt="work sample" width="500px" /></a></p><table><tr><th>Client</th><td>Liam Hunn, <a
href="http://Gamedot.co.uk">Gamedot.co.uk</a></td></tr><tr><th>Project</th><td>Complete redesign from the ground up, utilising the wealth of media available on the site.</td></tr><tr><th>Launch</th><td>December 2009</td></tr><tr><th>Client said</th><td>&#8220;Working with Alex was a pleasure. He listened&#x2026; and provided something I could only really imagine.&#8221;</td></tr></table><p><a
href="http://wpshout.com/media/2010/07/ptsd-spirituality-alt.jpg"><img
src="http://wpshout.com/media/2010/07/ptsd-spirituality.jpg" alt="PTSD Spirituality" width="500px" /></a></p><table><tr><th>Client</th><td>PTSD Spirituality</td></tr><tr><th>Project</th><td>WordPress CMS Design and Development</td></tr><tr><th>Launch</th><td>February 2010</td></tr></table></div><p></p><p>If you <span
class="hide">(hop out of your RSS reader to see this)</span> look to your right, you&#8217;ll see a couple of my recent projects where I&#8217;ve designed from scratch. Most of the work I&#8217;ve done of late has been optimisation or converting to WordPress, but I&#8217;m perfectly happy designing too.</p><p>If you click on the image you&#8217;ll get taken to an even bigger image version; links to sites, where available, are provided, although the images will show you what the sites looked like when I finished them (some have since been edited by their owners).</p><p>I&#8217;d really love to hear from you if you&#8217;ve got any queries or even just want to hear what I think I can do for your site, so if you&#8217;ve got a design you want turned into a WordPress theme, a WordPress theme you want improved or just simply want a wonderful design, drop me an email alex (at) alexdenning.com, I&#8217;ll get back to you, and we&#8217;ll take it from there.</p><p>And finally, thanks to everyone on Twitter for your support, it&#8217;s much appreciated <img
src='http://wpshout.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/wordpress-guru-for-hire/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Really Easy Custom Post Backgrounds For WordPress</title><link>http://wpshout.com/wordpress-custom-post-backgrounds/</link> <comments>http://wpshout.com/wordpress-custom-post-backgrounds/#comments</comments> <pubDate>Tue, 22 Jun 2010 16:26:24 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Featured]]></category> <category><![CDATA[Theme Development]]></category> <category><![CDATA[Art Direction]]></category> <category><![CDATA[Custom Fields]]></category><guid
isPermaLink="false">http://wpshout.com/?p=2376</guid> <description><![CDATA[As I mentioned before, I've been having great fun with the new Nometet.com design. It's now sporting a feature that allows the author to set a custom background for the post just by uploading an image. This image doesn't even need to be the correct size; that's all done on the fly. Uploading isn't hard either; I've implemented an uploader that sits inside a meta box so the hardest bit is choosing the image! In this post we'll have a look at how it's done.]]></description> <content:encoded><![CDATA[<p>As I&#8217;ve mentioned before, I&#8217;ve been having great fun with the new <a
href="http://nometet.com">Nometet.com</a> design. It&#8217;s now sporting a feature that allows the author to set a custom background for the post just by uploading an image. This image doesn&#8217;t even need to be the correct size; that&#8217;s all done on the fly. Uploading isn&#8217;t hard either; I&#8217;ve implemented an uploader that sits inside a meta box so the hardest bit is choosing the image! In this post we&#8217;ll have a look at how it&#8217;s done.</p><p>The uploader we&#8217;re going to be using later saves the image URL to a custom field, so first we&#8217;re going to get the custom field set up so that all you have to do is input a URL into the custom field and it gets displayed as the background. As I&#8217;ve shown before, it&#8217;s fairly easy:</p><pre><code>&lt;?php
$bg = get_post_custom_values("background");
if ( is_array($bg) ) { ?&gt;

&lt;style type="text/css" media="screen"&gt;

body{ background: url(&lt;?php echo $bg ?&gt;) fixed no-repeat; }

&lt;/style&gt;

&lt;?php } ?&gt;</code></pre><p>But that still means you&#8217;ve got to resize the image and copy out the URL into a custom field.</p><h2>Custom meta uploader</h2><p>We need an uploader in a meta box. When I was first pondering how to do this, I remembered that WooThemes use(d to use?) them in their themes. So I opened up one and lo and behold, there was a file <code>admin-custom.php</code> (under /functions). This is the bit used for the uploader and other custom meta boxes.</p><p><a
href="http://wpshout.com/media/2010/04/custom-uploader.jpg"><img
class="alignnone size-full wp-image-2390" title="custom-uploader" src="http://wpshout.com/media/2010/04/custom-uploader.jpg" alt="" width="590" height="200" /></a></p><p>At this point I got slightly confused &#8211; at the top of the file it says:</p><p>This code is protected under Creative Commons License: http://creativecommons.org/licenses/by-nc-nd/3.0/</p><p>Which is completely contradictory to Woo being GPL and as the file is dependant on WordPress, I&#8217;m fairly sure it needs to be GPL too. Either way, as I see it I can still publish the code here. To be totally safe, I&#8217;m not going to &#8220;alter, transform, or build upon this work&#8221;. This does mean we&#8217;ve got some code we don&#8217;t strictly need, but it won&#8217;t have too much of a disastrous effect!</p><p><em>As it&#8217;s a fairly big file, you can download it </em><a
href="http://wpshout.com/media/2010/04/admin-custom.txt"><em>here</em></a><em>.</em></p><p>Once you&#8217;ve got the file, copy the whole thing into your functions.php file, making sure it goes <em>directly after</em> the closing <code>?&gt;</code> tag (ie ?<code>&gt;&lt;?php</code> ).</p><p>We then need to trigger the meta box, which can be done with the following:</p><pre><code>$woo_metaboxes = array(

		"image" =&gt; array (
			"name"		=&gt; "bg",
			"label" 	=&gt; "Background",
            "type" =&gt; "upload",
			"desc"      =&gt; "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough."
		),

	);

update_option('woo_custom_template',$woo_metaboxes);   </code></pre><p>Add that after the other code, but before the closing <code>?&gt;</code> tag. Save the file, upload it and create a new post. You&#8217;ve now got an uploader which will save images into the custom field &#8216;bg&#8217;.</p><h2>Resizing the images</h2><p><a
href="http://wpshout.com/media/2010/04/custom-bg.jpg"><img
class="alignnone size-full wp-image-2393" title="custom-bg" src="http://wpshout.com/media/2010/04/custom-bg.jpg" alt="" width="590" height="300" /></a></p><p>The final thing to do now is to just use timthumb to resize the images to a width of 1920px. Simple enough; download <a
href="http://code.google.com/p/timthumb/">timthumb</a>, upload it into your theme&#8217;s files and just apply the timbthumb syntax to the code in the header:</p><pre><code>
body{
background: url(&lt;?php bloginfo('template_url'); ?&gt;/tools/timthumb.php?w=1920&amp;zc=1&amp;src=&lt;?php echo $bg; ?&gt;) fixed no-repeat;
}

</code></pre><p>And as you can see, that&#8230; doesn&#8217;t work. The custom field adds http://&#8230; to the image URL which timthumb doesn&#8217;t like.</p><p>At this point, I pondered a bit, tried (and failed) at a couple of solutions so did the only thing I could; grovelled with <a
href="http://binarymoon.co.uk">Ben </a>to give me a hand. Thankfully, he agreed and told me I needed to encode my URLs, which means you&#8217;ll need to change the code to this:</p><pre><code>body{
background: url(&lt;?php bloginfo('template_url'); ?&gt;/tools/timthumb.php?w=1920&amp;zc=1&amp;src=&lt;?php echo urlencode($bg); ?&gt;) fixed no-repeat;
}</code></pre><h2>And finally</h2><p>Which leaves us with a really easy to use custom background uploader. You can check it out in action on the new look <a
href="http://nometet.com">Nometet</a>! Speaking of which, I&#8217;d really appreciate it if you gave the site a look; it&#8217;s a web based video game magazine.</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/wordpress-custom-post-backgrounds/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Art Direction For WordPress</title><link>http://wpshout.com/art-direction-wordpress/</link> <comments>http://wpshout.com/art-direction-wordpress/#comments</comments> <pubDate>Mon, 07 Jun 2010 14:00:42 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Uncategorized]]></category><guid
isPermaLink="false">http://wpshout.com/?p=2940</guid> <description><![CDATA["Art direction", custom post designs, whatever you want to call them have taken off in a big way recently. First it was Jason Santa Maria amongst others, then Smashing Magazine picked up on it and as a trend it exploded. For good reason too; they're awesome and great fun to do. In this post we'll see how art direction and WordPress can be combined to create something awesome.]]></description> <content:encoded><![CDATA[<p><img
src="http://wpshout.com/media/2010/06/art-going.png" alt="" title="art-going" width="500" height="500" class="alignnone size-full wp-image-2960" /></p><p>&#8220;<a
href="http://wpshout.com/art-direction-wordpress/"target="_blank"title="WordPress Art Direction" >Art direction</a>&#8220;, custom post designs, whatever you want to call them have taken off in a big way recently. First it was <a
href="http://jasonsantamaria.com">Jason Santa Maria</a> amongst others, then Smashing Magazine <a
href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">picked up on it</a> and as a trend<br
/> it exploded. For good reason too;<br
/> they&#8217;re awesome and great fun to do.</p><p>My personal favourites are the ones on <a
href="http://designinformer.com/grid-based-web-design-simplified/">Design Informer</a> and <a
href="http://www.binarymoon.co.uk/category/general/art-direction/">Binary Moon</a>. Both, like WPShout, are powered by WordPress. Unlike WPShout, they&#8217;re using custom post templates, something I&#8217;ve found myself increasingly against as<br
/> they&#8217;re a pain once you change the design. <br
/> Sure, no way&#8217;s going to be perfect once you change a design, but some ways are<br
/> less of a pain than others.</p><p>Art direction is awesome and enhances your blog no end.</p><p>Here on WPShout I&#8217;m using <em>CSS exclusively</em>. This means the HTML doesn&#8217;t change one bit between non art directed posts and art directed posts; I just use a custom field to add in an extra stylesheet. When I first started dabbling in art direction a couple of months ago I found myself using inline styles through custom fields, but quickly realised <em>that sucks</em> because you can&#8217;t easily reuse the styles (find styles from last time, find file on FTP, load into text editor and so on) <em>and</em>, crucially, you can&#8217;t <em>gracefully degrade</em> your posts; the WPShout layout is over 1024px, thus visitors with that screen size just get the standard layout which, although still larger than 1024px, crucially the content area isn&#8217;t so posts are still readable. With external stylesheets I can selectively apply them and make new art directed posts quicker.</p><p>Using my CSS only way, it&#8217;s<br
/> <span>fairly easy</span><br
/> to get started.</p><div
class="caption"><img
src="http://wpshout.com/media/2010/06/unedited-art.jpg" alt="" title="unedited-art" width="400" height="243" class="alignnone size-full wp-image-2953" /><p>My &#8220;blank canvas&#8221; for WPShout</p></div><p>The three key rules of art.</p><p><span>1.</span> I find that writing a post <em>with the design in mind</em> just doesn&#8217;t work. I have to write the post first and then fiddle around with the design. If you write trying to work out how you&#8217;ll style it, you&#8217;ll never get anything written.</p><p><span>2.</span> Next, a simple reset of a couple of styles is a godsend. I&#8217;ve got a couple of styles I use as a reset and immediately my content area gets set to full width on a white background and pushes the sidebar down to level with the start of the comments. I&#8217;ve found keeping the header, sidebar, comments and footer just adds that extra bit of consistency which is important.</p><p><span>3.</span> Finally, go <em>crazy nuts</em> with all the stuff you know is bad &#8212; use negative margins and a whole load of divs like there&#8217;s no tomorrow but crucially if you get rid of the stylesheet, everything goes back to normal and so you&#8217;re future proofed against any theme changes you make in the future.</p><div
id="art-wp"><img
src="http://wpshout.com/media/2010/06/wp-art1.jpg" alt="" title="wp-art" width="1190" height="100" class="left" /></div><h2>The <span>WordPress-ifying</span> bit</h2><p>As you might have been able to guess, we&#8217;re going to use custom fields to add our stylesheet to the post.</p><p>First thing to do is to upload the stylesheet &#8212; you&#8217;ll probably want it in your theme&#8217;s directory. Copy and paste the URL into a custom field &#8220;CSS&#8221;.</p><p>Next, pop open the header.php file and add the following, after your standard stylesheet:</p><div
class="geshi no php"><ol><li
class="li1"><div
class="de1"><span
class="kw2">&lt;?php</span> <span
class="kw1">if</span> <span
class="br0">&#40;</span>is_single<span
class="br0">&#40;</span><span
class="br0">&#41;</span><span
class="br0">&#41;</span> <span
class="br0">&#123;</span></div></li><li
class="li1"><div
class="de1">&nbsp;</div></li><li
class="li1"><div
class="de1"><span
class="re1">$css</span> <span
class="sy0">=</span> get_post_meta<span
class="br0">&#40;</span><span
class="re1">$post</span><span
class="sy0">-&gt;</span><span
class="me1">ID</span><span
class="sy0">,</span> <span
class="st0">&#39;css&#39;</span><span
class="sy0">,</span> <span
class="kw2">true</span><span
class="br0">&#41;</span><span
class="sy0">;</span> <span
class="kw1">if</span> <span
class="br0">&#40;</span><span
class="re1">$css</span><span
class="br0">&#41;</span> <span
class="br0">&#123;</span> <span
class="kw2">?&gt;</span></div></li><li
class="li1"><div
class="de1">&nbsp;</div></li><li
class="li1"><div
class="de1"><span
class="sy0">&lt;</span>link type<span
class="sy0">=</span><span
class="st0">&quot;text/css&quot;</span> rel<span
class="sy0">=</span><span
class="st0">&quot;stylesheet&quot;</span> media<span
class="sy0">=</span><span
class="st0">&#39;screen&#39;</span> href<span
class="sy0">=</span><span
class="st0">&quot;&lt;?php echo $css; ?&gt;&quot;</span> <span
class="sy0">/&gt;</span></div></li><li
class="li1"><div
class="de1">&nbsp;</div></li><li
class="li1"><div
class="de1"><span
class="kw2">&lt;?php</span> <span
class="br0">&#125;</span> <span
class="br0">&#125;</span> <span
class="kw2">?&gt;</span></div></li></ol></div><p>Here we&#8217;re assuming your theme makes the fairly standard (in more recent themes) step of running the loop to get various titles or tags for SEO, but if it doesn&#8217;t then you can either run the loop or get custom fields <a
href="http://www.wprecipes.com/wordpress-how-to-get-custom-fields-outside-the-loop">outside the loop</a> (thanks <a
href="http://themelab.com">@ThemeLab</a> and <a
href="http://www.mushive.com/">@mus_hi</a>).</p><h2>The <span>designing</span> bit</h2><p>So now you&#8217;ve written the post and loaded the stylesheet, the next step is to actually fill that stylesheet. I&#8217;ve found the nth-of-type pseudo selector to be a fantastic way round of wrapping each paragraph in a div &#8212; you want to float the third paragraph right so instead of using the HTML editor to add a div around the paragraph, you can instead do this:</p><div
class="center"><div
class="geshi no css"><ol><li
class="li1"><div
class="de1"><span
class="re1">.hentry</span> p<span
class="re2">:nth-of-type</span><span
class="br0">&#40;</span><span
class="nu0">3</span><span
class="br0">&#41;</span><span
class="br0">&#123;</span> float<span
class="re2">:right</span><span
class="sy0">;</span> <span
class="br0">&#125;</span></div></li></ol></div></div><p>Bear in mind that if you&#8217;ve got some meta information first, that might mean the third paragraph of post content is actually the fourth paragraph within the hentry div.</p><p>And then you&#8217;re off. It&#8217;s great fun just fiddling around with styles to get your content laid out in a unique way.</p><h2>It&#8217;s that simple</h2><p>It&#8217;s taken me a while to actually see how easy it is to &#8220;art direct&#8221; my posts, but with a simple reset and adding stylesheets easily through custom fields, it&#8217;s fantastic fun just playing around and making a unique experience for your readers. Go on, give it a try.</p><p><em>Icons by <a
href="http://www.phoenixheart.net/">phenixheart</a> and <a
href="http://www.olawolska.com/">Olwaolska</a></em></p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/art-direction-wordpress/feed/</wfw:commentRss> <slash:comments>24</slash:comments> </item> <item><title>Better iPhone WordPress Themes</title><link>http://wpshout.com/iphone-wordpress-theme/</link> <comments>http://wpshout.com/iphone-wordpress-theme/#comments</comments> <pubDate>Fri, 04 Jun 2010 13:22:37 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Theme Design]]></category><guid
isPermaLink="false">http://wpshout.com/?p=2887</guid> <description><![CDATA[Your iPhone optimised WordPress theme doesn't have to be the single column look we often see; there's no reason at all why you can't just slightly simplify your theme and still give iPhone users a decent experience when visiting your site. That's what we'll be doing in today's post, using just CSS.]]></description> <content:encoded><![CDATA[<p><a
href="http://wpshout.com/iphone-wordpress-theme/"target="_blank"title="iPhone WordPress Themes" >iPhone</a> optimised <a
href="http://wpshout.com/theme-house/"target="_blank"title="Free WordPress Themes" >WordPress themes</a> are <strong>nothing new</strong>, in fact, I expect many of you already have iPhone optimised themes using one of the many plugins available. Here&#8217;s the thing though: the iPhone is <em>actually quite good</em> at rendering web pages, so I often find myself switching back to &#8220;desktop&#8221; view when browsing on my iPhone.</p><p><img
src="http://wpshout.com/media/2010/06/apparently-optimised1.png" alt="" title="apparently-optimised" width="550" height="600" class="image alignnone size-full wp-image-2923" /></p><p>Your iPhone optimised WordPress theme doesn&#8217;t have to be the single column look we often see; there&#8217;s no reason at all why you can&#8217;t just slightly simplify your theme and still give iPhone users a decent experience when visiting your site. That&#8217;s what we&#8217;ll be doing in today&#8217;s post, using just CSS.</p><h2>IPhone stylesheets</h2><p>The first thing we need to do is to set up our iPhone specific stylesheet. Put the line below <em>after</em> your normal stylesheet so we can just overwrite some styles using an iphone.css stylesheet uploaded to your theme&#8217;s directory (instead of starting from scratch).</p><div
class="alert">It&#8217;s that easy: you can just tweak a couple of styles and have a lovely iPhone version of your site, looking just like the &#8220;proper&#8221; version.</div><div
class="geshi no xml"><ol><li
class="li1"><div
class="de1"><span
class="sc3"><span
class="re1">&lt;link</span> <span
class="re0">media</span>=<span
class="st0">&quot;only screen and (max-device-width: 480px)&quot;</span> <span
class="re0">href</span>=<span
class="st0">&quot;&lt;?php bloginfo(&#39;template_url&#39;); ?&gt;</span>/iphone.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;</span></div></li></ol></div><h2>Potential drawbacks</h2><p>Before we get styling, there are some downsides to this method. This isn&#8217;t the most efficient way of doing things as potentially some elements will have to be set to <code>display:none;</code>, meaning that they still load, just aren&#8217;t displayed. This may have <em>some</em> impact on performance but personally I think as long as your site loads quickly normally, it&#8217;ll be fine here.</p><h2>Slim down, load up</h2><p><img
src="http://wpshout.com/media/2010/06/thin-side.png" alt="" title="thin-side" width="550" height="476" class="image alignnone size-full wp-image-2929" /><br
/> So onto the styling. Portrait, the iPhone&#8217;s 320px wide, landscape 480px. Most iPhone specific themes will be 320px, just showing some content. Personally, I see no reason not to just shrink a site slightly, perhaps slimming the sidebar right down to 150px and getting rid of things iPhones can&#8217;t properly display (such as tabs).</p><p>Every site is going to differ, but something like this will probably do the job:</p><div
class="geshi no css"><ol><li
class="li1"><div
class="de1"><span
class="re0">#wrapper</span>, <span
class="re0">#header</span>, <span
class="re0">#footer</span> <span
class="br0">&#123;</span> <span
class="kw1">width</span><span
class="sy0">:</span> <span
class="re3">600px</span><span
class="sy0">;</span> <span
class="br0">&#125;</span></div></li><li
class="li1"><div
class="de1"><span
class="re0">#content</span> <span
class="br0">&#123;</span> <span
class="kw1">width</span><span
class="sy0">:</span> <span
class="re3">480px</span><span
class="sy0">;</span> <span
class="coMULTI">/*margins may need to be set, but we&#39;ll assume they&#39;re inherited from the desktop stylesheet */</span> <span
class="br0">&#125;</span></div></li><li
class="li1"><div
class="de1"><span
class="re0">#sidebar</span> <span
class="br0">&#123;</span> <span
class="kw1">width</span><span
class="sy0">:</span> <span
class="re3">150px</span><span
class="sy0">;</span> <span
class="br0">&#125;</span></div></li></ol></div><p>You then might find that you need to hide some sections, which you can do with <code>display:none;</code>:</p><div
class="geshi no css"><ol><li
class="li1"><div
class="de1"><span
class="re0">#tabs</span>, <span
class="re0">#read-more</span> <span
class="br0">&#123;</span> <span
class="kw1">display</span><span
class="sy0">:</span> <span
class="kw2">none</span><span
class="sy0">;</span> <span
class="br0">&#125;</span></div></li></ol></div><p>Once you&#8217;ve fiddled around with that a bit, you&#8217;ll soon have a delightful iPhone specific WordPress theme for your blog.</p><h2>Custom icons</h2><p><img
src="http://wpshout.com/media/2010/06/build.png" alt="" title="build" width="550" height="476" class="image alignnone size-full wp-image-2932" /><br
/> But we&#8217;re not stopping there though! There is something else that&#8217;s really easy to do (that&#8217;s worth doing too): make an icon so when someone bookmarks your site to their home screen, your custom icon will show up.</p><p>You just need to create a 57&#215;57 PNG without any gloss and upload it to your template&#8217;s directory/images/ and then add the following to the <code>&lt;head/&gt;</code> section:</p><div
class="geshi no xml"><ol><li
class="li1"><div
class="de1"><span
class="sc3"><span
class="re1">&lt;link</span> <span
class="re0">rel</span>=<span
class="st0">&quot;apple-touch-icon-precomposed&quot;</span> <span
class="re0">href</span>=<span
class="st0">&quot;&lt;?php bloginfo(&#39;template_url&#39;); ?&gt;</span>/images/iphone-icon.png&quot; /&gt;</span></div></li></ol></div><h2>For better or worse</h2><p>That&#8217;s all there is to it. It won&#8217;t be for everyone; some might prefer 320px wide layouts, but personally, I find them quite annoying so by making it as much like the desktop site as possible but making it easier to use on an iPhone, I think your readers will love you for it.</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/iphone-wordpress-theme/feed/</wfw:commentRss> <slash:comments>15</slash:comments> </item> <item><title>Free WordPress Theme: Nothing Much</title><link>http://wpshout.com/nothing-much-minimalist-wordpress-theme/</link> <comments>http://wpshout.com/nothing-much-minimalist-wordpress-theme/#comments</comments> <pubDate>Mon, 31 May 2010 16:55:58 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Free Themes]]></category><guid
isPermaLink="false">http://wpshout.com/?p=2623</guid> <description><![CDATA[Nothing Much is a free WordPress theme especially made for WPShout readers! It's a super minimalist, single column, simple WordPress theme that's the first to join WPShout's new Theme House. Image-less and only two files small, Nothing Much loads in a flash and would look great in use on a personal blog.]]></description> <content:encoded><![CDATA[<div
id="nothing-much"><p><em>Nothing Much</em> is a free WordPress theme especially made for <a
href="http://wpshout.com">WPShout</a> readers!</p><p>It&#8217;s a super minimalist, single column, <em>simple</em> WordPress theme that&#8217;s the second to join<em> </em>WPShout&#8217;s new <a
href="http://wpshout.com/theme-house/">Theme House</a>.</p><p>Image-less and <strong>only two files small</strong>, <em>Nothing Much</em> loads in a flash and would look great in use on a personal blog.</p><p>Theme options, widgets, colour pickers.<em> Nothing Much</em> has none of these. Instead it&#8217;s just a simple theme. It&#8217;s nothing much, really, hence the name.</p><p>It&#8217;s available for your using pleasure under the GPL, for free. Do enjoy.</p><p><a
href="http://wpshout.com/media/2010/04/nothing-screen1.jpg"><img
class="alignnone size-full wp-image-2875" title="nothing-screen" src="http://wpshout.com/media/2010/04/nothing-screen1.jpg" alt="" width="640" height="675" /></a></p><p
style="text-align: center;"><a
class="button" href="http://wpshout.com/downloads/nothing-much.zip">Download</a> <a
class="button" href="http://demo.wpshout.com/?theme=Nothing+Much">Demo</a></p></div> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/nothing-much-minimalist-wordpress-theme/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>WPShift Now Available From $29.95</title><link>http://wpshout.com/wpshift-discount/</link> <comments>http://wpshout.com/wpshift-discount/#comments</comments> <pubDate>Thu, 27 May 2010 14:38:05 +0000</pubDate> <dc:creator>Alex Denning</dc:creator> <category><![CDATA[Other]]></category><guid
isPermaLink="false">http://wpshout.com/?p=2848</guid> <description><![CDATA[Ever since I and Alex Cragg launched our WordPress theme store earlier this year, it's been chugging along nicely. We still only offer the one theme, ShiftNews, but we've been quietly updating it. Just last Friday we pushed out an update that adds in support for a couple of the new 3.0 functions. Yesterday we also introduced a rather interesting new pricing plan which makes ShiftNews available for a fantastically low $29.95!]]></description> <content:encoded><![CDATA[<p>Ever since I and Alex Cragg launched our WordPress theme store, <a
href="http://wpshift.com">WPShift</a> earlier this year, it&#8217;s been chugging along nicely. We still only offer the one theme, <a
href="http://wpshift.com/themes/shiftnews/">ShiftNews</a>, but we&#8217;ve been quietly updating it. Just last Friday we pushed out an update that adds in support for a couple of the new 3.0 functions. Yesterday we also introduced a rather interesting new pricing plan which makes ShiftNews available for a fantastically low $29.95!</p><h2>Why the low price?</h2><p>We want to compete with <a
href="http://themeforest.net/?ref=Nometet">ThemeForest</a>. Simple as that. Whilst ThemeForest&#8217;s themes suffer from the problem of designers developing, themes on there have been selling really well and we wanted to put ShiftNews at a price where we can compete with the wealth of ThemeForest themes available.</p><p>$29.95 was the price we decided on. You don&#8217;t lose out on features either; you still get the fully functional ShiftNews, the widget powered homepage, the massive documentation and of course the free updates.</p><h2>So what&#8217;s the catch?</h2><p>As much as we&#8217;d like to be able to offer it, with the $29.95 &#8220;Basic&#8221; package you don&#8217;t get our customisation support, but you do still get the technical support.</p><p>Let me explain what that means: if you install the theme on your PHP5, WordPress 2.9+ install and then find that, say, the comments don&#8217;t work, we&#8217;ll help you out. If you install the theme on your PHP5, WordPress 2.9+ install and want the colour of the comments changed, we won&#8217;t help out. Essentially, if the theme&#8217;s at fault, we&#8217;ll step in.</p><h2>Get it now!</h2><p>Don&#8217;t wait, get ShiftNews now for $29.95! Of course, we still offer ShiftNews with the standard and developers licenses if you&#8217;d like to get support from myself.</p><p
style="text-align: center;"><a
class="button" href="http://wpshift.com">Find out more about ShiftNews</a></p><p
style="text-align: left;">Any questions, do ask in a comment.</p> ]]></content:encoded> <wfw:commentRss>http://wpshout.com/wpshift-discount/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (user agent is rejected)
Database Caching 15/33 queries in 0.006 seconds using disk
Content Delivery Network via wpshout.wpcdn.com (user agent is rejected)

Served from: wpshout.com @ 2010-09-07 11:48:28 -->