Category Archives: Tutorials

WPtouch Pro, Jetpack Mobile, Responsive

Posted on by
Reply
WPtouch Pro with thumbnail images

blogs.princeton.edu, as seen using the WPtouch Pro plu­gin with thumb­nail images

Site admins who would like their Word­Press site to be opti­mized for mobile devices now have a few more options. On this net­work, the default set­ting for new blogs is to have WPtouch Pro acti­vated, but first time vis­i­tors see the “desk­top theme” and can click a link to switch to the WPtouch Pro theme.

WPtouch Pro is a com­mer­cial theme that tries to cre­ate an “app-like” expe­ri­ence for mobile users of your site. It is faster load­ing and max­i­mizes ver­ti­cal space, hid­ing the search and page nav­i­ga­tion behind a pop-up menu. By default it shows cal­en­dar icons next to each of your posts, but that can be changed to post thumb­nails. A tablet view is also a con­fig­urable option, although the default set­ting is to use the WPtouch view for pocket-sized devices and use the desk­top theme for tablets. If a site admin is will­ing to invest the time to explore all of the con­fig­u­ra­tion options, a WPtouch Pro mobile site can look rather impressive.

The Jet­pack super-plugin recently added a “Mobile Theme” option to its dozens of fea­tures. This plu­gin fea­ture also dis­plays an alter­nate theme to mobile view­ers. This theme, unof­fi­cially called “Minileven,” is a min­i­mal­ist ver­sion of the Twenty Eleven theme, with a more com­pact menu. There is a sep­a­rate con­fig­u­ra­tion option for an excerpt view or a full-post view. The “Edit CSS” item under the Appear­ance menu has an addi­tional option to allow cus­tom CSS to be applied to the Minileven theme. If you choose to acti­vate the Jet­pack mobile theme, you should go to the Plu­g­ins menu and deac­ti­vate WPtouch Pro on your site to avoid conflicts.

If you choose to dis­able both of these plugin-based mobile themes, you can rely on the respon­sive dis­play of the desk­top themes. All of the approved themes on this sys­tem are respon­sive, mean­ing that they adjust their dis­play accord­ing to the width of the view­ing device or win­dow. For­tu­nately, the afore­men­tioned cus­tom CSS fea­ture finally allows CSS with media queries, so a site owner can have full con­trol of the CSS dis­play on all device sizes. The respon­sive theme for blogs.princeton.edu is just the default Twenty Eleven theme with some cus­tom CSS, includ­ing media queries.

Carousel of Zodiac Heads

Posted on by
Reply

The new instal­la­tion of mon­u­men­tal sculp­tures in front of Robert­son Hall is the per­fect oppor­tu­nity to show off the Jet­pack plugin’s new Carousel fea­ture, which extends the Word­Press native gallery fea­ture with a pre­sen­ta­tion over­lay that dynam­i­cally expands to fill the entire browser window.

Below are pho­tographs of Ai Weiwei’s “Cir­cle of Animals/Zodiac Heads” that I took Thurs­day after­noon. A sec­ond gallery of close­ups and some basic instruc­tions for adding gal­leries follow.

Con­tinue read­ing →

Activating Jetpack Comments

Posted on by
Reply
PU netID, WordPress.com, Facebook, Twitter

There can be more than one.

A recent addi­tion to the Jet­pack “mega-plugin” is a fea­ture that WordPress.com users have enjoyed for over a year  — the abil­ity for Face­book, Twit­ter, and WordPress.com users to authen­ti­cate in the com­ment form and use that iden­tity to leave a com­ment. Native users (in our case, Prince­ton netID users) can still use that iden­tity to comment.

Active WordPress.com users, may remem­ber this com­ment system’s code name, High­lander Com­ments. There can be only more than one?

Other com­ment plu­g­ins offer mul­ti­ple authen­ti­ca­tion options, namely Dis­qus and IntenseDe­bate; how­ever, those sys­tems store the com­ments on exter­nal servers, and the JavaScript to load those com­ments can be a bit slow. The Jet­pack Com­ments fea­ture just builds off of the native Word­Press com­ment system.

jetpack comments

Jet­pack Com­ments acti­va­tion button

We will be enabling Jet­pack Com­ments for all new sites on our net­work. Admin­is­tra­tors for exist­ing sites will have to go into the Jet­pack area of the Word­Press admin inter­face and click the blue “Acti­vate” but­ton. If the default Word­Press com­ment sys­tem is pre­ferred, site admins can deac­ti­vate that fea­ture on the same admin page.

For more infor­ma­tion about Jet­pack Com­ments, check out the doc­u­men­ta­tion on Jetpack.me.

Custom CSS

Posted on by
Reply

Edit CSS menu optionAlthough there are thou­sands of Word­Press themes out in the wild, we will be ini­tially mak­ing avail­able only a small col­lec­tion of “curated” themes. These themes will have a small amount of Prince­ton Uni­ver­sity brand­ing. Most will be min­i­mal­ist, with neu­tral col­ors, and some will have con­fig­urable options. As the ser­vice grows, so will our theme offerings.

How­ever, site own­ers some­times want to devi­ate from the default appear­ance of the themes, or they might (for some inex­plic­a­ble rea­son) want to elim­i­nate all traces of orange and black. Sites in our Roxen CMS envi­ron­ment have the custom.css file, and we wanted to offer a sim­i­lar option with WordPress.

For­tu­nately, Automat­tic, the com­mer­cial entity behind WordPress.com, cre­ated a plu­gin that pro­vides this fea­ture. Site admins will find an “Edit CSS” menu under the Appear­ance sec­tion in the left nav­i­ga­tion of wp-admin.

Con­tinue read­ing →