WPtouch Pro, Jetpack Mobile, Responsive

WPtouch Pro with thumbnail images

blogs.princeton.edu, as seen using the WPtouch Pro plugin with thumbnail images

Site admins who would like their WordPress site to be optimized for mobile devices now have a few more options. On this network, the default setting for new blogs is to have WPtouch Pro activated, but first time visitors see the “desktop theme” and can click a link to switch to the WPtouch Pro theme.

WPtouch Pro is a commercial theme that tries to create an “app-like” experience for mobile users of your site. It is faster loading and maximizes vertical space, hiding the search and page navigation behind a pop-up menu. By default it shows calendar icons next to each of your posts, but that can be changed to post thumbnails. A tablet view is also a configurable option, although the default setting is to use the WPtouch view for pocket-sized devices and use the desktop theme for tablets. If a site admin is willing to invest the time to explore all of the configuration options, a WPtouch Pro mobile site can look rather impressive.

The Jetpack super-plugin recently added a “Mobile Theme” option to its dozens of features. This plugin feature also displays an alternate theme to mobile viewers. This theme, unofficially called “Minileven,” is a minimalist version of the Twenty Eleven theme, with a more compact menu. There is a separate configuration option for an excerpt view or a full-post view. The “Edit CSS” item under the Appearance menu has an additional option to allow custom CSS to be applied to the Minileven theme. If you choose to activate the Jetpack mobile theme, you should go to the Plugins menu and deactivate WPtouch Pro on your site to avoid conflicts.

If you choose to disable both of these plugin-based mobile themes, you can rely on the responsive display of the desktop themes. All of the approved themes on this system are responsive, meaning that they adjust their display according to the width of the viewing device or window. Fortunately, the aforementioned custom CSS feature finally allows CSS with media queries, so a site owner can have full control of the CSS display on all device sizes. The responsive theme for blogs.princeton.edu is just the default Twenty Eleven theme with some custom CSS, including media queries.

Carousel of Zodiac Heads

The new installation of monumental sculptures in front of Robertson Hall is the perfect opportunity to show off the Jetpack plugin’s new Carousel feature, which extends the WordPress native gallery feature with a presentation overlay that dynamically expands to fill the entire browser window.

Below are photographs of Ai Weiwei’s “Circle of Animals/Zodiac Heads” that I recently. A second gallery of closeups and some basic instructions for adding galleries follow.

Continue reading

Activating Jetpack Comments

PU netID, WordPress.com, Facebook, Twitter

There can be more than one.

A recent addition to the Jetpack “mega-plugin” is a feature that WordPress.com users have enjoyed for over a year  — the ability for Facebook, Twitter, and WordPress.com users to authenticate in the comment form and use that identity to leave a comment. Native users (in our case, Princeton netID users) can still use that identity to comment.

Active WordPress.com users, may remember this comment system’s code name, Highlander Comments. There can be only more than one?

Other comment plugins offer multiple authentication options, namely Disqus and IntenseDebate; however, those systems store the comments on external servers, and the JavaScript to load those comments can be a bit slow. The Jetpack Comments feature just builds off of the native WordPress comment system.

jetpack comments

Jetpack Comments activation button

We will be enabling Jetpack Comments for all new sites on our network. Administrators for existing sites will have to go into the Jetpack area of the WordPress admin interface and click the blue “Activate” button. If the default WordPress comment system is preferred, site admins can deactivate that feature on the same admin page.

For more information about Jetpack Comments, check out the documentation on Jetpack.me.

Custom CSS

Edit CSS menu optionAlthough there are thousands of WordPress themes out in the wild, we will be initially making available only a small collection of “curated” themes. These themes will have a small amount of Princeton University branding. Most will be minimalist, with neutral colors, and some will have configurable options. As the service grows, so will our theme offerings.

However, site owners sometimes want to deviate from the default appearance of the themes, or they might (for some inexplicable reason) want to eliminate all traces of orange and black. Sites in our Roxen CMS environment have the custom.css file, and we wanted to offer a similar option with WordPress.

Fortunately, Automattic, the commercial entity behind WordPress.com, created a plugin that provides this feature. Site admins will find an “Edit CSS” menu under the Appearance section in the left navigation of wp-admin.

Continue reading