Archive | Site Design and Functionality

How to use Plugins and Themes to customize a Commons Site

Where can I find metrics and analytics for my site on the Commons?

Let us know if you want us to add your site to Google Analytics. We’ll be happy to set you up and provide weekly or monthly reports, emailed to you. They can be formatted as either a spreadsheet or a PDF.

There are other options as well:

Statistics For Your Site

Read about Google Analytics on the Commons:

Getting Started with Google Analytics

FancyBox Plugin for WordPress

Fancybox is an easy to use plug-in that gracefully enlarges images in your posts and pages when a reader clicks on them.

When you upload an image to your blog using the “Media>>Add New” tab in the dashboard, WordPress automatically saves that image in up to four different sizes: thumbnail, medium, large, and full-size, depending upon the image’s original size. (When you “Insert into Post,” you can see which sizes are available.)

If you activate Fancybox, and a reader clicks on the image, a popup will display the image in its largest available size.

The plug-in will automatically convert all images in your blog that don’t have pre-existing links. If you don’t want the Fancybox effect on some images (perhaps you are displaying them in their largest size already), you can delete the link, and the popup will not appear. (This can be done best in the HTML view).

The plugin has a page with many customizable settings to change the borders, zoom rates, overlay color and opacity, but the default settings work fine for starters.

One warning: Fancybox does not work well with posts that use WIKI Inc plugin to “include” wiki page content. If the wiki page that you include has images in it, the Fancybox effect will not work.

Here is a post with a thumbnail image:

And when you click on the thumbnail, Fancybox does its magic:

Have fun with this useful and easy to use plugin!



Create a FAQ Page on Your WordPress Site

The Q & A WordPress plugin lets you easily add a configurable question & answer dialog on your site. First you create individual “FAQ” custom posts, where the post title is the question, and the post content body is the answer. You can assign categories to each FAQ post, and when you want to display your questions and answers, you use a simple short code. This is a neat way to provide a quick, compact Q&A dialog for your readers to quickly get onboard with new concepts, or create a review page that re-enforces important concepts.

Getting Started


When you activate the plugin, you’ll see a new section (“FAQs”) added to your dashboard (see image, above). Click on “Add New” to add a new Question & Answer. Here you can create a list of questions and answers that will appear on a single page:


Or you can use short codes. Remember – the title is the question, the content is the answer. You’ll need to repeat this process for each Q & A you add. To display your compiled list of questions and answers, use the following short code in any page or post:

Optionally, you can qualify the short code with a category, which will display only the Q&A’s in that category. That code looks like this (where “faq1” is the name of one of your categories):

Short codes can be sensitive to copy/paste operations – so if you have troubles (like I did), retype the short code rather than pasting what you copied.

The answer to your question is the post content, and it can contain images, links, text, and embedded video – anything that a normal post or page can contain.


If you go to your Dashboard and click Settings>>Q&A, you should see the following options that help you configure how you want your FAQs to appear. If you want, you can create a FAQ page dedicated to questions and answers. Or you can simply integrate your Q&A’s within posts and pages. (Hover over each question mark in your dashboard for handy tooltips that let you know what each option does).

Here are a couple Q & A’s to show what the plugin can do:

If you have any problems, let us know at the Commons help desk –

“Social Stickers” WordPress Plugin

Interested in showcasing your social media networks on your site? Many of our themes have this functionality built in, but if yours does not, check out “Social Stickers,” a simple plugin that allows you to show which social networks you use. There are over 50 social networks to choose from, including: Twitter, Facebook, Instagram, Tumblr, and YouTube. You can also select from one of five themes, which change the visual style of the social network icons.

Follow these steps to display social networks on your CUNY Academic Commons WordPress site:

  1. Click on the “Plugins” menu in your WordPress dashboard, search for “Social Stickers” in the directory, then click “Activate” under the Social Stickers plugin.
  2. social stickersCustomize the settings in Settings>Social Stickers (*Please note – you will need to enter your username(s) before you can pick your theme).sticer1
  3. Add the widget to one of your sidebars or footers in Appearance>Widgetswi

Your social networks should now display on your site and look something like this:


“Sociable” and “Share This” WordPress Plugins

Social Media icons make it easy for readers to share the content they find on your blog.  One click and your readers can share your posts and pages to a wider audience.  (Users will be asked to sign into their social media accounts, if not already signed in.)

The Commons has two WordPress plugins that manage social media icons on your posts, Sociable and Share This.  Sociable has a full-featured options panel that allows full icon configuration, including sizes, styles, and placement.   Here is a video introduction to Sociable.

Not to be outdone, Share This has some very detailed instructions that can be found here.  One nice feature of Share This is that it allows for “Multi-Post” sharing within your blog, so that users remain on your site while they share to multiple sites:

