May 20, 2015

Easily add pull quotes to your WordPress posts with my Perfect Pullquotes plugin

Easily add pull quotes to your WordPress posts with my Perfect Pullquotes plugin

Perfect Pullquotes is a WordPress theme plugin that allows you to easily add beautifully styled left-aligned, right-aligned, or full-width pullquotes to your active WordPress theme.

The plugin also enables a custom 'Pullquote' menu button for the TinyMCE Editor as well as a custom shortcode.

Installation

  1. Download the Perfect Pullquotes plugin directly from WordPress or from GitHub. To change the default color of the pullquote's border, edit lines 71, 79, and 87 of the pullquote.css file by changing the HEX value of the border-color attribute. Alternatively, once the plugin is installed, you may utilize the "color" option included within the shortcode.
  2. Upload the compressed perfect-pullquotes.zip plugin file via your WordPress Dashboard: Plugins > Add New > Upload Plugin, or to the /wp-content/plugins/ directory within your WordPress installation on your server.
  3. Activate the plugin through the 'Plugins' menu in WordPress.

Once installed, the plugin will add a Pullquote dropdown button to the Visual Editor (as seen below) within your WordPress installation as well as enable the [perfectpullquote] shortcode. The actual positioning of the button in your installation may vary.

Perfect Pullquotes TinyMCE menu

Shortcode

The plugin enables a WordPress shortcode that allows the user to add a pullquote within their content. The shortcode may be added manually, or by selecting text in the text editor and then selecting an option (left, right, or full) from the Pullquote dropdown button.

The default shortcode tag is shown here:

[perfectpullquote align="left" color="" cite="" link="" class="" size=""] This is the pullquote text.
[/perfectpullquote]

Options

The shortcode includes six options, as outlined below

OPTIONACCEPTSDESCRIPTIONEXAMPLE
alignleft or right or full(Required) Determines whether pullquote is left-aligned, right-aligned, or full-width.[perfectpullquote align="left"][/perfectpullquote]
colorHEX color code(Optional) Change the default border-color attribute by entering a valid HEX color, including the #[perfectpullquote align="left" color="#16989D"][/perfectpullquote]
citetext(Optional) Cite your quotes back to their author/source[perfectpullquote align="right" cite="Jane Doe"][/perfectpullquote]
linkURL(Optional) Turn the cited author's name into a link that opens in a new window. Must be a valid URL beginning with http or https[perfectpullquote align="right" cite="Jane Doe" link="http://example.com"][/perfectpullquote]
classtext(Optional) Add class(es) to pullquote container.[perfectpullquote align="right" class="cited author-quote"][/perfectpullquote]
sizeinteger(Optional) Change the font size of the pullquote's text, in pixels.[perfectpullquote align="right" size="32"][/perfectpullquote]

Example

Shown below are examples of each type of pullquote along with different options enabled.

Perfect Pullquotes example output
Related Posts

Comments