Jetpack Comments

I’ve talked about it before: I like running my own web server. WordPress.com is awesome (seriously, go sign up for a blog), but I’m a nerd and I like configuring nginx and Apache and deploying with git. Lots of other people do too. It’s why Jetpack exists in the first place.

There have always been a few things about WordPress.com that I’ve been jelous of. That list got smaller this week with the release of Jetpack comments though. I’ve been searching for the right comment solution for a long time. WordPress comments are cool because you can style them with the rest of your site — I always saw the comment form as a barrier though. So I tried things like intensedebate and disqus — those things are cool because they make the process of submitting a comment and identifying yourself with a site you’re already logged in to very simple. The problem with disqus and intensedebate is that they’re not all that customizeable. But Jetpack comments fixes this.

Jetpack comments replaces the standard WordPress comment form with one similar to what you see on WordPress.com blogs. You can identify with WordPress.com, Twitter, or Facebook. Comments are submitted to your site just like they are with the normal comment form. I’ve already switched from disqus here.

One thing to note, your site must use the comment_form() function to generate the form. Some themes create the comment form manually which doesn’t give the plugin anything to hook into.

Now I just need to work on the comment styling here :)

Roots Hide WP

Theme author, Ben Word, has been working for some time on Roots: “a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.” Back in November, Word wrote an article about how they’re hiding the fact that the theme is powered by WordPress.

In the Roots theme we’re taking several steps to ensure that a visitor to your website won’t know that you’re using WordPress

They do some interesting things, including rewriting URLs to theme assets & plugins to hide the wp-content directory and rewriting URLs to root-relative addresses. Additionally there’s a “walker” class for custom navigation menus, so you could do something like:

wp_nav_menu(array('theme_location' => 'primary_navigation', 'walker' => new roots_nav_walker()));

I’m offering it here as a plugin with some minor changes. Word’s original post is code directly from the Roots theme which is meant to “hide” the fact that a site is running on WordPress. That’s fine for them. I didn’t want to make any decisions about where the assets folder should be for an unsuspecting person who may have been using WordPress for some time. Cleaning wp_head sounds good in practice and I’m sure there’s some stuff in there that most people don’t need, but there’s a reason it got so messy in the first place. I’m still doing a bit of cleaning there, the scripts to make tagging word in Windows Live Writer will be removed along with the wp_generator script that writes out the WordPress version to a meta tag — it’s considered to be a security risk to let people know your WordPress version.

View in Plugin Directory Download on Github

Self-signed SSL Certificates

If you’re logging into a website or posting to the web unencrypted, you’re doing it wrong. I use WordPress and it’s insanely reasonably secure, but there’s nothing they can do about unencrypted traffic between your browser and the server.1 WordPress has a feature to force encrypted logins and administration pages, but that’s not going to do you much good if you don’t have a SSL certificate.

Self-signed certificates can be perfectly safe, but there are a couple things you should know.

  1. Don’t let anybody get your key file. With it, anybody can download your certificate and serve it on their website.
  2. Listen to the warnings your browser tells you about. Know that your self-signed certificate may generate warnings and that the only thing companies like Verisign do is verify the certificate is unique and was generated by a known good source.
  3. You probably want to avoid serving self-signed certificates on sites meant for pulic consumption because of the errors mentioned above. I’m going to offer an exception to this here, but keep the error messages in mind.

Since you are the only one logging into your WordPress site, you don’t have to worry about scaring away readers with a self-signed SSL certificate. If you’re running an e-commerce site, you’re going to want to go ahead and pay for a certificate that’s not going to generate warnings. It’s possible to tell your browser to ignore the warnings, but you’ll still scare away most potential customers.

Generate the Certificate

The first thing we need to do is generate a server key. From there we’ll generate the certifiate signing request and then the certificate. Last, we’ll need to generate a version of the key that doesn’t require a password or you’ll have to enter the password on the console every time Apache restarts.2

openssl genrsa -des3 -out server.key 4096
openssl req -new -key server.key -out server.csr
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
openssl rsa -in server.key -out server.key.insecure
mv server.key server.key.secure
mv server.key.insecure server.key

As I’ve mentioned already, make sure you guard server.key with your life. Ideally you would’ve used a secure password to protect the key at the beginning, so server.key.secure should be safe, but guard that too. You’ll want to make sure you get a copy of server.crt on your local machine. If you’re on a Mac, you can add it the the Keychain so you won’t be bugged every time you visit the site with your self-signed certificate.

Installing the Certificate