So which to choose?  Check them both out and see which one you prefer.

Meta Slider Plugin

meta sliderMeta Slider plugin is simple to use and lets you choose between four different “types” of sliders – Flex, Nivo, Coin, and Responsive.  Each type is responsive, and gracefully changes sizes for different types of devices, and offers various features for layering and transitions.  You can easily swap between the four types to find the one that suits you.

If your theme does not include functionality for a slider, you have some other choices:

  • Rotating Post Gallery – this is the plugin the Commons uses on its Home page.  It has many great features, but it has several drawbacks: it is not responsive, and it is a widget-only plugin – you need a widgetized area to display it.  It also only allows one slideshow per site.
  • Revolution Slider – This plugin is great on a single site, but it is written in such a way that its powerful layering functionality doesn’t work on the Commons.  You can create great slides, but you can’t layer them with captions.  It allows multiple slideshows per site, using convenient shortcodes, and offers many different types of sliders and effects.
  • EasyRotator for WordPress – this is also a great plugin, but it requires that maintain your slides using an external Adobe Air application, which you need to install on your computer. It also allows multiple slideshows per site, using convenient shortcodes.

The Meta Slider addresses the shortcomings highlighted above.  It allows multiple slideshows per site, using convenient shortcodes.  It doesn’t require any external application, and you can layer your slides with rich text formatted with HTML.  It’s simple to quickly set up an attractive slideshow on any page or post, or on a text widget in one of your sidebars.

meta slider tabGetting Started

  • First, decide on the dimensions of your slider for non-mobile devices.
  • Add the images to your media library that correspond to these dimensions. Meta Slider does a good job scaling up and down – but to avoid distortions and loss of sharpness, it’s best to get your image sizes close to your full size.
  • Click on the Meta Slider tab to create a slideshow.
  • Click on the “Add Slide” button to see the images in your media library. (You can also upload more images at this stage as well.)  Choose the ones you want to include.  Hold down the shift key and select multiple images.  You will see them checked.  Save and preview.  (You can always add or remove more slides later.)
  • Choose a slide type (i.e. Flex, Nivo, Coin, and Responsive) – each has a list “Advanced Settings” for further configurations.
  • meta slider settingsEnter the slide dimension you’ve decided upon. (this should be the largest size you expect to display on your page – it will scale down on different devices)
  • Optionally, add some caption heading and body with links – certain slider types are better for this (Nivo, Flex).  Some HTML is parsed, so you format as needed.
  • To create another slideshow, simply click on the “+” sign in the Slideshow tab.
  • Each slide will have a automatically generated shortcode.  Simply copy and paste into your post or page.


This five minute tutorial should get you up and running quickly:

Hope you enjoy this plugin!

Yoast WordPress SEO

yoast SEO

Yoast WordPress SEO is a powerful plugin that helps improve the chances that your site’s content will be discovered by search engines. The plugin “goes the extra mile” to make your WordPress content more accessible. It automatically adds OpenGraph meta tags to your content based on the keywords and descriptions you enter. You can see the tags it adds if you do a “view source” on your page or post. It is typically 20 or 30 lines from the top. See below for an example:

seo tags

If you are not that familiar with SEO (Search Engine Optimization), there is a great post recently published in the Emerging Tech in Libraries site on the Commons called Gentle SEO Reminders that covers some of the basics and is a great introduction.

Once activated, the plugin creates a new form section on your page or post admin screen:

yoast form

The plugin claims to help you write better content by having you choose a focus keyword and description. It automatically analyzes if this keyword is found in the article heading, page title, the url, description, and the page content, and suggests ways to improve.

There are many other settings that are available, and these are documented on the plugin’s website. You can set up default templates that auto-populate some meta tags so that you won’t need to go back to every page and post of your site and fill in the data. There is a lot of functionality to explore, but even if you just use its rudimentary features, the plugin seems to provide great ways to improve your site’s search engine results.

Embedding Scribd Content

scribd-logoScribd bills itself as a “personal digital library” and provides both a premium monthly subscription plan (with access to over 400,000 books) and free access to user uploaded content.  Many Commons members take advantage of the free upload and storage Scribd offers, and embed PDF content such as CVs, research, syllabi, or the first couple chapters of a book directly into their WordPress sites.

The WordPress embed code that Scribd provides only works for users of or members of the Commons who activate the JetPack plugin.

It is easier to a built-in shortcode that is active on all Commons WordPress sites.  You’ll need two parameters: doc and key.  These are readily found in the WordPress embed code that Scridb provides.

Here is an example of the Common’s Scribd shortcode.  Simply type it on a new line of a WordPress post or page with your doc and key.  Or simpler still, just make a slight modification to the Scribd embed code (described further, below).


How do I Find the Parameter Needed in the Shortcode?

