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.

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 will 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 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.

feeds

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.

clickxml

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:

[google-calendar-events]

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).

Example:
[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;

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:

listpages2

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.

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

pagelinkplusThe Page Links Plus: Single Page plugin provides a powerful way to manage pagination on your site.  After installing the plugin, you will see settings that allow you to avoid breaking pages  in the middle of sentences.  You’ll have the option to view content as a single page, or as a list of pages.  You can hop around to certain pages with ease.

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.

easyrotatorThe Easy Rotator for WordPress plugin provides an easy way to add a custom 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.

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:

excerpt1

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

excerpt2
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.

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.

leaf