How to Develop a Theme on a Live Site in WordPress

A quick post to show what I just discovered. Recently I had a case where I needed to show a static coming soon page for non logged-in visitors, but had to show the fully working theme to admin users because the development was done live.

A little Googling got me to this WordPress Maintenance Mode Without a Plugin tutorial by Sivel. It’s a three parts, real quick tutorial that allows for:

  • Maintenance mode both for a certain or indefinite duration.
  • Style-able maintenance mode notification page.
  • Show normal blog to logged-in users.
  • Easily turned-off maintenance mode, since you just add a few files to the WordPress installation and can delete those when you’re done.

Another neat things is that it is done using a maintenance mode mechanism already built-in in WordPress (didn’t know it has that). It works just as expected and when the development is done I can remove the files (only two of them) and everything will be back to normal.

Additionally, another simple way to do this is to serve/create a different, maintenance style theme for non-logged in visitors. User Theme is a plugin that allows for that, but I have yet to test how it works.

I’m sure this is a pretty common situation, so how do you guys do it?

Getting Your WordPress Themes Ready for Apple iPad

So you want to get your themes ready for the newly released Apple iPad? Worry not, take a deep breath and follow this simple checklist:

  1. Do nothing.

Done. And no, that is not a joke. Generally you won’t have to do anything since iPad’s Mobile Safari is a full-fledged browser comparable to desktop browsers, supporting modern web practices of (X)HTML/CSS/JS and even HTML5 and CSS3.

There are some points I want to mention, though: design consideration, specific things you can do on iPad’s browser, and more.

Read the rest of this entry→

Easier Date Display Technique with CSS 3

This small tutorial will try to replicate the famous and recently popular Date Display Technique with Sprites, but opting to do it with CSS 3 instead. The advantage of the CSS 3 method is that:

  • You don’t have to create CSS image sprites.
  • No more sprites limitation. With image sprites the year is limited, the font selection is fixed, the month name is limited to English words only, and so on. With this technique everything can be shown.
  • The CSS is much shorter and understandable.

This only works with modern browsers that support CSS3, of course.

Read more →

Hiding All Children of a Certain Category

With wp_list_categories(), you can exclude categories in some ways:

  • You can hide any category with the exclude parameter, use comma separated list for multiple categories.
  • You can show only the children of a certain category with the child_of parameter.

However, there seem to be no way with to make that function completely hide the entire children of a category. Sure, you can use exclude, but if you have a gazillion of child categories and/or adding them frequently, thing can get cumbersome.

Wait. Why does this matter?

Well, a funny edge case with Pico is that when there are a ton of child category in a dropdown menu, it will create a long, empty white space even after the footer ends. It turns out that Suckerfish dropdown works by hiding those submenus from view, but they’re still there affecting margins. If you have a lot of them, the page will get longer.

So a quick solution would be to hide all children from that category. I looked around and didn’t seem to find an answer. I was hoping for the exclude_tree parameter to do the job, but based on my (admittedly limited) experiment, it won’t do whatever it is supposed to do (the trac ticket is for wp_list_pages(), but I suppose they’re the same).

CSS to the rescue

There’s probably a solution that involves writing a plugin and mucking around with PHP, but being lazy I then realized that wp_list_categories() outputs a class with the category’s ID inside each <li>. In that case, a simple display:none should do:

.cat-item-15 ul { display: none; }

The code example above will hide all children of the category ID 15. Simple, easy, with the added benefit that the children category links still show up on the HTML and therefore readable by search engine crawlers and page readers. Downside is that it only works specifically for that case; can’t really use it for a catch-all solution.

CSS Experiment: Centered Ordered List with List Content below its List Number

Wait. Why does a CSS article show up on a WordPress development blog?

Well first of all I stumbled upon this trick accidentally while developing this one theme I’m working on. And also I promise it will be short and simple enough. So do read on.

For the theme I want to display a Table of Content-style home page that will look like this (click the image to view full-size):

Centered ordered list with list content below its list number

That is a centered ordered list with list content below its number. The HTML structure I have is:

  <ol id="toc" class="clearfloat">       
    <li><h2><a href="#">I Learned that Adding an Egg to Ramen Soup is Awesome</a></h2></li> 
    <li><h2><a href="#">Why I believe printers are the spawn of Hell</a></h2></li> 
    <li><h2><a href="#">I nominate the most dangerous enemy ever created.</a></h2></li> 

