Wordpress 3.0 + Nginx

I upgraded nginx on my server and all was well, or so I thought…. (TL;DR at the bottom)

Feeling good about my self I patted my back and went to bed. The next day I was writing a new post when after uploading a photo to WordPress it did not load in the editor. So after a little struggling I figured out why non of the images from the /files/ directory in wordpress were working, but not until after I gave up trying to find the answer in Google.

I tried Googling all this to no avail: (Hopefully this will help some other Googler out there)

• Ngnix not rewriting ms-files.php properly
• my nginx default conf for wordpress was faulty
• no errors in php for ms-files.php WPMU
• ms-files.php corrupting images WPMU
• ms-files.php white (blank) screen of death

79	79	}
80	80
81	81	// If we made it this far, just serve the file
	82	ob_clean();
	83	flush();
82	84	readfile( $file );
	85	flush();
83	86	?>

Yoast had this great info graphic about wordpress I just had to share with everyone. I reposted here for posterity’s sake because I think this would be usefull down the line for reference as well. Although this does do a great job of going through all the caveats to a traditional theme, not all theme adhere to this model. Some WordPress themes range from very creative to the totally bizarre. I recently wrote a theme that doesn’t strictly adhere to this mantra because of the unique requirements of the design, I took a not so traditional approach, but it was all for the ease of use for the blogger.

Well I got bored one night, and you know how bored evenings can go and I created a Shiny new WordPress 3+ theme named 2Clone.

TL;DR… Goto bottom for Demo and Download Links

Why?

I’ve been thinking of 2leep a lot lately and thought that their layout would make for an interesting theme. So I set out on making it into a wordpress theme, cause it looked like it would be easy and a good place to start off as my first theme. Yes, this is my first WordPress Theme I’ve ever released, so be kind, but any pointers is appreciated. The concept behind this theme is not to make a link exchange, or to spoof 2leep. It’s actually a pretty neat theme when you start playing with it. Contributions are also welcome, in the form of code or cash! Just let me know what you think in the comments!

Features

• Full Auto Thumbnails. Don’t worry about them, other than setting the cache folder to 777
• Front Page sorts posts by Comments, Most Views,Randomly(Shuffle) and by Newest
  (Tracked Automatically via Custom Post MetaData aka Custom Fields)
• Custom Menu for the Top nav. Simpley choose what categories you want and add them to the menu.
• Best Ever, just add any post to a category called “Featured” and it gets on the front page.
  (Similar to sticky posts, but the posts are kept seperate)
• VERY Minimal theme, only Two images, and one css file!
• Colors easy to change, only two green colors in css, find and replace for whole new look!
• 7 Widget areas, Sidebar 1, Sidebar 2, Pre Header, Header,Pre Article,Post Article, Footer
• WordPress 3 Required for Menus and Post Queries
• A Very  Simple Theme, means few files to edit, and loads very fast! My own demo site loads in under 2 seconds, without caching!

The Second Menu (menu2.php) Has 5 Hard-coded links:

• New – Newest posts on top.
• Lately Popular – Shows Posts with most views on top (Uses Custom Field to store post views, so the number of views can be edited if desired)
• Shuffle – Shows Random Posts.
• Best Ever – Shows the “Featured” category. Requires Slug to be /category/Featured/ – changable via menu2.php.
• Commented – Shows posts with most comments on top.

All of the above was achieved via WordPress 3 api’s, so NO PLUGINS REQUIRED! Woot!!

Creative Commons Attribution Required. All free things come with strings attached now-a-days, so just leave the footer links alone. That’s all there is to it! I’m thinking about selling a no Attribution version for those interested.

Planned Features to come:

• Random Posts Widget for the sidebars
• Custom Category and Tag pages to mimmik the out pages
• Custom Post Templates, for making posts the redirect to external urls if desired or to look different.
• RSS Links
• Better  Comments
• Post Ratings? Maybe…
• ?? Open to suggestions ??

Installation

Simple themes require a little more footwork to setup, so after you upload it, let’s get it on with a checklist!

• Step 1: Logo! Change it by replacing /images/2logo.jpg with your own!
• Step 2: CHMOD the cache folder to 777 this is where timthumb saves thumbnails to make your site load faster.
• Step 3: Create a Menu, and save it as the Primary menu.  ( Apearance -> Menus )

Colorization

• Edit style.css and do a Find/Replace on #66AE3E to change the theme color.
• Article box hover color is #d3eac7 in the CSS to change

Screenshots

Demo & Download

WP Core hacking

I used this code recently to hack wordpress’s core to allow image uploads that have no file extension.

I was getting a invalid file type security error and had tried all sorts of httaccess trickery to get it to work when I finally resorted to hacking the core of WordPress MU 3.0. This is pretty easy as I found out and only required me to add one line of code. Some of the issues I’m having are that the file size isn’t reported and neither is the dimensions. Any advice or a way for me to make this into a plugin would be very nice, as I’ve never made a wordpress plugin before.

In wp-includes/functions.php find line #2359 and look for this code, and make it look like the code below.

