excerptsplus for headway3

Excerpts+ for Headway 3

Excerpts+ for Headway 3

Introduction1

About Excerpts+ 51.1

Installation2

Installing Excerpts+ for the first time 82.1

Installing on a site with Excerpts+ already installed 92.2

Using Excerpts+3

Adding an Excerpts+ block 113.1

Excerpts+ Options4

Help 134.1

Structure 144.2

Layout 164.3

Filters 184.4

Titles 194.5

Content 204.6

Excerpts 214.7

Meta 224.8

Images 244.9

Image Sizing 254.10

Sliders 274.11

Developer 284.12

Hooks 294.13

Advanced Styling 314.14

Excerpst+ Styling5

Styling Excerpts+ using the Headway 3 Design Editor 345.1

Tips and HowTos6

Examples 386.1

CSS Selectors 426.2

Excerpts+ v2.0 User GuideExcerpts+ for Headway 3 - 4

Introduction


About Excerpts+

The Excerpts+ block provides added design and layout functionality to the Headway WordPress theme framework. It can be

used to setup magazine layouts, fancy recent posts lists, featured post sliders, image rotators and much more.

What's New in Excerpts+ for Headway 3

Easy styling using Headway 3 Design Editor

Greatly improved automatic calculation of cell sizes

Options for cell padding and cell vertical gap

Help panel with link to User Guide

Advanced styling options panel

Hooks for inserting your own code

Developer options

Improved management of image caching

Other Features

Excerpts+ version 2.0 is chock full of awesomeness:

Pagination

Uses first image if no featured image set

User configurable layout

Full content display option

Option for image borders

Uses category when on category archive page

Uses author when on author archive page


Option to exclude specific posts or pages

Option to show child pages of a page

NextGen Gallery support

Vertical crop alignment

All new image processing system

Crop alignment of images

System Requirements

WordPress 3.1 or greater

Headway 3.0 or greater

PHP with GD image processing library (99% of hosts provide this by default).

Contact

User support forums: support.headwaythemes.com (login required)

Advanced technical support orto report errors in this guide: [email protected]

WordPress user support: wordpress.org/support

Disclaimer

This document Copyright 2012, Chris Howard

Author: Chris Howard

Revision: 1, 20 January, 2012

Headway is a product of Headway Themes headwaythemes.com

WordPress is an Open Source, content management system (CMS) and a project of wordpress.org.


Installation


Installing Excerpts+ for the first time

If you have previously installed Excerpts+ on your site, you will need to follow the instructions below, for Installing on a site with

Excerpts+ already installed.

Headway blocks are plugins, and as such, are installed using the WordPress plugin installer. For this, you will need the

Excerpts+ ZIP file that you downloaded from Headway Themes. On some systems, it may have been automatically

decompressed. In that case, check in your computers Trash or Recycle Bin and copy it to somewhere on your hard drive.

If you need more help on using WordPress, there is no better place for beginners tutorials than wp101.com.

The quick version

Use your sites WordPress plugin installer and activate the plugin once installed.

Step-by-step

In your WordPress, under the Plugins section, select the Add New plugin option and upload the Excerpts+ ZIP file.

Activate when prompted

Thats it! You can now move on to chapter 3, on Using Excerpts+.


Installing on a site with Excerpts+ already installed

The quick version

The process for installation over an existing Excerpts+ is to deactivate existing one, install and activate the new Excerpts+

using the WordPress plugin installer, and then work through all existing Excerpts+ blocks ensuring all their settings are

correct, paying particular attention to Image Widths, and the Structure. You will also need to re-publish any page with

Excerpts+ blocks on it., even if you dont make any other changes.

Step-by-step

In your WordPress, under the Plugins section, find and deactivate your existing Excerpts+ block plugin. If you do not

deactivate the old one first, you will get a fatal error message.

Still in the Plugins section, select the Add New plugin option and upload the Excerpts+ ZIP file.

Activate it when prompted.

Thats it! You can now move on to chapter 3, on Using Excerpts+.


Using Excerpts+


Adding an Excerpts+ block

Adding an Excerpts+ block is the same process as adding any block in Headway. The Excerpts+ block will appear in the list of

available blocks under More Blocks in the block selection menu.