In this case, I’m going to install the certificate on an Ubuntu server running Apache, but the process will be similar for any Unix environment. Assuming you already have Apache running, we’re going to move the key and the certificate to the place where they’ll be served from, and enable mod_ssl.

cp server.key /etc/apache2/ssl
cp server.crt /etc/apache2/ssl
a2enmod ssl

Then we’ll need to configure the virtual host. Look in /etc/apache2/sites-available for default-ssl. There you’ll need to configure the host just as you did when you initially set up the server, being sure to change the DocumentRoot and Directory from /var/www if need be. Then, enable the virtual host and restart Apache.

a2ensite default-ssl
service apache2 restart

If everything was configured correctly, you should now be able to visit your site with the https protocol.

WordPress

On a WordPress site, you can force SSL logins and administration by adding the following lines to your wp-config file.

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

Update

It has been pointed out by a few people that training people to ignore security warnings isn’t the right approach. I never meant to suggest training people to ignore the warnings. If you’re going to self-sign an SSL certificate for your website, you have to install the certificate locally or you’ll have no way to verify that you’re actually connected to the right host and not a victim of a man-in-the-middle attack.

Resources


  1. I’m not talking about WordPress.com blogs here. If your site is hosted on WordPress.com, they’ve obviously taken care of all this already. 
  2. I’ve been there. It’s not fun. Even a little. 

Introducing: Link Posts

For those familiar with Daring Fireball, or Tumblr sites like MG Siegler’s parislemon, or Marco Arment’s website, link posts are probably pretty familiar. I’ve noticed this trend more and more. Maybe I was missing something before – they’ve been on Daring Fireball as long as I can tell. I’ve always shared links that I find interesting on Twitter, but 140 characters isn’t usually enough to add my thoughts and Twitter doesn’t feel permanent at all.

What are link posts?

A link post is literally just a link attatched to an article. The heading is usually linked to the link that’s attached to the post instead of a permalink. They let you comment on another article in longer form than you would normally want to write in a comment. And, if the author of the site you’re linking to has pingbacks turned on, they’ll be notified of your post in the comments. It’s a useful way to share interesting links with your readers and let them know your thoughts as well.

Since I’ve implemented this feature for the next gernation of this site, and I’m running the new site internally, I decided to add the feature to the current generation theme. I’ve already posted some links, so you can check it out. This implementation isn’t necessarily exactly how it will be when the new version launches, but at least nobody is left wondering about any of the articles here. Currently, link posts are linked directly to the source article in the headline of the homepage and on the single post page. Both pages also have an arrow (→) at the end of the title, indicating that the link is going to take you to an external page.

Network Favicons

Network Favicons is a simple WordPress plugin that allows blog owners on a multisite network to upload a favicon to the root of their theme’s directory and have automatically be used as the site’s favicon. This requires a one-to-one relationship between blogs and themes, but that could be as simple as creating a child theme for the favicon if you’re already using the same theme on multiple blogs.

I made the theme for my new hosting network, network.joshbetz.com. This is where I’ll be hosting future client websites and I needed the ability to use custom favicons instead of just having my own favicon displayed on every blog.

Note: If no theme is available in a theme’s directory, the site still just use the default one provided at the domain’s root.

View in Plugin Directory Download on Github

WordPress & Low-Memory

I run a 256mb Cloud Server from Rackspace. As far as web servers go, you’re not going to find anything with less RAM. As long as you don’t have to deal with a ton of traffic, you can make this work pretty well. It’s taken me quite a bit of testing and research to get to where I am right now, so I wanted to share some of the things I’ve done in the never ending process of optimizing servers and increasing speed.

I work mainly with WordPress which puts somewhat of a limitation on what we can do. For example, if you start looking for ways to speed up Apache, one of the first things you’ll find is to turn off .htaccess. While we could do that, it would take more modification of core WordPress than I’m really willing to handle. If I’m going to be modifying anything, I’d rather have it be my web server configuration.

The main problem is that Apache really isn’t made for such harsh conditions. If you’re running a server with 4GB of RAM, you have some room for bloated software. This first tip can help speed up any web server though, and that’s installing nginx as a front-end to Apache. You could also use lighttpd, but I’ve read more about nginx and since that’s the solution I went with, that’s what I’ll document here.

Nginx is far more efficient at serving static files than Apache is. The reason we’re not going completely away from Apache is that it’s easier for most people to work with to serve the dynamic requests. So we want any static resources to be served by Nginx, and everything else can get passed through to Apache. And we’ll move Apache to port 81 and make sure it can’t be accessed from outside the server. That way, all the requests can be served instantly to Nginx and back across the web to our user.