…and so, the CSS.

This gets me curious because as we all know, list numbers normally show up to the left of the text. After a bunch of crazy experiments, some of which kept me puzzled about what really happened, I got this solution (leaving out the various text-formatting codes):

body {
  counter-reset: toc 0;  
#toc li:before {
  content: counter(toc, lower-roman) ".";
  counter-increment: toc;
#toc li {
  list-style-type: none; /* hide the numbers, show them via the toc li:before above */
  text-align: center;

Here’s the main idea. I found out that if I use list-style-type:none and use generated content to display the numbers, the number will show up on top of the text. Great. Next we add text-align: center; and bam, everything is centered nicely as expected.

This is the first time I learned about counter-reset and counter-increment. They basically allow you to set the starting number on a list. I use 0 in my CSS so mine starts from 1, but that number can be anything. Here are some articles I found about this topic:

Results and Demo

Here’s a demo page for this CSS experiment. I’ve tested it and it works on Firefox 3.5, Opera 10, Chrome 3 and Safari 4. IE 8 doesn’t seem to support content, so it won’t show the generated number. I can live with that.

And that’s it. Hope it can be useful! I’ll release the theme pretty soon, so subscribe to the feed if you want to be updated.

WPQuestions: A Humbling Experience

It all began with Darren Hoyt’s tweet:

interesting new question over at WPQ courtesy of @jophillips, any ideas? –

The particular question was about adding an “old” or “new” class for a listed Links based on whether the Link is inserted less/more than 31 days from now.

Curious, I dug around the Codex and into the core files. I began to think about filtering wp_list_bookmarks. Tabs upon tabs were opened, lines of code tested. Finished, I logged in into my WPQuestions account and opened the page again.

Amazingly, the question was already solved (this is only a couple hours after Darren linked to it), and there I saw two different solutions, both solved the problem with a short and easy to understand piece of code. One of it involved editing core file, which generally is undesirable, but both codes were undeniably elegant and to-the-point.

Continue reading this entry →

Bulletproof WordPress Pages-based Navigation

One of the most used navigation method used in WordPress themes is to list all of the blog’s Pages and put it horizontally on the header area. The code will look like this:

<ul id="nav">
  <li <?php if ( is_home() ) { ?> class="current_page_item"< ?php } ?>>
    <a href="<?php echo get_option( 'home' ); ?>/">Home</a>
  < ?php wp_list_pages( 'title_li=' ); ?>

The most important piece there is the wp_list_pages function, which will automatically list all Pages and add class="current_page_item" to the Page link if it’s currently being opened.

Before that function, we add a little more code to display a front page link. Naturally we put it first on the list, and we add our own class for when the front page is currently open. All is well so far, and that is basically the code I’ve been using (including on Pico).

Continue reading this entry →

Page 3 of 41234

Latest Links More →

The Week in WordPress: 2nd Week of November, 2012

Ghost, Rethinking WordPress. Also don’t miss the discussion over at Hacker News.

For The Aspiring Professional WordPress Developer is a collection of good advices for those wanting to be a WordPress pro.

Recently I had the task of cloning a WordPress site both to my local server and to another development server that I host. The Duplicator plugin has been a massive help for me, makes cloning really simple and fast. Highly recommended.

Classy Plugins

Eric Mann uses classes in his non object-oriented WordPress code. Here’s why.

Playing Nice with the “the_content” Filter

This great article could be useful if for some reason you have a need to filter the_content in your theme.

Google Goes After Links In WordPress Themes

New post from the Search Engine Roundtable: Someone “…received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.” The problem is that those links are in the form of sponsored links on footer (a practice I saw a lot in the past, not so much in the present).

I don’t think it will be easy, or even possible, to do what Google requested. If a theme contains an upgrade notification feature it might be possible to do, but even then the users might choose not to upgrade.

Secondly, if this is true, I wonder whether Google differentiates between credit links (“Designed by…”) and sponsored links. I would say they should, but then again I’m not a SEO guy.

Theme Options Gallery

New favorite blog: Theme Options Gallery by Konstantin Kovshenin, discussing “the best (and the worst) theme options screens around”. Loving the in-depth article and discussions already available there.

Dive into Responsive Prototyping with Foundation

Pretty safe to say that if it shows up on A List Apart, it’s going to be the de facto standard. Time to learn some Foundation.

Google HTML/CSS Style Guide

Couple of days ago we got Starbucks’ style guide, and now here’s another by Google. I think the interesting thing is the rule to “\[o\]mit the protocol from embedded resources“. So instead of typing <script src=""></script>, they recommend to type <script src="//"></script> instead (without the http part). Never heard of that before.

“I Woke Up but My Server Wasn’t There”

Robb Shecter’s WordPress site got popular overnight thanks to Reddit and went down immediately. The interesting aspect is that the site was new and it’s on a relatively high-powered server. The author then found that the theme he used in particular was doing too many (47!) server requests at a time, and the site ran along very well after switching back to Twenty Eleven.

I think it’s an important read for any theme developers out there.

Read the story here

Modern Web Development – Part I: The Webkit Inspector

A superbly detailed article, part one of a series about web development toolchain.

Crayon Syntax Highlighter plugin

I’ve always been on the hunt for that perfect syntax highlighter plugin. Currently I’m using WP-Syntax, which does its job very well. However I’ve just found this plugin called Crayon Syntax Highlighter, which could be a good contender for the best WordPress syntax highlighter plugin out there.

It looks good, and I like the little toolbar on top of the code box, with the small icons. Additionally, it also offers a lot of customization options. Lastly, it seems to support the same pre tags to wrap the code, similar WP-Syntax, so if I do make the switch, my old codes will still be highlighted correctly.

Starbucks Style Guide

The Starbuck website has its own style guide, accessible for public. I think its a neat idea, wouldn’t it be cool if themes have their own style guide? Pretty sure it will be helpful both to users or developers alike, if time consuming to write.

Also, I wonder what they use for the various toggles panel on the top right corner like on this page. It shows background, baseline, boxes, can be used to change windows size as well. Looks like it’s custom coded, imagine how super useful it can be if it’s a jQuery plugin.

NHP Theme Options Framework

I love theme options frameworks. And I want you guys to check this new framework called NHP. It passes my “does its UI look like the rest of WordPress enough?” test (screenshots here), it has tons of field types, and even offer validations, too.

Can’t wait to test and probably use it too in my to-be-released theme hint hint

What Dev4Press thinks WordPress needs…

This post at Dev4Press outlines what MillaN, its author, thinks would be a necessary addition to WordPress.

Based on the comments, it appears that a lot of people agree with this list. Some of the items mentioned can be achieved with plugins (e.g Tax Meta Class to add meta data to taxonomy items, Custom Post Types Relationships for, well, creating custom post type relationships), so expect there to be a bunch of debates about what should and shouldn’t go to the core.

I like his list, but I disagree with his assessment that we don’t need new core themes. We do, especially to bring about the standard for how a theme options should be designed. This is the aspect that desperately needs to be standardized. Different theme companies and individual theme designers have their own idea of how the theme option UI should look, and it’s hurting the users.

Upgrading from WordPress 1.5

I recently spotted this interesting Ask Metafilter thread where user gd779 tries to find a way to upgrade his old, WordPress 1.5 install. One of the answer is pretty detailed:

I think the right approach is going to be:

  1. Do a full backup of your WordPress files
  2. Do a full database backup (mysql dump using phpMyAdmin or similar)

Then, from your 1.5.2 install:

  1. Upgrade to 2.0
  2. Upgrade to 2.5.1
  3. Upgrade to 3.0
  4. Upgrade to 3.3.1

It is quite fascinating thinking about the solution to this. There’s an official Codex page called Updating WordPress, but it doesn’t seem to go that far back in time.

Smashing Special: What’s Going On In The WordPress Economy?

Siobhan McKeown wrote this awesome, birds-eye view of the whole WordPress economy. Make sure to read this two-part article so you know what’s up with WordPress and identify what opportunity lies ahead.

I agree with Matt’s prediction on that article:

I think the next big opportunity is around agencies and consulting—there will be five to six companies as large as Automattic, just providing high-end consulting and services to the large customers who are adopting WordPress en masse.

Start with Part I of the article.

Automatic responsive images for WordPress

The one issue with creating responsive web design is in displaying images, especially getting the most appropriate size in a particular screen size. One solution for it is the Responsive-Enhance jQuery plugin. It works by loading small-sized images by default, then checks the screen size and loads the bigger version if necessary.

According to its creator, Josh Emerson:

This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed.

This tutorial by Keir Whitaker takes the whole thing further by teaching us how to apply Responsive-Enhance in WordPress.