Each item on Scribd has embed information.  It is sometimes a little hard to find.  Here are some screenshots to guide in the process.

  • First, look for the “Share” icon at the top right.  Click it to get a dropdown of ways to share the item.  Select “Embed.”

scribd embed1

  • Then you will see screen that lets you configure the way your content will appear on a page (i.e. size, links, recommendations).  But most importantly, you need to click on the link “WordPress” (highlighted below, in red).
  • scribd embed twoOnce you click on the WordPress link, you will have all the information you need.  This is a screenshot of what Scribd Provides:

scribd embed 3

(Once again, this embed code only works on sites or sites that have JetPack plugin activated.)

Just Add Four Characters and You’re Good to Go!

On the Commons, all you need to do is copy the embed code and add “-doc” after “[scribd” – that is, just change  “[scrib id=….” to “[scrib-doc id=….” and you are good to go.  It will embed into your Commons WordPress post or page.




Getting Started with Twenty Fourteen

t14 slider

When first installed, Twenty Fourteen doesn’t look much like what you anticipate from its pictures.  Here are some quick steps to make it to shine:

Accessing the Settings

t14 customizeOnce you’ve activated Twenty Fourteen, go to your dashboard, to Appearance>>Customize.  Click on Customize (circled in red) to access the theme’s settings.  You should see a panel like the snapshot pictured below.t14 panel

All the the theme’s configuration settings are found here.  You can set your site title and tagline and instantly see a preview of what it will look like.  Likewise with the background color, the title font color, and the background image, should you add one.

Be sure to click on “Save & Publish” if you are happy with the way your changes look.


The Navigation settings are very similar to what you find on your dashboard.  But here you can preview changes before saving them.  You’ll still need to set up your menus in Appearance>>Menus.  The theme provides two menus and you control where (and if) they are displayed.

Static Front Page

This setting probably looks familar to you if you’ve gone to the Settings>>Reading in the dashboard.  But here you can use it to preview how such a change would affect you site’s home page.  Basically, you decide here if you want your home page to display a number of your latest blog posts, or if you want it to display a static front page.t14 featuredContent

Featured Content

This is where you control what the featured area on you home page looks like.  It could be totally non-existent, or a grid of boxes, or a slider.  It will display your latest blog posts if they are tagged to be shown.  The default tag –  “featured” –  can be changed to whatever tag you want.  You can change your home page’s entire featured content area by just changing the tag name, and by deciding whether to display a slider, or a grid.

Featured Images

featured imageThe theme relies heavily on featured images.  The boxes in the grid will display the featured images of each post along with the post title, tags and other links.  The slider will display your post’s featured images as well.   Slider images need to be big, or else you might see a black area on the right (depending on device and monitor size).  If you are using a full width page template to display your slider, the featured image’s width needs to be at least 1200px to look good on desktops.  If you are using a template that also shows a sidebar, the width should be at least 1000px.  Slider images scale down, but do not scale up.  This might make transitioning from previous themes difficult.

If you choose to display your featured content in a grid, featured images can be smaller, but you still probably want them large enough to span the width of your page or post (at least 640px), when your readers click to see the actual content.  (You can also experiment with different post formats to see how they display the featured image.)

You can set the featured image on both a page and a post.  They display quite differently on different devices.

Dynamic Magazine Functionality

Twenty Fourteen offers a lot, but you can customize it further by changing its CSS or by creating a child theme (contact the Commons Help if you elect to go this route).

Some drawbacks – the slider does not animate, and you have to manually advance it.  Some studies suggest this is a better user experience.  (If you make a child theme, here is a way to make it animate.)  There is no easy way to change color scheme.  If you like the black background, you are in luck – if not, polish up on your CSS skills.

Hope you have fun with this theme!

WordPress 3.8 Now Available on the Commons

WordPress WordPress 3.8 (nicknamed “Parker” in honor of Charlie Parker) offers many improvements:

admin themeFirst off, the Dashboard looks very different.  Although everything is basically the same, the layout is much more attractively styled, and you now have the option to choose between seven different color schemes.  Go to Users>>Your Profile and find the “Admin Color Scheme” settings, pictured at the right to make any changes.  The Dashboard looks especially great on mobile devices and tablets and has a “fresh, uncluttered design that embraces clarity and simplicity.”   (I was not a big fan of the default color scheme and chose the “Light” option which I found easier on the eyes.)

Theme management has been refined.  You can more easily flip through the themes that are available on the Commons.  Sit back and use page up and page down keys to view available themes (we have hundreds).  Find one you like?  Hover over the theme and two things will happen.  You will see a box in the center (circled in red, below) that, when clicked, provides “Theme Details.”  This provides information that will help you decide if the theme will meet your needs.  You will also see the “Activate” and “Preview” buttons (highlighted by the red arrow).  Use the  preview button first to get a sense of what it will look like.  If you like it, you can click “Activate.”


widget changesWidgets are now easier to manage, especially on smaller devices.  Just click the widget you want to embed and a dropdown list of available widget areas is displayed.  Select the widget area, click the “Add Widget” button, and the Widget Area is auto-populated.  You can drag its position up or down to get it in the right place.  Then you need to click the “Save” button.   You can still use the old method of dragging and dropping too.

The new Twenty Fourteen theme is now the default theme on the Commons.  It is a sleek and responsive magazine style theme with three widget areas and two page templates.  Here is a link to its demo page and below are some screenshots of what it can look like.  On larger screens, the number of boxes on the rows increase.  You can also substitute the grid of boxes with a manually advancing slider.  For some quick start information, see Getting Started with Twenty Fourteen on the Codex.


Create Newsletters from Your WP Site with MailPoet


You can create fully configurable newsletters from your Commons WordPress site with the “MailPoet Newsletters” plugin.

MailPoet lets you use WordPress to build rich newsletters, either ad hoc using the familiar WP interface,  or by interacting with existing posts on your site.  You can manually drag and drop posts into a newsletter or schedule weekly or monthly newsletters that automatically pick up your latest content based on category.  Newsletters can include images, links, and social icons, and be designed from a number of templates.

Newsletters are sent directly from your site to lists of subscribers who you build via the plugin interface.  Lists can be derived from those who subscribe to your blog, or manually, or even by importing from a CSV file comprised of “email”,”lastname”, and “firstname” columns.

This is a great way to garner interest in your site and keep subscribers aware of what’s going on.

Getting Started
Once you activate the plugin on your dashboard, go to “Newsletters.”  You will see a basic newsletter template with four sections – you can use or delete any of these sections, or you can elect to use a totally different mailpoet themestemplate or “theme.”  (You can easily upload a number of free “themes” by clicking on “Add more themes” button.)  Drag them over to the canvas and start configuring your newsletter.  To add content from your posts, go to the Content tab and drag the type of content you want over to the canvas.  For example, if you want to add an excerpt from one of your posts, drag the “WordPress post” block over to a text area and drop it.  You will then be presented a list of all posts that you can select from.  Select one and if it has an image, re-size it appropriately by clicking on the lower right corner and expanding or contracting its size.  Other content options include “Title & Text,” “Dividers,” and “Social Icons.”

Once you get the hang of it, it is very easy to design a neat looking newsletter.

There are many “Settings” options that help you further configure your newsletter and email clients, and even a widget that lets viewers auto-subscribe.

Take a look and if you have questions, let us know at WordPress Help!  Enjoy!




ChartBoot for WordPress

chartbootThe ChartBoot for WordPress plugin makes it easy to add a wide variety of charts to your site’s pages and posts.  The available styles depend upon the kind of data you paste into the initial text box.  You can create simple bar charts, line charts and pie charts, or if you include a date and several variables, you can create an interactive “trend” chart.  Each chart can be easily customized with headers, fonts, and colors.

chartboot iconGetting Started

After you activate the plugin, no settings are necessary.  You’ll see that an icon appears on you edit dashboard.  After clicking the icon, a popup screen will appear with four buttons.  See image below:

chartboot API

Follow the four steps below to create a chart:

Imchartboot importport Data

Your data needs to be in some kind of spreadsheet.  Copy the data, including the headers, but you probably will not want the totals.  Paste your data into the text box shown on the right.

chartboot typesSet Types

This screen will automatically show your data field names – use the drop down to configure whether the field is text (“string”), number, or date.

Edit Chart

The plugin does a brief analysis of your data and provides some recommended chart types.  You can pick one of these, or click “More” for more options.  Your data will not support all chart types, and if you pick one that will not work, you’ll get an error message.  When you select a box, your potential chart will appear in a preview box on the right. The subsequent tabs on this screen let you customize a chart to your liking.  Features include heading, font size and family, background colors, and axis choice.  Make your choice and view how they look on the preview box.chartboot edit

Send to WP

This is the final step in the process.  When you click the box, the plugin generates the shortcode that creates your chart.  Make sure you are happy with all the steps above, since you’ll not be able to go back to the plugin’s API to edit your chart once it is generated.  You could try to decipher the shortcode and modify it, if you know what you are doing, but more likely you will find it easier to just start fresh and repeat the steps above.  Here is the shortcode generated for the sample chart:

chartboot shortcode

Google Calendar Events

google calendar eventsThe Google Calendar Events plugin lets you embed one or more Google calendars into your WordPress site, displaying events in a calendar grid, or as a list.   The plugin uses feeds to aggregate events from various sources.

Getting Started

Once activated, the plugin will create a new entry on your Admin “Settings” where you add your calendar feeds.  You can add several here, and later select the ones you want to display on a post or page (using a shortcodes) or in your sidebars using a widget.


The “Settings” page for the plugin has many more options, including its own “Event Display Builder” which lets you customize how events are displayed when the mouse rolls over a calendar date.  These settings are specific to the individual feed you are working with.  There are many conditional shortcodes that can be implemented here to ensure you display exactly the kind of events you want.  For example, you can customize the feed to only display all day events which are not ended.

calendar3How to Find Your Calendar Feed URL

Go to your Google Calendar.  In Chrome, you’ll probably see it as an option on the toolbar.  Click on the highlighted down-arrow, and then click on “Share this Calendar.”  You will be taken to page where you can make your calendar public.  To use this plugin, your calendar must be public.

Then click on “Calendar Details“, highlighted below:

calendar details On this page you will find a bunch of details about your calendar.  Scroll down the page until you find “Calendar Address.”  Click on the orange “XML” icon.


A box will popup containing the feed URL you need.  Copy this and go back to the Google Calendar Events plugin “Settings” page on your WP Admin dashboard.  Go to the “Add a Feed” (pictured above) and paste it into your Feed URL textbox.

Display Events on Posts or Pages, Using a Shortcode

Simply insert the following on a new line to display the default calendar:


There are four parameters which can be used to customize the appearance:

  •  id – a comma-separated list of the feed IDs you want to display (if this parameter is omitted, if will display all)
  • type – there are four possible values: list(events displayed in a list), list-grouped (events displayed in a list, grouped by date), grid (events displayed in a calendar grid for the current month), and ajax (events displayed in a calendar grid, with the ability to change months via AJAX)
  • title – when you roll your mouse over a calendar date, this will display as the title in the tooltip box that displays the events for the day
  • max – the max number of events to display

Probably the most noteworthy parameter here is type=”ajax”.  If you don’t use that, you will not be able to flip back and forth between months.  Also note that if there are no events in the coming months, the forward arrow will not appear.  (And conversely, if no previous events, the previous arrow will not show).

[google-calendar-events id=”1, 3″ type=”ajax” title=”Events on” max=”10″]

gce widgetDisplay Events Using a Widget

Once activated, you’ll notice that a widget called “Google Calendar Events” has been added.  Simply drag it over to the widget area of your choosing and configure. The widget provides the same options available with the shortcodes, described above.

Styling Your Event Calendars

If you want to take a shot at changing the way your calendar looks, and know a little CSS, you can play around with plugin’s stylesheet, attached below.  It’s pretty well documented.  Find the particular rule you want to override and paste it into Appearance>>Custom User CSS.

.gce-page-grid .gce-calendar .gce-caption{ /* Caption at top of calendar */ color:#333333; text-align:center; }

.gce-page-grid .gce-calendar{ /* Main calendar table */ width:100%; border-collapse:collapse; border:1px solid #CCCCCC; color:#CCCCCC; }

.gce-page-grid .gce-calendar th{ /* Day headings (S, M etc.) */ border:1px solid #CCCCCC; text-align:center; width:14.29%; padding:0; }

.gce-page-grid .gce-calendar td{ /* Day table cells */ border:1px solid #CCCCCC; text-align:center; height:80px; vertical-align:middle; padding:0; }

.gce-page-grid .gce-calendar .gce-has-events{ /* Table cells with events */ color:#333333; cursor:pointer; }

.gce-page-grid .gce-calendar .gce-event-info{ /* Event information */ display:none; /* Important! */ }

.gce-page-grid .gce-calendar .gce-day-number{ /* Day number span */ font-size:2em; }

.gce-page-grid .gce-calendar .gce-today{ /* Table cell that represents today */ background-color:#DDDDDD; }

.gce-page-grid .gce-calendar .gce-next, .gce-page-grid .gce-calendar .gce-prev{ /* Previous and next month links */ cursor:pointer; display:inline-block; width:3%; }

.gce-page-grid .gce-calendar .gce-month-title{ /* Month title */ display:inline-block; width:90%; } .gce-page-grid .gce-calendar th abbr{ /* Day letter abbreviation */ border-bottom:none; } /* PAGE LIST */

.gce-page-list .gce-list p{ /* Each piece of information in the list */ margin:0; }

.gce-page-list .gce-list p span, .gce-page-list .gce-list div span{ /* The text displayed before each piece of info, \’Starts:\’ for example */ color:#999999; }

.gce-page-list .gce-list .gce-list-event{ /* The event title */ background-color:#DDDDDD; } .gce-page-list .gce-list .gce-list-title{ /* The title (not the same as event title) */ font-weight:bold; }

.gce-page-list .gce-list ul{ list-style-type:none; margin:0; padding:0; } /* WIDGET GRID */

.gce-widget-grid .gce-calendar .gce-caption{ text-align:center; }

.gce-widget-grid .gce-calendar{ /* Main calendar table */ width:100%; border:1px solid #CCCCCC; border-collapse:collapse; }

.gce-widget-grid .gce-calendar th{ /* Day headings (S, M etc.) */ width:14.29%; border:1px solid #CCCCCC; text-align:center; }

.gce-widget-grid .gce-calendar td{ /* Day table cells */ color:#CCCCCC; width:14.29%; border:1px solid #CCCCCC; text-align:center; }

.gce-widget-grid .gce-calendar .gce-has-events{ /* Table cells with events */ cursor:pointer; color:#666666; }

.gce-widget-grid .gce-calendar .gce-today{ /* Table cell that represents today */ background-color:#DDDDDD; }

.gce-widget-grid .gce-calendar .gce-event-info{ /* Event information */ display:none; /* Important! */ }

.gce-widget-grid .gce-calendar .gce-next, .gce-widget-grid .gce-calendar .gce-prev{ /* Prev and next month links */ cursor:pointer; display:inline-block; width:5%; }

.gce-widget-grid .gce-calendar .gce-month-title{ /* Month title in caption at top of table */ display:inline-block; width:80%; }

.gce-widget-grid .gce-calendar th abbr{ /* Day name abbreviations */ border-bottom:none; } /* WIDGET LIST */

.gce-widget-list .gce-list p{ /* Each piece of information in the list */ margin:0; }

.gce-widget-list .gce-list p span, .gce-widget-list .gce-list div span{ /* The text displayed before each piece of info, \’Starts:\’ for example */ color:#999999; }

.gce-widget-list .gce-list .gce-list-event{ /* The event title */ background-color:#DDDDDD; }

.gce-widget-list .gce-list .gce-list-title{ /* The title (not the same as event title) */ font-weight:bold; }

.gce-widget-list .gce-list ul{ list-style-type:none; margin:0; padding:0; } /* TOOLTIP */

.gce-event-info{ /* Tooltip container */ background-color:#FFFFFF; border:1px solid #333333; max-width:300px; }

.gce-event-info .gce-tooltip-title{ /* \’Events on…\’ text */ margin:5px; font-weight:bold; font-size:1.2em; }

.gce-event-info ul{ /* Events list */ padding:0; margin:5px; list-style-type:none; } .gce-event-info ul li{ /* Event list item */ margin:10px 0 0 0; }

.gce-event-info ul li p{ /* Each piece of information */ margin:0; }

.gce-event-info ul li p span, .gce-event-info ul li div span{ /* The text displayed before each piece of info, \’Starts:\’ for example */ color:#999999; }

.gce-event-info .gce-tooltip-event{ /* The event title */ background-color:#DDDDDD; font-weight:bold;

List Pages Shortcode

flicker_poles_6594723627_6e3dcf6137_zThe List Pages Shortcode plugin comes in handy if your site has a lot of pages and you want a quick way to make them accessible.  As its name suggests, it provides an easy-to-use shortcode with a bunch of optional parameters to list out links to your pages. Just type in the shortcode on a new line on the page where you want the list to appear.

You can exclude pages from the list, you can only show “child” pages of the current page, and specify how deep your want to go (grandchildren, great-grandchildren…), or you can only show siblings of the current page (pages with common ancestor pages).  You can sort the list according to specified fields (post_author, post_title, ID, post_date, etc. ).  And you can include a page excerpt (excerpt=”1″).  This plugin works well with the “Page Excerpt” plugin, which allows you to create a excerpt that summarizes and teases your readers to explore the page.  To exclude the current page, use exclude_current_page=”1″.  If you plan to do some custom styling of your list using CSS, you can add a class (class=”my_page_list”).

Here are some sample ways to use the shortcode:

listpagesAnd here are some of the parameters that you can use:


An explanation of how to use these parameters can be found here.

This plugin is a great way to organize and manage content on your site.

WP Post to PDF

postToPdfThe WP Post to PDF plugin lets your readers download your page or post content to a PDF.  You can control if this function should be available to everyone, or just to logged in users.  Installation is a snap.  The plugin adds an entry to your admin dashboard “Settings” called postpdf1“WP Post to PDF.”  Here you can configure the plugin to your liking.  You can determine what pages and posts you want the PDF export icon to appear, and how it should look like.  You can exclude pages and posts, and determine how to display author information.

The plugin has a default logo that is easily changed on a single site installation, but which is problematic to configure on the Commons.  Follow this post to see if there is a resolution, or stay tuned.  Maybe we can globally replace it with the Commons Logo, or simply not display it.replaceLogoWhen installed, your page or post will look something like the screenshot below.  Just click on the icon to download a PDF version.
pdf samp

And the downloaded PDF will look like this, depending on how your configure your layout:
sample pdf

Column Shortcodes

column shortcodesColumn Shortcodes is a plugin that lets you divide your post or page content into columns wherever you want, using easy to use shortcodes.  You can swap in and out of various column layouts (there are eleven to choose from).

column icon2Once installed, the plugin adds an icon to your edit dashboard.  Click on the icon and choose a layout.  Enclose the content between the two parts of the automatically generated shortcode, and continue across the row.  If you choose, you can end the row with the “(last)” shortcode.

column shortcs

This is an easy way to create interesting layouts for your pages and posts.  The plugin also provides a way to add padding to columns.  Be sure to enter the padding first (put your cursor on the box, and add a pixel value for the padding) if you need it, and then select a column shortcode.

column options

Next Page Buttons Plugin

flickr_bulb_7232992872_a756e282d4_zThe NextPage Buttons plugin lets you break up your post or page content into pages.  This is functionality that was once in WordPress core, but was removed.  So use this plugin with the knowledge that it might not work forever.  It is easy to use, though it is a manual procedure.  Scroll through your page and post, and where you want to break into a new page, simply click the “Next Page” icon pictured below:

nextbuttonsiconYour content will be broken up into pages, and at the bottom of each page you will see navigation buttons like these:

nextButtonsClicking on “Single Page” will break the pagination and display all your content on one page.  You can scroll throughout.  But clicking back on a page number will reverse this, and break your content into pages.

EasyRotator for WordPress

easyrotatorThe Easy Rotator for WordPress plugin provides an easy way to add a customizable slider to a page or post, or to a widget area.  You can add as many distinct sliders as you want to your site, and use many different template styles.  Animation can be customized for each separate slider, and depending upon the template you choose, text and links can be added to suit your needs.  This is a great plugin to use if you’re using a basic theme like Twenty Twelve and want to embellish your content with some dynamic images.  Pictures can be selected from your computer, your WP media collection, or from the images you set as “featured” on your posts.

In case you are wondering, a slider is a set of images that cycle through your page, post, or most probably, your home page.  In most cases, you can configure your slider to fade or slide, and link to a page or post that is displayed.  You can configure how long the image stays on the page, and you can control what text should overlay the image (if any).   Sliders are a good way to showcase the contents of your site. 

Getting Started

Setup is a little different for this plugin.  Once activated, you should see the following box at the top of your dashboard:

easyrotatorInstall2Click on the install button, and follow the instructions to install EasyRotator’s editor application onto your computer.  This also involves installing Adobe Air.  This one time process takes a couple minutes to complete.  Once done, you will see a new icon when you go to edit a page or posteasyrotatorbutton.  Click on the button to add a new rotator or to edit an existing one.

Getting Help

easyrotatorhelp1This plugin comes with a great help panel which can be accessed from your dashboard menu under EasyRotator tab.  It includes screenshots of the various screens you’ll need to use to set up the API and to create and customize your sliders.  It may seem overwhelming at first, but I think you’ll find the plugin is fairly easy to use and awesome in what it can do.  The plugin comes with a premium “Pro” version which the Commons currently does not support.  And it also includes a widget that you can use in your sidebar.

Page Excerpt

excerpt_3421668561_4e72589586_mThe Page Excerpt plugin gives pages the same excerpt functionality as posts.  Excerpts are “optional, handcrafted summaries” that can tease your readers into exploring your content further.  After installing this plugin, a new text box will be added to your “Page Edit” dashboard.   If you don’t see it, click on “Screen Options” and ensure that the checkbox entitled “Excerpt” is checked.  See screenshot below:


Scroll down on your “Edit Page” and you should see the following:

You can add text, but if you want to include images or links, you’ll have to do so with HTML.

So how is the page excerpt displayed?

If you have developed a child theme on the Commons, you can include (and customize) the following PHP code into one of your templates to display page excerpts:

<?php the_excerpt(); ?>

But more likely you’ll use “Page Excerpt”  in conjunction with another plugin that is available on the Commons – “List Pages Shortcode.”  As its name suggests, this plugin lets you use a shortcode to list selected pages (and optionally their excerpts).  For more information, see List Pages Shortcode on the Commons Codex.

Edit Flow

editFlowThe Edit Flow plugin is great for a WordPress site that is being used to publish a journal or newsletter/periodical or research project.  It provides a framework to collaborate with team members and plan for issues.  Its built in calendar displays article progress from pitch to publication.  The editorial flow includes a record of all comments, and editorial metadata such as topic, first draft date, word count, images, etc.

After activating the plugin, you’ll notice three new tabs on your Dashboard, “Story Budget”, “Calendar”, and “Edit Flow”.  There are eight components to Edit Flow which may be turned on or off.  See snapshot below for brief descriptions of what each one does:


Each of these components can be configured to suit the needs of the team.  You can customize what kind of metadata you want to collect, and what editorial stages you want to track.  This is a very powerful plugin built for specific needs.

Leaflet Maps Marker

leafletThe Leaftlet Maps Marker is a really neat plugin that lets you easily pin, annotate, organize, and share locations using maps from Google,  Bing, and OpenStreetMap.   Using integrated address searches, you can easily locate sites, pin them with hundreds of different pin icons, add popups for each site that include images and text, size, zoom and layer.  You can use shortcodes to easily include your map in any post or page.  And you can include directions and make your locations available via RSS feeds (actually via GeoRSS).

This is a great tool for research, teaching and travel journalism.

Once activated, the plugin creates a new tab on your dashboard called “Maps Marker.”  It’s pretty easy to get started creating a map and using its shortcode to embed it into a post or page.  There are hundreds of options, and mapping APIs, but the basic learning curve doesn’t seem too bad.

Below is an example of what you can do.  If this was an actual embed, you would be able to click on the pins to popup its annotations and associated images.


Constant Contact for WordPress

constant contactThe Constant Contact for WordPress plugin is an app that integrates with your Constant Contact account. Constant Contact is a proprietary service which provides email marketing, online event management, social campaign management, online polls and survey functionality.You can get a free 60-day trial account.  You’ll need an active account to get this plugin going on your site.  Here is a synopsis of the plugin’s features, taken from its WP Repository site:

  • Add signup checkbox and list selection to your register page and update profile page
  • Add / edit contact lists without visiting
  • Includes a powerful form designer
  • Built-in Google Analytics visualization
  • View your events registration details and get updated with a dashboard widget
  • Show contact list selection on register page with ability to exclude certain lists
  • Automatically subscribe your user to one or more contact lists on the register page
  • Customize the register page signup box (and list selection) title and description
  • Add / edit users from your Constant Contact account
  • Add a signup widget to your sidebar or anywhere in your template

This plugin may be useful to plan and manage your campus events, conferences, and speaker series.  Also you might want to check out the non-proprietary Events Manager plugin and compare functionality.


Event Marketing

The plugin features Constant Contact Event Marketing functionality by allowing you to track events, registration, and registrants using the plugin. Simply navigate to Constant Contact > Events. Manage your events from inside WordPress!

Built-in Form Designer

The Form Designer is a form generation and design tool. The Form Designer allows users to generate unlimited number of unique forms and gives a wide variety of options that can be configured, including what fields to show in the signup form. There and tons of design options, including custom background images, border width, colors, fonts and much more.

Twitter Mentions As Comments

twitter mentionsThe Twitter Mentions As Comments plugin is a neat way to harvest all the tweets referring to your WordPress posts and display them as comments on your site.  The workflow is identical to the comment workflow on your site, and is controlled in Settings>>Discussion.  You configure how notifications, comment moderation, and author whitelists/blacklists work.  The plugin gets the poster’s real name and profile picture and links directly to the original Tweet.  And best of all, it does it automatically.

After activating the plugin, you’ll notice an entry added to your Dashboard Settings tab.  Here you can control the way the plugin operates:


If you tweet about your posts, you might what to blacklist your own Twitter account to avoid getting comments from yourself.

For support, check out the plugin’s site on GitHub.

WordPress Google Fonts

googleFontsThe WP Google Fonts plugin is a great way to add different fonts to your site. Many premium themes provide built in font functionality, making this plugin unnecessary.  But for many standard themes, you’ll need a plugin like this one if you want to take advantage of the vast collection of fonts that are available.  To learn more about Google Fonts, check out the Google Font Directory website.

After activating the plugin, you will see an entry has been added to your dashboard settings tab.  Click on it and start adding fonts that you might want to use.  The plugin provides space to add up to six different fonts.


Using the form above and checking off elements for the fonts seems to work fine for themes like Twenty Twelve, but at the bottom of the Settings page the plugin provides a little more information about how to configure font use if you find this method has no effect (or if you want to apply fonts to specific posts or paragraphs, etc.) :

Most likely the theme you are using has defined very specific elements in its stylesheet and these may override the generic tags specified above. If you don’t see any changes after checking the style boxes above, you will need to enter custom css into the CSS box. An example of CSS that would be more specific would be:

#container p { font-family: ‘Reenie Beanie’, arial, sans-serif; }

This would define all paragraphs found within a <div id=”container”></div> element. Stylesheets (CSS) can be sensitive and tricky sometimes. If you are new to CSS the w3schools tutorials are a great place to start.

Creative Commons License

Need help with the Commons? Visit our
help page
Send us a message
Skip to toolbar