This will create an empty Excerpts+ block that you can then start configuring to your hearts desire.

(Remember to hit the Visual Editor's save button)


Excerpts+ Options


Help

The help options prove some useful links (including to the page this guide is stored on) and information


Structure

The Structure enable you to control the structure of each Excerpts+ cell. There are five rows and you can choose what appears

in each. This enables you to easily control the order the title, image, meta data and excerpt appear in.

Note: If you set any cells to display Image, the image width will automatically default to the full width of the cell. However,

using cells for image location will be totally ignored unless the Image Location is set to "Use Structure Position".

Cell row 1

Choose the content type you want to display from Title, Meta1, Image, Content/Excerpt, Meta2.

Cell row 2


Cell row 3


Cell row 4


Cell row 5


Vertical alignment when image location is behind

Choose if you want the block of cells to align to the top or bottom of the image. (See examples below)

Cells aligned with bottom of image


Cells aligned with top of image


Layout

Number to show

Choose how many excerpts to show.

Note: If pagination is enabled, this becomes the number shown per page.

Number across

Choose how many excerpts you'd like to display in each row.

Cells Vertical Gap

This sets the vertical gap between each cell across.

Cell Padding

Choose how much padding, that space, you want to put between the edge of the cells and their content

Number to show as full width content

If you have chosen to show excerpts, this option allows you to ovveride it for a specified number of posts therefore choose

how many to post display their full content for. After this number is reached, only the excerpts will show.

Order

Set the order of the list posts to either descending or ascending.

Order by

Choose what order you'd like the excerpts to appear. Options are Date created; Date last modified; Author; Title; Comment

count; Random; and Page order.

Link to text

You can display an additional link at the foot of your excerpts, for example to take you to all posts in the category of excerpts

you've shown. This option lets you set the text for that link. Leave blank for none.

Link to URL

URL of additional link in the footer of your excerpts. Leave blank for none.


Row border

Choose whether to display a border under each row of excerpts.

Pagination

If enabled, it will display next/previous posts indicators, allowing readers to page through your posts.

Note: NEVER put more than one block on a page that allows pagination. It could really mess up post navigation on that page

and confuse the heck out of your readers.


Filters

Include Categories

Select categories to display.

Must be in ALL included categories

This changes the Include Categories from being any posts that are a member of any of the selected categories, to being posts

that are a member of all of the selected categories.

Exclude Categories

Select posts in categories to exclude.

Author

Choose posts to display for an author or all.

Show Sticky posts first

Option to show sticky posts before other posts.

Note: Due to a WordPress issue, this will display all posts, regardless of categories included or excluded

Include sub-categories when E+ is displaying on a Category Archive page

If the E+ block is displayed on a Category Archives page, select this if you wish to show the children of the category as well


Titles

Block Tittle

Here you can set an overall title for the block

Block title URL

And you can set the block title to link to another page on yours or anyone's website

Post Title Bullet

Precede the title with a bullet.

Post title background tint % (when Image Behind is selected)

The percentage of shading of the tint used behind the text info when image location is set to behind.

Post title background tint colour (when Image Behind is selected)

The colour of the tint used behind the text info when image location is set to behind.

Don't link to post/page

If selected, the title wil not link to the post/page

Link "Go to" text

Sets the preceding text for the tooltip when the user hovers over the link


Content

Content type

Choose the content type you want to display: Posts, pages or custom post types (if available).

Show full content or excerpt only

Choose whether you want to show and excerpt or the full content in each cell. If you choose Excerpt, you may also choose

Styled Excerpt. To use styled excerpts, you will need the TinyMCE Excerpt plugin for WordPress.

If you want to have user definable excerpts for pages, then try the Page Excerpt plugin for WordPress.

Specific IDs (optional)

Specify IDs of posts or pages or custom post types if you want to limit to specific content.

Show children of specific IDs (Page types only)

If you want to show the child pages of a particular page, then enter that pages ID in the Specific IDs, and enable this setting.

Exclude Specific IDs

If enabled, the specified IDs above will be excluded. Useful for excluding the pages like the 404 page when type is pages.

Skip n posts

Skips the chosen number of posts.


Excerpts

Note: If you wish to have true Page excerpts, the Page Excerpt plugin (wordpress.org/extend/plugins/page-excerpt/) is fully

Excerpts+ compatible.

Excerpt Length

Number of characters or words of the excerpt to show. If the number is greater than the excerpt length, it will only show the

full excerpt.

Characters or Words

Choose to trim excerpt length by characters or words

Truncation character

If the excerpt is truncated, choose the character to indicate this. Options are Ellipses, Arrows or none

Read More text

Wording to use to indicate to read more. If you want to include the post title, add %title% to the text entered.

No Excerpt/Content message

Text to display when no content.

Excerpt first, then list

Enable this if you only want to show an excerpt for the first post, then just a list of titles thereafter.

Note: This only works when Number Across is set to one


Meta

Meta is nerdy sounding name for all the bits of extra information associated with a post. Things like date of publication,

author, categories, comment count.

Meta information 1

Define content for the first meta info area. This can include text and HTML. For more on the available variables, please in your

sites Headway configuration page for Posts.

Default: %author% - %date%, %time%%categories%

Meta information 2

Define content for the second meta info area. This can include text and HTML. For more on the available variables, please in

your sites Headway configuration page for Posts.

Default: %comments_link%

Date format

Date format to use in meta info. Use %date% in meta content to show the time. See

codex.wordpress.org/Formatting_Date_and_Time. for more information on formats available.

Default: F j, Y

Time format

Time format to use in meta info. Use %time% in meta content to show the time. See

codex.wordpress.org/Formatting_Date_and_Time. for more information on formats available.

Default: g:i a

Show author picture

Option to show or hide the author of the post's picture.

Author picture width

Set the width to use for the author's picture. This will automatically apply to the height as well.


Category archive title

Set a title or not for the Category Archives page. Include %categories% for category names.

Default: Showing by category: %categories%

Author archive title

Set a title or not for the Author Archives page. Include %author% for author name.

Default: Showing by author: %author%


Images

Note: The default image used is the Featured Image of the post. This can be set under the Publish/Preview button. If it is not

set, then Excerpts+ will attempt to use the first image it finds in the post.

Image location

Choose where to display the image: Next to the title; In the content; Behind the excerpt content; or Use structure position to use

the position set in the Structure settings

Image alignment

Option to position image to the left or right when location is in the content or the title, or centre if image location is in the

content.

Align title, meta and content/excerpt with image

This will vertically align the all the text information with the image, instead of wrapping around the image.

Image borders

Show border around images.

Do not recreate images for this block

By default, this block's images will be recreated when publishing or refreshing in the Visual Editor.

Once you are happy with the images for this block, then check this so they don\'t get rereated each time.

This has no effect other than saving the time it takes to reload the Visual Editor.


Image Sizing

Image width

Set the width (in pixels) for the displayed image.

Note: The image width is only used when the Image Location is either Title or Content. In all other uses, the image will take

the full width of the cell.

Image height

Set the height (in pixels) for the displayed image.

Force image width

Image quality

Lower values will reduce the size of the file but also reduce the clarity of the image. Higher values will make images slower

loading.

Value range is 0 to 100. However, if zero it will default to 70.

Vertical crop alignment

Choose how you want to vertically align the main image when it crops.

Options are:

Centre

Top

Top quarter

Bottom quarter

Bottom

In the cropping examples below, you can see how the beginning point for cropping moves further down with each selection.

This is one you will really have to experiment with to find what suits the particular block and its images the best.


Horizontal crop alignment

Choose how you want to horizontally align the main image when it crops.

Options are:

Centre

Left

Left quarter

Right quarter

Right

Image resizing method

Choose how you want the image resized in respect of its width and height to the Display Image Height and Width

Options are:

Crop width and height to fit

Stretch to width and height (Warning: Can distort image)

Crop width, match height

Match width, crop height

Fit within width and height

Image fill color

Choose a fill colour for when an image doesn't fully fill the frame

Maximum image dimensions

This setting will limit source image maximum dimensions. eg. 1000x1000px.

This is a preventative in case the site's users upload large dimension images - eg. 3000x2000 - which chew memory and slow

down the system.

Higher values may even cause the site to break on larger images if it runs out of memory.

If an image exceeds this dimension, a grey box will display instead.

Leaving it blank or zero will process the image as normal.


Sliders

Display as slider

Display excerpts in a slider instead of a multi-row grid. Each row will become a slide

Slide time

Input (in seconds) how long each slide should be displayed.

Slide transition

Select the type of transition you'd like between slides.

Options are:

Fade

Slide

Transition time

Input (in seconds) how long the transition should take. Enter 0 to use mouse click to change slides.

Pager type

Select the type of display for the slide pager (i.e. navigation).

Options are:

Bullets

Numbers

None

Is the block background light or dark?

Select whether the colour behind the navigation is a light or dark shade.

(This does not change the background of the block, merely the colour of the pager.)

This option is provided so to make your navigation more visible depending if your background is dark or light.


Developer

These options are targetted at web developers who are familar with coding

Permalink rel

This option allows you to enter a custom Rel attribute as some plugins use the permalink Rel attribute wth their own code.

Permalink class

This option lets you set a custom class name for the permalin as some plugins use a specific class name

Adjust box calculation by

If you manuallly add padding or margins in custom CSS, it can throw out the automatic calculation of the cell widths. This

option provides a "fudge" factor to let you comepnsate for that.

Show debug info

When activated, dumps heaps of variables which may be of use to a developer, but is defintiely of use for E+ debugging.


Hooks

Another one for the deloper types. Hooks allow the insertion of code in certain points on the page. The code must be valid

PHP (without the ). Therefore, HTML must be echoed. The names are self-explanatory.

Before title

Code entered here will target the hook named ep_before_title

After title

Code entered here will target the hook named ep_after_title

Before meta 1

Code entered here will target the hook named ep_before_meta1

After meta 1

Code entered here will target the hook named ep_after_meta1

Before meta 2

Code entered here will target the hook named ep_before_meta2

After meta 2

Code entered here will target the hook named ep_after_meta2

Before image

Code entered here will target the hook named ep_before_image

After image

Code entered here will target the hook named ep_after_image

Before content

Code entered here will target the hook named ep_before_content


After content

Code entered here will target the hook named ep_after_content

Before cell row 1

Code entered here will target the hook named ep_before_cellrow1

After cell row 1

Code entered here will target the hook named ep_after_cellrow1

After cell row 2


After cell row 3


After cell row 4


After cell row 5



Advanced Styling

These options let desingers easily apply custom styling to some elements. It's most useful for elements you want to apply a

gradient to.

Block Title

Input custom CSS to style the block title (if used). Is applied to CSS selector: .ep-block-title

Block

Input custom CSS to style the block. Is applied to CSS selector: .excerpts-plus

Excerpt+ Cell

Input custom CSS to style each excerpt+ cell. Is applied to CSS selector: .ep-cell

Cell Row 1

Input custom CSS to style cell row 5. Is applied to CSS selector: .ep-cellrow1

Cell Row 2


Cell Row 3


Cell Row 4


Cell Row 5


Read More

Input custom CSS to style the Read More link. Is applied to CSS selector: .excerpt-read-more


Page Navigation

Input custom CSS to style page navigation buttons. Is applied to CSS selector: .ep-nav


Excerpst+ Styling


Styling Excerpts+ using the Headway 3 Design Editor

Excerpts+ Block

When you select the Excerpts+ Block in the Design Editor, the first panel of options shown is the general settings for the

Excerpts+.

If an Instance is not selected, then any change syou make, either here or in each specific element's options panel, will apply to

every Excerpts+ block.

So make sure to first select an Instance if you only want to apply it to a specific block.

This panel provides formating for:

Background

Borders

Rounded Corners

Box Shadow

and is applied to the css selector .block-type-excerpts-plus

Cell Wrapper


Background

Borders

Rounded Corners

Box Shadow

and is applied to the css selector .excerpts-plus

Cell


Background

Borders

Rounded Corners

Box Shadow

and is applied to the css selector .ep-cell


Block Title


Fonts

Text Shadow

Background

Borders

Rounded Corners

Box Shadow

and is applied to the css selector .ep-block-title

Block Title Hyperlink


Fonts

Text Shadow

Background

and is applied to the css selector .ep-block-title a

Title


Fonts

Text Shadow

Background

and is applied to the css selector .excerpt-title h2.entry-title

Meta


Fonts

Text Shadow

Background

and is applied to the css selector .ep-meta.entry-meta

Meta Hyperlinks


Fonts

Text Shadow

Background

and is applied to the css selector .ep-meta.entry-meta a


Body Text


Fonts

Text Shadow

Background

and is applied to the css selector .excerpt-content

Body Text Hyperlinks


Fonts

Text Shadow

Background

and is applied to the css selector .excerpt-content a

Read More


Fonts

Text Shadow

Background

and is applied to the css selector a.excerpt-read-more

Page Navigation


Fonts

Text Shadow

Background

Borders

Rounded Corners

Box Shadow

and is applied to the css selector .ep-nav


Tips and HowTos


Examples

The following examples provide some info on how different lexcerpts layouts on the Excerpts+ demo pages were formed

Using Pagination

Pagination is when WordPress allows you to page through your posts. Youll see the Previous and Next buttons at the foot

of posts when pagination is enabled.

Key settings:

Layout- Pagination: Enabled;

Layout - Number to show full width: 1;

Images - Image Location: Title;

Images - Image Position: Left;

Images - Title aligned with content: Enabled

Using Excerpts+ like an Image Rotator

An image rotator takes its image from a gallery or specified URLs. With Excerpts+, they are taken from the posts or pages.

Consequently, it would be a little clunkier to use Excerpts+ as an image rotator than a specific plugin or block, but sometimes,

it might be the right tool for the job.


Key settings:

Structure - Cell Row 1: Image (others: None)

Layout - Number Across: 1

Filters - Include Categories: Choose a category were all the posts have images

Image Sizing - Image Height: Of your choosing

Sliders - Display as a slider: Show

Sliders - Pager type: None Note: The Image Width is not used, because locating the image in a cell makes the image the full

width of the cell.

Key settings:

Structure - Cell Row 1: Title

Structure - Cell Row 2: Content

Structure - Vertical Alignment: Bottom

Layout - Number Across: 1

Filters - Include Categories: Choose a category were all the posts have images

Image Sizing - Image Height: Of your choosing

Sliders - Display as a slider: Show Note: The Image Width is not used, because locating the image in a cell makes the image

the full width of the cell.

Using the Title and Content alignment

A popular design feature is showing an image, then aligning all the content with its right edge, so that the space

underneath the image is empty. This is as simple as enabling it in Excerpts+. Plus, if a post doesnt contain a Featured Image,

the layout in that cell will adjust accordingly, keeping everything very neat.

Key settings:


Images - Align excerpt with title when image in title: Enabled

Images - Image Location: Title

Images - Image Position: Left(right works too, but its not as obvious)

Note: Dont overdo the image width, because if the image takes up too much width of the cell, the content will get all

squished.

Show one excerpt then the remainder as a list of titles

This is a layout commonly used on magazine and news sites where they want to show an excerpt of the first story in a

category, and then title links for for then next five or so.

Key Settings:

Layout - Number across: 1

Excerpts - Excerpt first then list: Enabled

Note: This feature only works when Number across is set to one - otherwise it would all look too messy.

Three examples of using the Structure editor to get different layouts

In the above example, the image is display within the content/excerpt.


This example shows when the Image Location is set to Behind. The cells are aligned to the bottom of the image. Note how

unused cells are ignored.

Thirdly, an example that shows the image location being set by the structure.


CSS Selectors

Okay, this chapter is for the design freaks who really want to get their hands dirty. Excerpts+ has many CSS classes you can

use to uniquely style your or your clients site using Headways Live CSS Editor, or custom.css file.

Some useful Excerpts+ CSS classes

.excerpts-plus-excerpt

.excerpts-plus-row

ep-more-indicator (this is the ellipses)

a.excerpt-more-link (this is the text)

.excerpt-linkto

.excerpt-title

.entry-title a

.excerpt-content

.ep-show-border-content img

.ep-show-border-title img

.ep-show-border-none img (i.e. this is when the image is in the structure)

.ep-cell

.ep-cell-container

.ep-cellcol1 (Contains image when title location, position left and title aligned) .ep-cellcol2 (Contains the cell rows) .ep-cellcol3

(Contains image when title location, position right and title aligned)

.ep-cellrow1 ( and 2,3,4,5 These are the rows set in the Structure) .

excerpts-plus-excerpt-behind

.slider .slider-slide

.slider-bglight .

slider-bgdark

.slider-bullets

.slider-numbers

Also, each cell, at the ep-cell level, is assigned a unique call consisting of the cell number and the block ID in the form

ep-cell-no-CC-block-id-LL where CC is the cells number, and LL is the id of the block.

Heres a few examples:

/* Colour excerpt titles red but only in sliders */

body.custom .slider .excerpt-title a {

color: red;

}

/* Colour excerpt content navy and it's background grey, but only when content is displayed in cell row 3 */

body.custom .ep-cellrow3 .excerpt-content {

color: navy;

background:grey;

}

/* Change the background tint colour of the text area when using image behind.*/

body.custom div.excerpts-plus-excerpt-behind .ep-cell-container {

background: rgba(96,127,192,0.7)!important;

}

Excerpts+ for Headway 3Table of ContentsIntroductionAbout Excerpts+What's New in Excerpts+ for Headway 3Other FeaturesSystem RequirementsContactDisclaimer

InstallationInstalling Excerpts+ for the first timeThe quick versionStep-by-step

Installing on a site with Excerpts+ already installedThe quick versionStep-by-step

Using Excerpts+Adding an Excerpts+ block

Excerpts+ OptionsHelpStructureCell row 1Cell row 2Cell row 3Cell row 4Cell row 5Vertical alignment when image location is behind

LayoutNumber to showNumber acrossCells Vertical GapCell PaddingNumber to show as full width contentOrderOrder byLink to textLink to URLRow borderPagination

FiltersInclude CategoriesMust be in ALL included categoriesExclude CategoriesAuthorShow Sticky posts firstInclude sub-categories when E+ is displaying on a Category Archive page

TitlesBlock TittleBlock title URLPost Title BulletPost title background tint % (when Image Behind is selected)Post title background tint colour (when Image Behind is selected)Don't link to post/pageLink "Go to" text

ContentContent typeShow full content or excerpt onlySpecific IDs (optional)Show children of specific IDs (Page types only)Exclude Specific IDsSkip n posts

ExcerptsExcerpt LengthCharacters or WordsTruncation characterRead More textNo Excerpt/Content messageExcerpt first, then list

MetaMeta information 1Meta information 2Date formatTime formatShow author pictureAuthor picture widthCategory archive titleAuthor archive title

ImagesImage locationImage alignmentAlign title, meta and content/excerpt with imageImage bordersDo not recreate images for this block

Image SizingImage widthImage heightForce image widthImage qualityVertical crop alignmentHorizontal crop alignmentImage resizing methodImage fill colorMaximum image dimensions

SlidersDisplay as sliderSlide timeSlide transitionTransition timePager typeIs the block background light or dark?

DeveloperPermalink relPermalink classAdjust box calculation byShow debug info

HooksBefore titleAfter titleBefore meta 1After meta 1Before meta 2After meta 2Before imageAfter imageBefore contentAfter contentBefore cell row 1After cell row 1After cell row 2After cell row 3After cell row 4After cell row 5

Advanced StylingBlock TitleBlockExcerpt+ CellCell Row 1Cell Row 2Cell Row 3Cell Row 4Cell Row 5Read MorePage Navigation

Excerpst+ StylingStyling Excerpts+ using the Headway 3 Design EditorExcerpts+ BlockCell WrapperCellBlock TitleBlock Title HyperlinkTitleMetaMeta HyperlinksBody TextBody Text HyperlinksRead MorePage Navigation

Tips and HowTosExamplesUsing PaginationUsing Excerpts+ like an Image RotatorUsing the Title and Content alignmentShow one excerpt then the remainder as a list of titlesThree examples of using the Structure editor to get different layouts

CSS SelectorsSome useful Excerpts+ CSS classes

excerptsplus for headway3

Documents

installed excerpts

excerpts block

excerpts options4help

greater headway

headway blocks

excerpts zip file

user guideexcerpts

image borders