One thing you’ll want to do before you install Nginx is turn off KeepAlive in the Apache configuration. Since Nginx will be the front-end, we’ll let that handle the KeepAlive requests.

I have a pretty simple Nginx configuration in nginx.conf

user www-data;
worker_processes 4;

error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
# multi_accept on;
}

http {
include /etc/nginx/mime.types;

access_log /var/log/nginx/access.log;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;
tcp_nodelay on;

gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}

And then the virtual host for this site looks like this:

server {
listen 80;
access_log /var/log/nginx/joshbetz.com.access.log;
server_name joshbetz.com;
root /var/www/joshbetz.com;

location / {
#root /var/www/joshbetz.com;
index index.html index.php;
error_page 404 = @dynamic;
}

location ~ .php$ {
proxy_pass http://localhost:81;
proxy_buffering on;
proxy_buffers 12 12k;
proxy_redirect off;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location @dynamic {
proxy_pass http://localhost:81;
proxy_buffering on;
proxy_buffers 12 12k;
proxy_redirect off;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location ~ /.ht {
deny all;
}
}

There’s a lot of research and trial & error involved in building this, but the basic idea is that we want to serve any static files directly, but anything that ends in .php should be forwarded on to Apache. You’ll notice the proxy_pass http://localhost:81; directive.

On that note, we’ll want to make sure Apache is listening on port 81. In ports.conf, you’ll need to change the NameVirtualHost and configure it to listen only internally with these lines.

NameVirtualHost *:81
Listen 127.0.0.1:81

Make sure you change any named virtual host that is specified for port 80 to port 81.

Restarting Apache and Nginx should give a speed increase, but there’s still one more thing to make sure the site stays fast. First of all, make sure the mpm module you’re running is prefork. Then change the prefork configuration in apache2.conf. Look for the line that specifies the mpm_prefork_module and change it to something like the following

StartServers 1
MinSpareServers 1
MaxSpareServers 5
MaxClients 50
MaxRequestsPerChild 500

Apache processes are big, and if you let them run forever they’ll become more and more bloated. What we’re doing here is limiting the amount of Apache processes that can run and making sure they don’t last for too long. With MaxRequestsPerChild set at 0, the Apache processes can last forever. Setting it closer to something like 500 is good for an application like WordPress that may or may not be super awesome at managing memory.

Test your configuration

Sometimes it’s hard to tell if changes to your configuration had any effect, or more importantly, will last. Running Apache Bench can give you some insight into these questions.

After I make a change I like to restart Apache and Nginx and load a few pages to see what the experience is like. Then I’ll run Apache Bench. I don’t always run it. Something that’s important to learn about the web and user-experience in general is that if it feels right, it’s probably right. The more you deal with interfaces and user interactions, the more you’ll learn what’s good and what’s not. If it feels fast enough for you, it’s probably fast enough for most people. That being said, Apache Bench can expose problems that you might not have discovered otherwise so it’s good to run sometimes.

I usually run it with the same settings, but it doesn’t hurt to experiment.

ab -n 100 -c 10 http://site.to.test/

With the configuration I’ve gone over in this article, I get ~54 requests/second on a clean WordPress install with the default Twenty Eleven theme. With my custom theme, which is pretty heavy and occasionally makes requests for my twitter feed, etc. and actual posts to load I can get ~18 requests/second.

My configuration isn’t perfect, so if you see something that looks wrong or have an idea on something I should do different, let me know, I’d love to talk.

Resources

JB Shortener

Almost two years ago I wrote about a new short URL system I started using on this blog. I’m finally releasing this in plugin form with a few additional improvements. WordPress has support for “short urls” built in and will even let you use the wp.me system if you have the Jetpack plugin installed. Instead of using wp.me, I like using my own custom domain. This plugin gives you an option to set the short domain that you’d like to use and includes the helper files to install on the short domain. Continue reading

Converging on WordPress

It’s interesting watching the web and its technologies develop. A project that I’m currently finishing up is for a website that I’ve seen through a few iterations now. I did the first design for them a little over four years ago as a sophomore in high school.

At the time, I had already been using WordPress for awhile. It didn’t really even seem like an option for this site then though. As crazy as it seems now, Dreamweaver templates were what we decided on and that kept everything fairly sane — at least by the standards at the time. Managing it today would be considered a nightmare. Continue reading

Jetpack by WordPress.com

It’s been quiet around here. I’ve been busy, but I couldn’t let this one slip past no matter how much else I have to do.

Matt and company surprisingly released a new plugin for us .org users today. He actually hinted at a new project abbreviated JP in his new years resolutions, but who guessed it would be called Jetpack?

So, what exactly is Jetpack?

Jetpack supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com

Really, it provides a reason for me to stop second guessing myself about whether or not to host my blog on WordPress.com. Not that I would ever have actually done it, but I’ve often considered the advantages of using Automattic’s managed WordPress solution.

Besides practically bullet-proof servers, WordPress.com users have always had a few shiny things that have made the service tempting – even for people like me who want control over every single aspect of what is my website.

What do we get?

Initially we’re getting updates to WordPress.com Stats, the Twitter Widget, Gravatar Hovercards, WP.me Shortlinks, Sharedaddy buttons, LaTeX, After the Deadline, and Shortcode Embeds. And it looks like there’s more on the way. This is all packaged in one, nice plugin and updated and currated by Automattic.

Now, I won’t be using all of the extras, but right away the Stats and Sharedaddy links seem quite useful. I definitely won’t be using the Twitter Widget or WP.me Shortlinks, as I’ve got custom solutions that solve both of these problems in a way that I like. I haven’t been a fan of shortcodes lately, so I probably will skip that one as well. After the Deadline is something I’ll probably turn on for awhile and I’ve already got some ideas for ways to implement Gravatar Hovercards.

The Future

More than anything, this has me excited for the future of what this could mean for self-hosted WordPress. The additions that they’ve decided to ship with are cool, but I see a ton of potential for this product.

One thing that I’d really like to see is tighter integration into the WordPress.com network with a “WordPress bar” for users who are currently logged in to their WordPress.com accounts with subscription options, random post, shortlinks buttons, and the like. At this point, I can’t see anything stopping them from implementing these features. It would make that network instantly larger and more valuable.

Go get it

I definitely recommend everyone with a self-hosted blog go check out Jetpack. You can get it from the dashboard by searching for “Jetpack” in plugins or go to their website at jetpack.me

WordPress 3.1

Soon we’ll be seeing WordPress 3.1 and since I’ve installed the beta on my blog network, I thought I’d share some of the new features that I’m a fan of. Keep in mind, this is in a multiple user environment so some of the stuff that I’m talking about here is specific to that. I think most of it should apply to everyone though.

Admin Bar (#14772)

The first thing you’ll notice is the “admin bar”. If you’ve ever used wordpress.com, you’ll probably recognize it from there — although it’s not exactly the same. Since I’ve got multisite running on my network there’s a list of “My Sites”.  It also gives you a link to your profile, along with dropdowns for “Add New”, “Appearance”, and  a “Comments” tab. They take advantage of the new shortlinks api introduced in WordPress 3.0 by giving a short link tab on some posts and pages.

Network Admin (#14435)

In a multisite environment, the Network Admin tab on the left has been removed with a new link in the top right that will take you to a special Network Admin dashboard. This is pretty much all the same stuff that you’d get in the “Super Admin” options panel in previous versions. You can manage the sites, themes, plugins, all the normal stuff you’d expect there.

Custom Post Type Index Pages (#13818)

We’ve had custom taxonomies for a while now and 3.0 gave us custom post types, but in 3.1 we get archives for the custom post types. The work around for this previously was to create a page template with a custom query and use that as your archive page. Now we get a new set of templates to work with archive-post_type.php where post_type is the name of the custom post type.

The Rest

Those are some of the big ones, but here’s the rest of the list from the Beta 1 announcement:

  • Post Formats (#14746) is kind of cool. It takes the idea of “Asides” and makes them officially supported with any crazy hacks. It really becomes cool when you make special post types for photo galleries or videos. This is something that I’d consider adding to my blog to bring t.joshbetz.com right into my main blog. I think of it as the “Tumblr” feature.
  • Theme Search (#14936)
  • Internal Linking (#11420) means you don’t have to go out to your homepage and do a search or go to google everytime you want to cross link to another post. When you click the link button in the post editor, there’s a search built into the dialog.
  • Ajaxified Admin (#14579)
  • Updated Tiny MCE (#12574)
  • Multi-taxonomy Queries (#12891) are huge for developers as WordPress becomes more popular as a full CMS. Custom taxonomies and post types really let us include rich metadata in posts, and being able to query against that is huge.
  • Admin CSS Cleanup (#14770)
  • User Admin (#14696)
  • Password Reset Redux (#5919)