function wp_check_filetype( $filename, $mimes = null ) {
	if ( empty($mimes) )
		$mimes = get_allowed_mime_types();
	$type = false;
	$ext = false;

	foreach ( $mimes as $ext_preg => $mime_match ) {
		$ext_preg = '!.(' . $ext_preg . ')$!i';
		if ( preg_match( $ext_preg, $filename, $ext_matches ) ) {
			$type = $mime_match;
			$ext = $ext_matches[1];
			break;
		}
	}
// http://Green.cx (Allow Uploading of Images without Extension )
if ($ext==''){$ext='jpg'; $type='image/jpg';}
// End WordPress Core Hack
	return compact( 'ext', 'type' );
}

Adding icons from your wordpress posts to the Facbook recommend widget is really easy.

Thumbnails on the Facebook Recommend Social Widget

Adding thumbnails to the facebook recommend
or like widget in wordpress is super easy if you
already use a custom field to store the
thumbnail location for each post.

This is a great way to add thumbnails and can really
make your website stand out on facebook.
You can look at the live example on my website,
on the right where my widget is or
on the screenshot on the left.

See all the icons right there in the feed?
It’s actually really easy with wordpress!

Ok, lets get started:

Start by pasting this code in your header.php
file that is found in your theme’s folder.

Inside the <head> section somewhere,
preferably at the top in header.php.
(*Note this code may need some Modification for your specific theme*)

<? // META FOR FAILBOOK ?>
<meta property="og:title" content="<? if (is_single()){?><? wp_title('');?>|Custom Tagline<? } ?>"/>
<meta property="og:site_name" content="Green Complex"/>
<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
<meta property="og:image" content="<?php echo $thumb ?>"/>

Make sure to make any changes you need in the bold sections to tweak it just right!

For those webmasters who want to know what’s going on, I’ll walk with you line by line.

<? // META FOR FAILBOOK ?>
-This is just a comment, good code is always commented
<meta property="og:title" content="<? if (is_single()){?><? wp_title('');
                                              ?>|Custom Tagline <? }?>"/>
-This Line checks if the page is a post, and if so, it takes the name of the
post and sets that as the meta tag og:title, which is where facebook gets
the page title from (Don't know why the real title tag wasn't good enough)
A Custom Tagline is optional and you could add a little tag line to the
end of every status update like - lol or something.
<meta property="og:site_name" content="Green Complex"/>
-This line sets the site name. The user's status will now
say Jason likes (titleofpost) on Green Complex.
<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
-And here we grab the image link from the posts custom field.
 Where it says 'thumb' you will want to change to whatever custom field
you use for your post images like 'image' 'large' or 'thumbnail'
<meta property="og:image" content="<?php echo $thumb ?"/>
-Then we take the custom image url at return it in the
 meta tag for facebook to pick up, and add to the recommend widget.
 (It should return something like http://site.com/image.jpg)

And that’s it in a nutshell! Adding the images will customize the like experience a bit more for the user

and increase the chance that other readers will check out other stories on your site too. Great stuff!

If this post is a little rough forgive me, I’m still settling in to my new site design!

Effectively blocking Comment Link spam in WordPress

A simple little wordpress setting can save you a lot of  headachs in regards to WordPress Spam Comments…

So I noticed about 330 Spam Comments that needed moderation in my WordPress the other day and that’s when I hit my limit. I hate spammers, and link spammers are the worst. They spam links in comments trying to “Steal” your page rank, or piggy back off of it or whatever. To boost their sites rank in Google. That is the dumbest thing they could do however, because if Google sees 1,000′s of blog comments linking back to your site overnight, Google will ban you. So what’s the point? Why do they do this?

They buy spamming software for hundreds, sometimes thousands of dollars, with the promises that Google will love their website and they will make ten times what the app cost. LOL If that were true, why would they DARE to sell their own software? Why wouldn’t they just dominate Google and rule the world? Because they already have! They used the software back when it worked, after the big “G” stopped them, they needed a new source of income. So they go fishing for suckers. It’s those poor dumb sheep that listen to what these “Black Hat SEO Elite” preach and buy into their crappy comment link spamming software.

So if it’s so rampant how do we fight back? Easy, NO links in comments. Period. Not this No Follow crap either. How easy is it to do this? In word press admin go to your Settings section in the lower left.  Then scroll down to the black list text box, and copy paste this in to it.

.a
.b
.c
.d
.e
.f
.g
.h
.i
.j
.k
.l
.m
.n
.o
.p
.q
.r
.s
.t
.u
.v
.w
.x
. y
.z

(One per line) And finally save your settings. This will block any comment that has a .com .cx .ru . anything

Yes, if someone types a sentence and doesn’t space between them it will block it, but IMO that’s worth the effort to effectively eliminate comment link spam. Can they still spam you? Yes, absolutely, but plain words aren’t as bad as them dragging your Page Rank down and making an association from your site to theirs.

How to add the Facebook “Like” button on every post in any theme.

It’s quite simple actually, I’ll guide you through the whole process after the jump…

Getting Started adding a FB Like button to all posts in your theme:

Open one of the template files for your theme where you would like the button to be. Let’s say we want a button after the title in every post, so we would need to edit single.php

Where ever you want the code to appear, just drop in the following line of code: (Remove all the line breaks, this is a one liner.)

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php
the_permalink()
?>&amp;layout=standard&amp;show_faces=false&amp;width=300&amp;
action=like&amp;font=segoe+ui&amp;colorscheme=evil"
scrolling="no" frameborder="0" allowTransparency="true" 
style="border:none; overflow:hidden; width:300px; height:30px"></iframe>

Valid options for show_faces is true or false. True Shows faces and False doesn’t. Pretty simple.

Colorscheme is light, dark or evil. I choose evil, but I’m not sure what’s evil about it. Looks just the same as light does to me.

Obviously the width and height need to be adjusted to your theme and the placement in your theme to suit it best.

*In the code above, anything marked in this color is what you can change to customize it, or use the customization wizard located at: http://developers.facebook.com/docs/reference/plugins/like If you make your own using the wizard, don’t forget for the to add the Pink code after you generate your button, for the URL just put in blank.com and customize like you want. Then replace blank.com with<?php the_permalink() ?> for using in your wordpress theme.

WordPress leaving behind blogging?

WordPress after over 5 years of being the perferred blogging tool of choice of professional bloggers and recognized worldwide, hosting over 4.5 Million Blogs on WordPress.com, Automatic the company behind WordPress has announced the Beta of version 3 of their popular Blogging platform will no longer be simply a blogging platform. The new WordPress version 3 sports many new features borrowed from its sister product WordPress-MU. In fact WordPress 3 marks a convergence between the two platforms into one very different and new WordPress we’ve never seen before. The Biggest Difference? Blog posts and Pages and now itemized as new objects that are definable.

Wordpress 3.0

To explain it better, I’ll give you an example: You had Posts and Pages. You could get plugins to make Video blogs and plugins to make galleries. But now, Posts are defined as well as pages as “Types” and new “Types” can be defined. You can make a Post type for Podcasts, Videos, Photos and anything you can imagine. WordPress has grown beyond a blogging platform into a full fledged CMS. No, not wordpress AS a CMS WordPress IS a CMS. With content types definable, you could make a website that had a blog, static pages, videos, (for VLogs) PODcasts, download archives, flash pages, anything you can imagine. This ment a complete overhaul of the Page Navigation system in WordPress, and they sought out the Developers at WooThemes to apply their Page Navigation Editing system to the WP Core, and it looks awesome!

Other tidbits about WordPress 3:

• Specific author templates. The function get_author_template() has been expanded in wp-includes/theme.php.
• Background settings configuration
• Custom Post Types

Some preview screenies for those interested:

WordPress 3 Menu Editor

WP3 Menu Editor

WordPress 3.0 Background settings

Background Editor

WordPress 3.0 Custom Post Types

Custome Post Type Creation

Looking back...

WordPress Speed Tip#5: Common Sense goes a long way…

A few things that are not-so-common sense would be to try to use your judgement and think about the following:

1. Less is more; and content is King Kong; we all like Google Analytics, Quantserv, mint, blogroll, Flash based Tag Clouds, and the whole moon. But Too much content at once can be overwhelming, for both your reader, and your server.
2. Go easy on plugins; you don’t have to be a minimalist but try to find that balance between too much and not enough.
3. Combine and reduce, from your categories, tags, plugins, css, javascript, etc. Yes you can get plugins to do this, but your adding a plugin, to do something over and over, that you could do once, and it wound’t need to be done again. Unless your milling out sites, this shouldn’t be too hard of a task.
4. Look at each widget on your site, is it really useful? How many tag clouds have you clicked on? I truly wonder about their importance. After each post, showing the tags is great, because they are relevant. A cloud does give one an instance impression about your site, but I don’t think alot of people have realized that. If your audience isn’t the least bit tech savvy, I kinda doubt they’d even know what it means.
5. Don’t ignore the point about widgets above. I know for a fact that the Google analytics widget that shows a page count, adds 15 seconds to the loading time, per widget. YES, two widgets == 28 Seconds load time. Widgets matter.
6. Avoid too many ads. Don’t get greedy, more ads usually means less $$ anyway. Esp Google Ads, the more ads you have a click value is divided by the number of ads on a page (Ok not exactly but the click value is negatively effected. This is exactly why google tells you to put ads everywhere, as click costs don’t change.) That’s a larger spread for google, but I digress, don’t smear ads everywhere unless you know exactly what you are doing.
7. Avoid “spammy” ads. I quite using ad brite a long time ago, some of their advertisers sneak code through the ads and a bad user experience on your site drives away traffic like the plague. These weird ad scripts can also slow your page down, like the ones that underline links everywhere. Those are the worst! I hate waiting on a page to load while it’s slowly loading ads all over it. I’m sure I’m not alone!
8. K.I.S.S. Keep it Simple Stupid, Don’t over complicate things by installing the first plugin you see. Look for alternative plugins that are better written or have better functionality, chances are If your not happy with it, then someone else isn’t either, and maybe they made a better one.