Download

WordPress currently only allows you to use custom avatars that are uploaded through Gravatar. One User Avatar enables you to use any photo uploaded into your Media Library as an avatar. This means you use the same uploader and library as your posts. No extra folders or image editing functions are necessary. This plugin is a fork of WP User Avatar v2.2.16.

One User Avatar also lets you:

• Upload your own Default Avatar in your One User Avatar settings.
• Show the user’s Gravatar avatar or Default Avatar if the user doesn’t have a One User Avatar image.
• Disable Gravatar avatars and use only local avatars.
• Use the [avatar_upload] shortcode to add a standalone uploader to a front page or widget. This uploader is only visible to logged-in users.
• Use the [avatar] shortcode in your posts. These shortcodes will work with any theme, whether it has avatar support or not.
• Allow Contributors and Subscribers to upload their own avatars.
• Limit upload file size and image dimensions for Contributors and Subscribers.

Installation

1. Download, install, and activate the One User Avatar plugin.
2. On your profile edit page, click “Edit Image”.
3. Choose an image, then click “Select Image”.
4. Click “Update Profile”.
5. Upload your own Default Avatar in your One User Avatar settings (optional). You can also allow Contributors & Subscribers to upload avatars and disable Gravatar.
6. Choose a theme that has avatar support. In your theme, manually replace get_avatar with get_wp_user_avatar or leave get_avatar as-is. Read about the differences here.
7. You can also use the [avatar_upload] and [avatar] shortcodes in your posts. These shortcodes will work with any theme, whether it has avatar support or not.

Example Usage

Posts

Within The Loop, you may be using:

<?php echo get_avatar(get_the_author_meta('ID'), 96); ?>

Replace this function with:

<?php echo get_wp_user_avatar(get_the_author_meta('ID'), 96); ?>

You can also use the values “original”, “large”, “medium”, or “thumbnail” for your avatar size:

<?php echo get_wp_user_avatar(get_the_author_meta('ID'), 'medium'); ?>

You can also add an alignment of “left”, “right”, or “center”:

<?php echo get_wp_user_avatar(get_the_author_meta('ID'), 96, 'left'); ?>

Author Page

On an author page outside of The Loop, you may be using:

<?php
	$user = get_user_by( 'slug', $author_name );
	echo get_avatar( $user->ID, 96 );
?>

Replace this function with:

<?php
	$user = get_user_by( 'slug', $author_name );
	echo get_wp_user_avatar( $user->ID, 96 );
?>

If you leave the options blank, One User Avatar will detect whether you’re inside The Loop or on an author page and return the correct avatar in the default 96×96 size:

<?php echo get_wp_user_avatar(); ?>

The function get_wp_user_avatar can also fall back to get_avatar if there is no One User Avatar image. For this to work, “Show Avatars” must be checked in your One User Avatar settings. When this setting is enabled, you will see the user’s Gravatar avatar or Default Avatar.

Comments

For comments, you might have in your template:

<?php echo get_avatar($comment, 32); ?>

Replace this function with:

<?php echo get_wp_user_avatar($comment, 32); ?>

For comments, you must specify the $comment variable.

Other Available Functions

[avatar_upload] shortcode

You can use the [avatar_upload] shortcode to add a standalone uploader to a front page or widget. This uploader is only visible to logged-in users.

You can specify a user with the shortcode, but you must have edit_user capability for that particular user.

[avatar_upload user="admin"]

[avatar] shortcode

You can use the [avatar] shortcode in your posts. It will detect the author of the post or you can specify an author by username. You can specify a size, alignment, and link, but they are optional. For links, you can link to the original image file, attachment page, or a custom URL.

[avatar user="admin" size="medium" align="left" link="file" /]

You can also add a caption to the shortcode:

[avatar user="admin" size="medium" align="left" link="file"]Photo Credit: Your Name[/avatar]

Note: If you are using one shortcode without a caption and another shortcode with a caption on the same page, you must close the caption-less shortcode with a forward slash before the closing bracket: [avatar /] instead of [avatar]

get_wp_user_avatar_src

Works just like get_wp_user_avatar but returns just the image src. This is useful if you would like to link a thumbnail-sized avatar to a larger version of the image:

<a href="<?php echo get_wp_user_avatar_src( $user_id, 'large' ); ?>">
	<?php echo get_wp_user_avatar( $user_id, 'thumbnail' ); ?>
</a>

has_wp_user_avatar

Returns true if the user has a One User Avatar image. You must specify the user ID:

<?php
	if ( has_wp_user_avatar( $user_id ) ) {
		echo get_wp_user_avatar( $user_id, 96 );
	} else {
		echo '<img src="my-alternate-image.jpg" />';
	}
?>

Frequently Asked Questions

How do I use One User Avatar?

First, choose a theme that has avatar support. In your theme, you have a choice of manually replacing get_avatar with get_wp_user_avatar, or leaving get_avatar as-is. Here are the differences:

get_wp_user_avatar

1. Allows you to use the values “original”, “large”, “medium”, or “thumbnail” for your avatar size.
2. Doesn’t add a fixed width and height to the image if you use the aforementioned values. This will give you more flexibility to resize the image with CSS.
3. Allows you to use custom image sizes registered with [add_image_size](http://codex.wordpress.org/Function_Reference/add_image_size) (fixed width and height are added to the image).
4. Optionally adds CSS classes “alignleft”, “alignright”, or “aligncenter” to position your avatar.
5. Shows nothing if the user has no One User Avatar image.
6. Shows the user’s Gravatar avatar or Default Avatar only if “Show Avatars” is enabled in your One User Avatar settings.

get_avatar

1. Requires you to enable “Show Avatars” in your One User Avatar settings to show any avatars.
2. Accepts only numeric values for your avatar size.
3. Always adds a fixed width and height to your image. This may cause problems if you use responsive CSS in your theme.
4. Shows the user’s Gravatar avatar or Default Avatar if the user doesn’t have a One User Avatar image. (Choosing “Blank” as your Default Avatar still generates a transparent image file.)
5. Requires no changes to your theme files if you are currently using get_avatar.

Read more about get_avatar in the WordPress Function Reference.

Can I create a custom Default Avatar?

In your One User Avatar settings, you can upload your own Default Avatar.

Can I disable all Gravatar avatars?

In your One User Avatar settings, you can select “Disable Gravatar — Use only local avatars” to disable all Gravatar avatars on your site and replace them with your Default Avatar. This will affect your registered users and non-registered comment authors.

Can Contributors or Subscribers choose their own One User Avatar image?

Yes, if you enable “Allow Contributors & Subscribers to upload avatars” in the One User Avatar settings. These users will see a slightly different interface because they are allowed only one image upload.

Will One User Avatar work with comment author avatars?

Yes, for registered users. Non-registered comment authors will show their Gravatar avatars or Default Avatar.

Will One User Avatar work with bbPress?

Yes!

Will One User Avatar work with BuddyPress?

No, BuddyPress has its own custom avatar functions and One User Avatar will override only some of them. It’s best to use BuddyPress without One User Avatar.

How can I see which users have an avatar?

For Administrators, One User Avatar adds a column with avatar thumbnails to your Users list table. If “Show Avatars” is enabled in your One User Avatar settings, you will see avatars to the left of each username instead of in a new column.

Can I use the One User Avatar uploader in a front page or widget?

Yes, you can use the [avatar_upload] shortcode to put a standalone uploader in a front page or widget. This uploader is only visible to logged-in users..

You can specify a user with the shortcode, but you must have 'edit_user' capability to change the user’s avatar.

[avatar_upload user="admin"]

Can I insert One User Avatar directly into a post?

You can use the [avatar] shortcode in your posts. It will detect the author of the post or you can specify an author by username. You can specify a size, alignment, and link, but they are optional. For links, you can link to the original image file, attachment page, or a custom URL.

[avatar user="admin" size="96" align="left" link="file" /]

Outputs:

<a href="{fileURL}" class="wp-user-avatar-link wp-user-avatar-file">
	<img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" />
</a>

If you have a caption, the output will be similar to how WordPress adds captions to other images.

[avatar user="admin" size="96" align="left" link="file"]Photo Credit: Your Name[/avatar]

Outputs:

<div style="width: 106px" class="wp-caption alignleft">
	<a href="{fileURL}" class="wp-user-avatar-link wp-user-avatar-file">
		<img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96" />
	</a>
	<p class="wp-caption-text">Photo Credit: Your Name</p>
</div>

Note: If you are using one shortcode without a caption and another shortcode with a caption on the same page, you must close the caption-less shortcode with a forward slash before the closing bracket: [avatar /] instead of [avatar]

What CSS can I use with One User Avatar?

One User Avatar will add the CSS classes “wp-user-avatar” and “wp-user-avatar-{size}” to your image. If you add an alignment, the corresponding alignment class will be added:

<?php echo get_wp_user_avatar($user_id, 96, 'left'); ?>

Outputs:

<img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" />

Note: “alignleft”, “alignright”, and aligncenter” are common WordPress CSS classes, but not every theme supports them. Contact the theme author to add those CSS classes.

If you use the values “original”, “large”, “medium”, or “thumbnail”, no width or height will be added to the image. This will give you more flexibility to resize the image with CSS:

<?php echo get_wp_user_avatar($user_id, 'medium'); ?>

Outputs:

<img src="{imageURL}" class="wp-user-avatar wp-user-avatar-medium" />

Note: WordPress adds more CSS classes to the avatar not listed here.

If you use the [avatar] shortcode, One User Avatar will add the CSS class “wp-user-avatar-link” to the link. It will also add CSS classes based on link type.

• Image File: wp-user-avatar-file
• Attachment: wp-user-avatar-attachment
• Custom URL: wp-user-avatar-custom

[avatar user="admin" size="96" align="left" link="attachment" /]

Outputs:

<a href="{attachmentURL}" class="wp-user-avatar-link wp-user-avatar-attachment">
	<img src="{imageURL}" width="96" height="96" class="wp-user-avatar wp-user-avatar-96 alignleft" />
</a>

What other functions are available for One User Avatar?

• get_wp_user_avatar_src: retrieves just the image URL
• has_wp_user_avatar: checks if the user has a One User Avatar image
• See example usage here

Advanced Settings

Add One User Avatar to your own profile edit page

You can use the [avatar_upload] shortcode to add a standalone uploader to any page. It’s best to use this uploader by itself and without other profile fields.

If you’re building your own profile edit page with other fields, One User Avatar is automatically added to the show_user_profile and edit_user_profile hooks. If you’d rather have One User Avatar in its own section, you could add another hook:

do_action( 'edit_user_avatar', $current_user );

Then, to add One User Avatar to that hook and remove it from the other hooks outside of the administration panel, you would add this code to the functions.php file of your theme:

function my_avatar_filter() {
	// Remove from show_user_profile hook
	remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
	remove_action( 'show_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );

	// Remove from edit_user_profile hook
	remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
	remove_action( 'edit_user_profile', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );

	// Add to edit_user_avatar hook
	add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_action_show_user_profile' ) );
	add_action( 'edit_user_avatar', array( 'wp_user_avatar', 'wpua_media_upload_scripts' ) );
}

// Loads only outside of administration panel
if ( ! is_admin() ) {
	add_action( 'init','my_avatar_filter' );
}

HTML Wrapper

You can change the HTML wrapper of the One User Avatar section by using the functions wpua_before_avatar and wpua_after_avatar. By default, the avatar code is structured like this:

<div class="wpua-edit-container">
	<h3>Avatar</h3>
	<input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" />
	<p id="wpua-add-button">
		<button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button>
	</p>
	<p id="wpua-preview">
		<img src="{imageURL}" alt="" />
		Original Size
	</p>
	<p id="wpua-thumbnail">
		<img src="{imageURL}" alt="" />
		Thumbnail
	</p>
	<p id="wpua-remove-button">
		<button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button>
	</p>
	<p id="wpua-undo-button">
		<button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button>
	</p>
</div>

To strip out the div container and h3 heading, you would add the following filters to the functions.php file in your theme:

remove_action( 'wpua_before_avatar', 'wpua_do_before_avatar' );
remove_action( 'wpua_after_avatar', 'wpua_do_after_avatar' );

To add your own wrapper, you could create something like this:

function my_before_avatar() {
	echo '<div id="my-avatar">';
}
add_action( 'wpua_before_avatar', 'my_before_avatar' );

function my_after_avatar() {
	echo '</div>';
}
add_action( 'wpua_after_avatar', 'my_after_avatar' );

This would output:

<div id="my-avatar">
	<input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" />
	<p id="wpua-add-button">
		<button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button>
	</p>
	<p id="wpua-preview">
		<img src="{imageURL}" alt="" />
		<span class="description">Original Size</span>
	</p>
	<p id="wpua-thumbnail">
		<img src="{imageURL}" alt="" />
		<span class="description">Thumbnail</span>
	</p>
	<p id="wpua-remove-button">
		<button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button>
	</p>
	<p id="wpua-undo-button">
		<button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button>
	</p>
</div>

This tutorial is part of the series “Enlightenment Theme Documentation”. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Overwiew of the Theme Demo Home Page Architecture

Enlightenment Theme’s demo home page is a static page set as front page with its content highly customized. The level of customization in this page is achieved adding and removing components with the Page Builder, adding Custom Query Widgets to user-assigned sidebar locations and integrating these components with the theme’s Grid System.

Visual Breakdown of the Home Page’s Components

Before we dive into details how each piece of content was created, we present you a color-coded breakdown of the home page’s components and their corresponding locations on the page. Page locations (mostly sidebars) are in a lighter color and numbered with a black bullet and components (mostly custom query widgets) are highlighted in a darker color and numbered with a white bullet:

1. Navbar
   1. Site Logo and Title
   2. Site Navigation
   3. Navbar Sidebar: Search Widget
2. Full Screen Sidebar, 1 Column
   1. Custom Query Widget: Slider, Multiple Pages
3. Header Sidebar, 1 Column
   1. Custom Query Widget: Single Page
   2. Custom Query Widget: 3 Columns, Multiple Pages
4. Secondary Header Sidebar, 1 Column
   1. Custom Query Widget: Single Page
5. Main Sidebar, 1 Column
   1. Custom Query Widget: Single Page
6. Secondary Main Sidebar, 1 Column
   1. Custom Query Widget: 3 Columns, Portfolio Post Type
7. Content Sidebar, 1 Column
   1. Custom Query Widget: Single Page
8. Secondary Content Sidebar, 1 Column
   1. Custom Query Widget: Single Page
9. Page Content
10. After Content Sidebar, 2 Columns
    1. Custom Query Widget: Single Page
    2. Custom Query Widget: Image Gallery, 1 leading post
11. Secondary After Content Sidebar, 1 Column
    1. Custom Query Widget: Single Page
12. After Main Sidebar, 1 Column
    1. Custom Query Widget: 4 Columns, Multiple Pages
13. Secondary After Main Sidebar, 1 Column
    1. Custom Query Widget: 2 Columns, Multiple Pages
14. Footer Sidebar, 1 Column
    1. Custom Query Widget: Carousel, Image Gallery
15. Secondary Footer Sidebar, 4 Columns
    1. Recent Posts Widget
    2. Recent Comments Widget
    3. Recent Posts Widget
    4. Recent Comments Widget

Walkthrough of the Home Page Creation Process

In the following we will go into detail about how to create and configure the static front page and the content for each of the page’s components, how toset up the required sidebar locations and add the corresponding widgets.

Creating a New Page

To create a new page go to Pages → Add New. You can give the page any title as we will remove the title from the page in the next step. The page title will still appear in the browser tab and search engine results unless you override it with a SEO plugin like WordPress SEO by Yoast or All-in-one SEO Pack. We’ll just call our page “Home”.

Adding Content to Page

Besides content that is dynamically added via widget areas, content created via the WordPress text editor can also be displayed on the page or you can remove the page’s content via the Page Builder and generate the page exclusively through widget areas. Almost any piece of content can be added through the text editor and for consistency reasons we have selected a central page section so all available sidebars can be used:

The content’s headline is styled as “Heading 3” and aligned to center via the editor.

The leading text is added via the Bootstrap Shortcodes for WordPress plugin and the [lead] shortcode. Since this shortcode generates a paragraph we can’t manipulate its styling via the editor, so to align the text to center we have added the xclass="text-center" attribute to the shortcode.

The non-paragraph line-breaks in the text can be inserted by pressing Shift+Enter.

The “Read More” button was added with the [button] shortcode. The type="default" styles it with a white background and size="lg" makes its text larger. The href="…" attribute is the link the button points to. Since this shortcode does not generate a paragraph it can be aligned to center from the text editor.

If your preview the page at this point, you will see the default page template with the added content and the comment form:

Configuring the Static Page

After you have saved the page as draft you can go ahead and apply page configurations. To give the page a more “landing page” look we will need to apply some customizations to its design.

Turning off Comments

The first thing you’ll want to do is turn off comments for this page. You can do this by scrolling to the bottom of the page and in the “Discussion” meta box unchecking the “Allow comments” box. You may also want to uncheck “Allow Trackbacks” to avoid any trackbacks from appearing on the page. If you don’t see the “Discussion” meta box, click on “Screen Options” in the upper right-hand corner and check “Discussion”:

If you preview it now you’ll see the default page template without the comment form:

Changing the Page Design

For the theme’s home page we’ll be using the “Full Screen” page design instead of the “Default” page design. To do this go to the “Page Design” meta box in the right-hand column and select “Full Screen”:

On preview you will see the page on a white background with no borders:

Removing the Page Title

The page title can be removed via the Page Builder. Scroll to the bottom of the page and in the meta box “Page Builder” uncheck “Use default template hooks for page”. If you don’t see this meta box, click on “Screen Options” in the upper right-hand corner and check “Page Builder”:

Note that to be able to use the page builder tools you first need to save the page as draft.

For the “Entry Header” hook drag the “Post Title” function from the “Hooked Functions” column to the “Available Functions” column:

If you’re editing a post with a post type different than page you may also want to remove the “Post Meta”. If you didn’t add any content to the page you’ll want to remove “The Loop” function from the “Content” hook instead.

Now if you preview the page you’ll see just the page content without the title:

Great! It’s starting to look like a landing page canvas.

Changing the Page Layout

The layout can be changed from the “Page Layout” meta box under the post editor. For this page we’ll use the “Full Width” layout:

Since “Full Width” is the default layout for pages, changing it is merely a precautionary measure in care you’ll ever change the default layout for pages.

Now we can move further to the next step and configure the widget areas.

Creating Dynamic Sidebars

New sidebars can be created by going to Appearance → Theme Options → Sidebars. For this page we’ll be using every sidebar location except “Primary”, “Secondary”, “Navbar” and “The Loop”. To keep simple naming analogies we’ll name every sidebar like the location it corresponds to and prefix it with “Home”. So, the sidebars we’ll be creating and their number of columns are as follows:

After all sidebars have been created the list should look like this:

Don’t assign these sidebars to any sidebar locations in the global scope as we’ll use them exclusively for our home page.

Assigning Dynamic Sidebars to Sidebar Locations

Go back to the page editor and click on “Save Draft” to force a refresh of the page and make the newly created sidebars available. Then scroll to the bottom of the page and for the “Sidebars” meta box uncheck “Use default sidebar locations for page”. If you don’t see the “Sidebars” meta box, click on “Screen Options” in the upper right-hand corner and check “Sidebars”.

How you should see all sidebar locations and be able to assign the previously created dynamic sidebars to them:

Go ahead and save the page as draft now so you don’t have to come back here each time after adding a widget.

Generating Dynamic Page Components

Now that we’ve finished setting up the page, we can move further to generating the content components that will be added to it. For this part we’ll be creating some static pages that we’ll afterwards add to the page via Custom Query Widgets.

Since these pages will also be accessible from their own URL it’s a good idea to instruct search engines not to index those pages. This can be done with a plugin like WordPress SEO by going to the “Advanced” tab and setting “Meta Robots Index” to “noindex” and “Include in Sitemap” to “Never include”.

Generating the Full Screen Slider

The Full Screen Slider is a Custom Query Widget of multiple pages added to the “Full Screen” sidebar. The featured images will be used as the background and the pages’ content will overlay on the image.

Creating Content Pages

First we will create 3 pages and add the corresponding featured images to them. The pages are then displayed in reverse-chronological order so you’ll want to pay attention to the order in which they’re published. You can give the pages any title as it won’t be displayed on the page.

The content was made to occupy only half the width by inserting it in a 6 columns width with Bootstrap’s grid system. This is done by first wrapping in the [column md="6"] … [/column] shortcode and then wrapping the entire content in [row] … [/row] shortcodes that are required to wrap all grid columns.

The [button] shortcode with type="default" attributes renders as with a transparent background and white border in the slider.

Adding the Custom Query Widget

After the pages have been published go to Appearance → Widgets and in the “Home Full Screen” Sidebar drag a Custom Query Widget. Under “Type” select “Slider” and under “Query” select “Multiple Pages”. Then, under “Select Pages”, check the boxes for the pages you have just created:

Now if you preview your home page you should see the slider:

Adding multicolumn Media Components

Bootstrap’s Media Components are content blocks with a headline and image floated to the left. You can observe 3 such components on the home page under the slider.

Creating Content Pages

For the media components we will create 4 pages, the first containing the headline and description of and the other 3 the media components themselves.

First create a page with just a headline styled as “Heading 3” and a paragraph, both aligned to the center:

Then create 3 pages that contain the media components:

As you can see, media components need to be wrapped in the [media] shortcode. The image is wrapped in the [media-object] shortcode and the pull="left" instructs that the object will be floated to the left. You don’t need to align the image itself to the left. The content is wrapped in the [media-body] shortcode and the title="…" attribute denotes the content’s headline. You don’t need to add any heading inside the content.

Adding the Custom Query Widgets

The widgets for these components will be added in the “Home Header” sidebar. First drag a Custom Query widget for the headline and description. Under “Query” select “Single Page” and under “Page” select the title of the page you have created:

Afterwards drag another Custom Query Widget into the same sidebar for the media components. Under “Grid” select “3 Columns”, under “Query” select “Multiple Pages” and check your pages containing the media components; then finally under “Number of leading entries” select “3”:

Now you should be able to see the media components on the home page under the slider:

Adding the “Download Now” Call to Action

The “Download Now” Call to Action is added to the “Secondary Header” sidebar which by default on pages with the “Full Screen” design displays on a light-gray background.

Creating Content Page

The content page for this call to action contains simply a headline and button:

The headline is styled as “Heading 3” and the button is added with the Bootstrap Shortcodes plugin, both aligned to center in the editor.

Adding the Custom Query Widget

Drag a Custom Query Widget to the “Home Secondary Header” sidebar. Under “Query” select “Single Page” and under “Page” select the page you’ve just created:

After you save the widget’s settings you can preview the call to action on the home page:

Adding multicolumn Portfolio Projects

Since the Custom Query Widget supports querying any post type, we can present a preview of our latest projects added with the Jetpack Portfolio post type.

For this section we will need to create only one page with the headline and description similar to the step above and insert it through a Custom Query Widget in the “Home Main” Sidebar. We won’t repeat the process since it’s identical to the example we’ve already covered. Note that you can also add a title and description directly in the Custom Query Widget but you can’t customize its font size or text alignment.

After adding the widget for the headline and description, add another Custom Query Widget to the “Home Main Secondary” sidebar. Under “Grid” select “3 Columns”, under “Post Type” select “Project” and under both “Total number of entries” and “Number of leading entries” select “3”:

On the home page you should see your latest 3 portfolio works:

Adding Content with Full Width Image

Adding a full width image to the page’s content is useful if you want to showcase something that requires attention to detail like a software screenshot. In the “Full Width” layout you can add an image of maximum 1060 pixels wide:

In our example we have added a screenshot of the theme’s drag-and-drop template editor which we hope you agree is one of the theme’s greatest features. The page was added as a single page query to the “Home Content” sidebar:

And here’s the result on the home page:

Adding In-Page multicolumn Content

Sometimes it’s more convenient to split a page’s content into multiple columns instead of relying on the sidebars’ and widgets’ integration with the grid system. This can be done with the Bootstrap Shortcodes plugin [row] and [column] shortcodes:

In our example we have wrapped the image in 6 columns and the rest of the content in another 6 columns. Then we have added this page as a single page query to the “Home Secondary Content” sidebar:

This is how it renders on the home page:

Hang on, we’re already half through the process!

Adding Image Galleries

For the image gallery section we have configured the “Home After Content” sidebar to display in 2 columns. While the Custom Query Widget can display in multiple columns it does not display multiple types of content and this is where the sidebars’ integration with the grid system comes in handy.

For the left column we have created a page with a headline and description:

Then we have added it to the “Home After Content” sidebar as a single page query:

For the image gallery drag a new Custom Query Widget to the “Home After Content” sidebar. Under “Type” select “Gallery”, under “Grid” select “2 Columns”, Under “Query” select “Image Gallery” and under “Number of leading entries” select “1”:

By clicking on “Choose Images” you can select the images for the gallery directly from the Media Library. Multiple images can be selected by holding down the Ctrl key on Windows or Cmd key on Mac:

One the home page you’ll see the gallery of images with the leading post in a single column followed by thumbnails of the other images:

Adding multicolumn Rich Content

Sometimes it’s more convenient to style content just with the text editor without messing with shortcodes or other plugin-generated content. To your amazement, the 4 columns of content, each with an image, headline and description, were created just with the text editor and added via the Custom Query Widget on 4 columns.

This is how the page content of such a component looks like:

Theme components were added to the home page as a query of multiple pages in 4 columns in the “Home After Container Sidebar”:

On the home page they render as 4 columns components of rich content:

Otherwise, if you want to style content on multiple columns in a single page, remember you can do so with the Bootstrap Shortcodes plugin. The symmetrically aligned pieces of text from the home page is such an example:

In the page above the content was split in 2 columns and the first part aligned to the right in the editor. The page was added to the “Home Secondary After Container” sidebar as a Custom Query Widget of a single page:

On the home page the content renders in 2 columns:

Adding an Image Carousel

The image carousel was added to the “Footer” sidebar that, like the “Secondary Header” sidebar, displays on a light-gray background in pages with the “Full Screen” design.

To add an image carousel, drag a Custom Query Widget to the “Home Footer” sidebar. Under “Type” select carousel and under “Query” select “Image Gallery” then select your images from the Media Library by clicking on “Choose Images”:

This is how is displays on the home page:

Adding other Widgets to Sidebars

The theme’s templates weren’t widgetized only to support the Custom Query Widget but to extend the theme’s ability to support content generated by any plugin. You should be able to use widgets of any type in the theme’s sidebars and if they’re properly coded should also render correctly.

In the “Home Secondary Footer” sidebar we have 4 widgets that come bundled with WordPress:

On the home page they render in 4 columns as lists of items:

Setting the Static Front Page

At this point we have completed the creation of our home page and, if until yet we have just saved the page as draft, now it safe to publish it.

To use this page as home page it’s not enough to publish it, you must set it as static front page. To do so, go to Pages → Add New and create a new page called “Blog”. Don’t add any content to this page as it will be used to display the blog posts instead. Then, go to Settings → Reading and under “Front page displays” select “A static page” and set the “Front page” to the page we have created in this tutorial and as “Posts page” the blog page you have just created:

Wrapping Up

This was the verbatim deconstruction of what we considered was a rich landing page that can properly demonstrate what kind of pages can be created with Enlightenment Theme. If you feel this was long not as simple as you expected we encourage you to give it a chance. Once you’ve mastered the way the theme’s tools work, creating amazing pages will become simple and intuitive.

And by all means, don’t stop here! If we wanted to limit the theme’s ability to creation of such pages we would have made a static template. We have created this level of flexibility to encourage you to create your own unique and amazing landing pages. Use the knowledge you have gained from this tutorial to create the pages you need to make your website stand out and let of know of your results, we’d love to hear what you’ve come up with using our theme!

Don’t forget to read our other tutorials that cover Enlightenment Theme’s Documentation. Remember Enlightenment is an advanced and very flexible theme that allows you to create amazing layouts and showcase any type of content in multiple ways, you don’t want to miss out on what pages you can create with this theme!

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Installing Bootstrap Shortcodes for WordPress Plugin

You can install the plugin from the WordPress admin. Go to Plugins → Add New and type in the search box “Bootstrap Shortcodes for WordPress”. The plugin should show up as the first result. Click the “Install Now” button and the plugin should automatically install. Below is a screenshot of the search results screen:

If you don’t have FTP access on your WordPress admin, you can download the plugin from the WordPress Plugin Repository and install it manually by unzipping it inside the /wp-content/plugins/ folder.

After you activate the plugin no configuration is needed. Don’t worry about the plugin breaking anything on your website, the Bootstrap stylesheet and script is added by the theme and the plugin merely converts shortcodes into HTML markup.

Inserting Bootstrap Shortcodes in Content

A Bootstrap Shortcodes button represented by the Boostrap logo will appear in the post editor right next to the “Add Media” button:

When clicking this button a modal window with reference of the available shortcodes will popup:

By clicking on any shortcode in the list, a detailed overview of the shortcode’s syntax and all available attributes will be presented. For each shortcode you have the possibility to insert an example in the editor’s content that you can afterwards modify:

In the screenshot below we have modified the button’s type from success to primary, removed the size attribute to fall back on the default “md” value, changed the hashtag in the link with http://onedesigns.com/ and the anchor text to “Click me!”:

In the front-end, the it will render as a medium sized button with a blue background, with the text “Click me!” and linking to http://onedesigns.com/:

You can read more about how each component will render on the front-end at the Bootstrap Documentation.

Breakdown of available Shortcodes

All available shortcodes, with live examples and sample code can be previewed at the Theme’s Demo Bootstrap Shortcodes Page.

Detailed documentation for each shortcode’s supported attributes is also available at the plugin’s GitHub project.

Conclusion

Styling content beyond the limitations of the WordPress TinyMCE editor has always been a goal for themes and plugins. Since WordPress core and plugins handle the generation of content and themes handle its presentation, content generated by plugin shortcodes was rerely in line with a theme’s styling and finding a common ground between content generation and presentation was always a challenge.

Since the markup and styling of the Bootstrap Framework became popular, themes that use this framework as a base for its front-end can find simple integration with plugins that offer shortcodes for its components. Offering a standardized and streamlined experience for our users was one of our goals and that’s why we decided to power Enlightenment Theme’s front-end by Bootstrap Framework.

Please let us know in the comments of any feedback you ave regarding our theme’s integration with the Bootstrap Shortcodes for WordPress plugin and remember to read our other tutorials from Enlightenment Theme’s Documentation.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

For each post you can select from one of the WordPress predefined post formats: Standard, Aside, Gallery, Link, Image, Quote, Status, Video, Audio and Chat. Each post format is styled differently on archive pages but in single posts they all fall back to the same format.

Some posts format are styled differently for leading posts and teaser posts when the grid loop is active. Some post formats are displayed without the title. These posts can still be accessed through their permalink on the post’s publish date.

In the following we will present how each post format is styled on archive pages:

Aside Post Formats

Post with the “Aside” format are displayed without title and their content in a lighter and larger font size. They are intended to emphasize short ideas that don’t require a title or long reader engagement:

Gallery Post Formats

For posts with the “Gallery” format, the first [gallery] shortcode is extracted and displayed in place of the post’s content followed by the excerpt:

Link Post Formats

The posts with “Link” format get their title’s permalink replaced with the first link found in the post content. They are visually distinguishable by having an “→” appended to their title. This post format displays the post’s excerpt instead of content for leading posts:

Image Post Formats

Posts with the “Image” format change the link in the feature image from the post’s permalink to the image and the post’s excerpt will be displayed instead of the content. If the post lacks a featured image the first image in the post’s content will be used instead. If the Image Lightbox is enabled that link will open the image in a lightbox:

Quote Post Formats

For posts with “Quote” format, neither title, content or excerpt are displayed. Instead the first <blockquote> tag is extracted from the post’s content and displayed on an orange background:

Status Post Formats

Posts with the “Status” format are displayed with no title and the author’s avatar floated to the left of the content. This post format is intended to replace Twitter’s 140 character short posts so the post’s content shouldn’t be too long:

Video Post Formats

For posts with the “Video” format, the first [video] shortcode is extracted and displayed in place of the post’s content followed by the excerpt. If no such shortcode is available the first embedded media is used instead:

Audio Post Formats

Posts with the “Audio” format, extract the first [audio] shortcode and displays it in place of the post’s content followed by the excerpt. If no such shortcode is available the first embedded media is used instead. Teaser posts also display the post’s featured image:

Chat Post Formats

The content of posts with “Chat” format has each paragraph styled as a speech bubble. Odd and even paragraphs are aligned and colored differently to differentiate between the person speaking:

Customizing Post Formats

The formats presented here cover the theme’s default handling. Some of the output a post formats can be customized for both leading and teaser posts through the Post Formats Template Editor and individual posts can be customized using the Page Builder.

Conclusion

Post formats are a great way to showcase different types of content. With the theme’s support for post formats and the possibility to style archive pages with the Masonry Grid you can turn your blog into a powerful multimedia website.

Please let us know in the comments section of any feedback you have regarding the theme’s handling of post formats and remember to read our other tutorials from Enlightenment Theme Documentation series.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Installing Jetpack Plugin

You can install the Jetpack plugin from the WordPress admin, by going to “Plugins > Add New”. It’s a featured plugin so it should appear in the front list. If you don’t see it type “Jetpack by WordPress.com” in the search bar:

If you don’t have FTP access on your WordPress admin, you can download it from the WordPress Plugin Repository and manually install it by unpacking the zip file in the /wp-content/plugins/ directory.

After activating the plugin it needs to connect to WordPress.com since most its features depend on WP.com’s cloud. You need a WordPress.com account for that.

If you’re working on a local machine you won’t be able to connect WordPress.com to the localhost server, but you can set the plugin in development mode so you can still access the features that don’t depend on WordPress.com’s cloud, including the portfolio custom post type.

If you get a “Jetpack could not connected to WordPress.com” or an XML-RPC error, it usually means you are using a proxy or caching server like Varnish that needs to be temporarily disabled until the connection is established.

Activating Jetpack’s Portfolio Module

After the plugin has been activated and connected to WordPress.com, a top-level item called “Jetpack” will appear in the admin menu and. under this item, click the second-level item “Setting” and a list of all available modules will appear. The portfolio post type is located in the “Custom Content Types” module which is disabled by default. To enable it, hover the cursor over its list entry and click the “Activate” link:

After the module has been activated, a “Configure” link will appear. This is actually a compatibility layer for themes that don’t natively support the portfolio custom post type. You don’t need to configure anything as Enlightenment Theme has full support for this post type.

Selecting the Number of Projects to Display per Page

Jetpack allows you to select a number of portfolio projects to display per archive page that is different from the default posts per page setting. This is a great feature and especially useful if you want to display the portfolio in a grid loop to make it display a symmetrical number of posts.

You can select the number of posts per page under “Settings > Reading”. Scroll to the bottom of the page and under “Portfolio Projects” change to the desired number. We have selected 9 as this is a great value to display projects in a 3 column masonry grid:

Creating Portfolio Projects

All Projects are listed under the “Portfolio” top-level menu item the the WordPress admin. New projects can be created from the “Add New” link and they can be categorized by “Project Types” and “Projects Tags” which are analogous to the default posts’ Categories and Tags:

Portfolio Projects can be edited just like normal blog posts. They support post formats, featured images, custom layouts, unlimited sidebars and the page builder:

Showcasing Portfolio Projects

The Portfolio Projects archive can be accessed by appending /portfolio/ (e.g. http://www.mysite.com/portfolio/) to the site’s front page URL if using pretty permalinks or ?post_type=jetpack-portfolio (e.g. http://www.mysite.com/?post_type=jetpack-portfolio) if not using URL rewrites.

A link to the portfolio can be added as a custom link by pasting the URL above in the menu editor. Project Types and Project Tags are listed in the left column.

By default the Portfolio archive displays in a 3 columns masonry grid with a Project Types filter:

The project types filter can be removed from the template editor and the grid can be configured for the portfolio archive, project types and project tags under “Appearance > Theme Options > Grid Loop”.

In the theme’s demo there are several examples of showcasing the portfolio:

1. Portfolio with 2 columns masonry grid
2. Portfolio with 3 columns masonry grid
3. Portfolio with 4 columns masonry grid
4. Portfolio with list entries and right sidebar
5. Portfolio with list entries in full width

Projects can be showcased inside posts with the Portfolio Shortcode and in sidebars using the Custom Query Widget.

The theme demo’s front page contains a custom query widget that displays the latest 3 portfolio projects:

Conclusion

Showcasing portfolios of works in a separate archive has been a popular feature of WordPress themes and plugins ever since the introduction of custom post types in WordPress 3.0. Custom implementation of themes created problems when users wanted to switch themes as implementations between different themes weren’t compatible and there wasn’t a consensus among plugin developers on a streamlined support for custom post types. This all changed when Jetpack made a huge step towards standardization in version 3.1 when introducing the portfolio custom post type. In the future we hope more and more themes will support this post type.

Please let us know in the comments section of any feedback you have regarding the theme’s implementation of Jetpack’s portfolio custom post type and remember to read our other tutorials from Enlightenment Theme’s documentation.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Drag-and-drop editing of templates has been a long established and popular feature in WordPress themes. Allowing backend customizations of a template’s output without editing code in template files if of great help to more non-technical users and also allows customizations that are future-proof, without the risk of losing them when updating and also remove some of the burden of creating child themes.

The Template Editor can be found under “Appearance > Theme Options > Templates”:

Post Formats can also be edited from the “Post Formats” tab. We’ll get into more detail about that later in the article.

The Template Editor has been designed similarly to WordPress’ Widgets interface. This is intended both to offer a more familiar experience to end-users and also to offer a smoother integration with the WordPress Admin interface.

From the option “Select Template to Edit” you can select the template where you want to add or remove functions. In this list you can find the default WordPress post archive labeled “Blog”, all custom post type archives, the default WordPress Category and Tag taxonomies as well as any other registered custom taxonomies and all single post templates and their corresponding teasers:

In the screenshot you can see Jetpack’s Portfolio “Project” post type and the “Project Type” and “Project Tag” custom taxonomies. The template for attachments is titled “Media” and a special template is the “Comments” that doesn’t display the general template hooks but special hooks available in the comments template.

Breakdown of the Theme’s internal Hook System

Each template has a list of available hooks to which functions can be added or removed. This hooks correspond to fixed sections inside the template like header or post content. The functions that can be added to each hook depend on a some conditionals, that’s why only a limited number of functions is available for each hook. For example the site header can only support site branding and navigation while the entry header can support post title, post thumbnail and post meta.

The available functions are listed in the left-hand column and the already hooked functions in the right-hand column. They can be added or removed by dragging and dropping them from one column to the other. For internal reason a function can be added to a hook only once.

The theme’s internal hook system has been designed on several levels: The first level covers general template sections like header, main content and footer. The second level covers sections inside The Loop that depend on conditionals to display their content. The third level covers sections inside post entries; these are hooks that loop several times for each displayed entry. Finally, the last level is comments section that usually displays on single posts with comments open.

In the following we will describe in detail using color-coded screenshots each level of hooks and their corresponding locations in the Template Editor:

General Template Hooks

General template hooks cover the main sections of any template like header, main content area and footer. As you can see sidebars are outside the scope of the template editor as their customization is handled by the unlimited sidebars feature.

1. Header
2. Before Content
3. Content
4. Footer

The Loop Template Hooks

Template hooks inside The Loop refer to hooks whose functions are more dependent on the template being queried. These functions decide how posts that are being looped are displayed. The Loop is by default located inside the content section highlighted in the screenshot above.

1. Entry Header
2. Entry Content
3. Entry Footer
4. After Entries List

Post Entry Template Hooks

Since post entries are located inside The Loop, template hooks inside post entries slightly intertwine with The Loop posts presented above. Post Entries template hooks are best highlighted on the single post template:

1. Entry Header
2. Entry Content
3. Entry Footer
4. After Entry Footer

Comments Template Hooks

Template hooks for comments are by default located inside the “After Entry Footer” hook highlighted above. There hooks are usually displayed in the single post template:

1. Before Comments List
2. Comments
3. After Comments List
4. After Comments

Template Editor for Post Formats

Since post formats are a special case that showcase content based on their format rather than the current template, their hooks can be edited from a different template editor designed specifically for post formats.

The template editor for post formats can be found under “Appearance > Theme Options > Post Formats”. Under “Select Post Format to Edit” you can find all post formats and their corresponding teasers. Any post that does not display as a leading post in the Grid Loop is called a teaser and content is rendered differently for such entries; for example they usually display the excerpt instead of content and show the post meta at the bottom.

Changed made in the post formats template editor only take effect on archive pages, not single posts. Since post formats are rendered inside The Loop, only the Entry Template Hooks are available for editing.

The Page Builder

You can customize the template for every individual post. This includes the default WordPress post type, pages, attachments and any registered custom post type. Any changes made inside the Page Builder override the settings in the Template Editor and are unique to that specific post. This is particularly useful when showcasing unique content in custom landing pages. For example you can remove the site navigation or post meta to avoid distracting the visitor’s attention. In combination with the Unlimited Sidebars feature this allows advanced customization of any page, an example being the theme’s demo front page.

When editing a post, in the central column below the text editor you can find a meta box titled “Page Builder”. When the “Use default template hooks for post” option is checked the settings from the Template Editor for that post type will be used instead. To be able to edit the template’s hooks, first uncheck that box:

After the Page Builder has been activated, all hooks available for that post type template will appear and become editable:

Conclusion

We did it! A drag-and-drop template builder was a long-time goal for our themes. One of our users’ most common requests was the ability to edit templates without touching code and without losing changes on updates. Now we’ve been finally able to offer you this level of customization and flexibility.

Please leave us a comment letting us know how the template builder has helped you customize your website and any other feedback you may have regarding this feature. Don’t forget to read our other tutorials that cover Enlightenment Theme’s documentation to get the most out of this theme.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Widget Settings Panel

Custom Query Types

Custom queries can be displayed as either a list, slider, gallery or carousel. In the following we will explain how each of these options behaves:

List Queries

List queries display as a traditional list of posts, with thumbnail, title and post meta. They can have a selected number of leading posts that will display with larger post thumbnail and excerpt. Post type archives and taxonomies can show a link to the full archive of posts.

Below is a preview of the Custom Query Widget showing a list of sticky posts with one leading entry:

Gallery Queries

Gallery queries display as a of images or posts thumbnails. This query type’s integration with the grid system differs slightly from list posts in that leading posts will span the entire width of a column while the rest of posts will stack inside columns as 75×75 pixels thumbnails.

Here is an example of an image gallery displaying in 2 columns with one leading entry:

Slider Queries

When this type is selected, the widget integrates with the Flexslider script to display the query as a slider. The posts’ thumbnails will be used as background. Posts will show the title as caption and pages will have their content overlaid on the image.

The slider in the theme demo’s front page is an example of the custom query widget’s slider option displaying multiple pages in the “Full Screen” sidebar:

Carousel Queries

The “Carousel” query type also integrates with the Flexslider script and displays the selected query of posts in a carousel whose visible elements is currently fixed to 6 but in the future we plan to make them correspond to the number of columns selected in the “Grid” option.

Here’s an example of a carousel from the theme demo displaying images:

Breakdown of possible Custom Queries

The widget allows you to select from multiple possible internal queries to display. Below we will describe each available option in detail:

Sticky Posts

This option displays all posts that have been marked as sticky. A detailed explanation how sticky posts are managed is available at the WordPress Codex.

Sticky posts don’t have an option to limit their number, all posts marked as sticky being displayed but you can select a number of leading entries. This query is particularly useful when you want to showcase posts outside the traditional chronological order.

Post Type Archive

Single Post Type and Single Page

These 2 options allow you to display a single post from a selected post type or a single page. The major difference with this option is that the post or page’s content will be displayed instead of the title and excerpt.

If the post or page has a featured image, it will be used as background image and the content will be overlaid on the image.

Multiple Pages

This options allows you to query multiple pages and display their content. You can select any pages from the list, regardless of their chronological order.

This option is particularly useful when you want to display content in multiple columns or create a slider with dynamic content. The theme demo’s front page slider is an example of a slider displaying the content of multiple pages.

Image Gallery

The “Image Gallery” option is limited to images from the Media Library. The button “Choose Images” will open the Media Library. To select multiple images hold down the Cmd key on Mac or Ctrl key or Windows and click on each image. This option is best used with the “Gallery” query type.

Author Archive and Taxonomy

These 2 options allow you to display posts belonging to a particular author or are inside a specific taxonomy. You can select from the WordPress default “Category” and “Tag” taxonomies or any registered custom taxonomy.

Conclusion

The Custom Query Widget is an advanced tool for showcasing multiple types of content. Please let us know how it has helped you customize your pages and of any other feedback in the comments section. Don’t forget to read our other tutorials from Enlightenment Theme’s documentation to get the most out of this theme.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Our focus with Enlightenment Theme was the ability to add arbitrary content in almost any location of a page. One of the most popular ways to add content to pages is through widgets inside sidebars. WordPress’ Template Hierarchy allows the inclusion of any number of sidebar in a template a feature we wanted to take maximum advantage of, so we designed the templates’ layout that it includes widget areas before and after almost any piece of content.

While this level of flexibility allows for advanced customizations of a page’s content, naturally not every page requires the use of all available sidebars, nor will their content be relevant to all pages from your website. For that reason we have both created the possibility to dynamically assign widget areas to templates and also to choose what sidebars are used by any template.

Breakdown of the Theme’s Sidebar Locations

The difference between widget areas and sidebar locations might be a bit confusing at first because we’re deviating a bit from WordPress’ traditional way of dynamically handling widgets but not sidebars. In general words you can consider sidebar locations as predefined fixed sections on your page and widget areas as dynamically created containers of widgets that can be assigned to that fixed section.

The WordPress traditional way is to dynamically assign widgets to static sidebars. Our way is assign widgets to virtual sidebars that can be assigned to the static locations inside the template.

To make it more straightforward below is a color-coded visual breakdown of the static locations inside a template that can hold dynamically created widget areas:

1. Primary Sidebar
2. Secondary Sidebar
3. Navbar Sidebar
4. Full Screen Sidebar
5. Header Sidebar
6. Header Secondary Sidebar
7. Main Sidebar
8. Main Secondary Sidebar
9. Content Sidebar
10. Content Secondary Sidebar
11. After Content Sidebar
12. After Content Secondary Sidebar
13. After Main Sidebar
14. After Main Secondary Sidebar
15. Footer Sidebar
16. Footer Secondary Sidebar

The lighter shade represents the sidebar’s boundaries and the darker shade the inner widgets. The number of columns the widgets are displayed in is for demonstration purposes and the actual number can be selected in the Sidebar Editor in Theme Options.

Special Case Scenario Sidebars

The Navbar Sidebar

The Navbar Sidebar has been designed to fit in the limited space available inside the Navbar. This sidebar does not integrate with the Grid System and widgets are displayed in a single row, floated to the left.

The limited space is intended to fit small linear content like contact information, search forms, login buttons, shopping carts or social media icons. Any other widgets would probably look distorted.

The Full Screen Sidebar

The Full Screen Sidebar spans the entire width of the viewport and widgets are not wrapped in a container. This sidebar has been designed to hold the “Custom Query Widget” displaying either a slider, carousel or single page.

Inside the Custom Query Widget the displayed posts featured image will be used as the background and the post’s content will automatically wrap inside a container. This behavior is not inherited by any other widgets which would probably look distorted in that space.

Conclusion

Widgets are one of the earliest and most popular way to display related content inside your website’s pages and WordPress has a very friendly and intuitive drag-and-drop interface to manage widgets. We have tried to take the most advantage out of this native feature to allow you to perform advanced customizations to your website.

Please let us know in the comments how you find our implementation of widgetizing the theme and remember to read our other tutorials that cover Enlightenment Theme’s documentation.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

The unlimited sidebars feature is useful when you want to customize different pages on your website to show widgets directly related to the content displayed on that page rather than general widgets relating to all your website’s content.

The settings for unlimited sidebars is found under “Appearance > Theme Options > Sidebars”:

By default the theme creates 3 widget areas assigned to the Primary, Secondary and Navbar sidebars for all templates, all other sidebars remaining unused.

Creating New Widget Areas

New widget areas can be created from the “Add Dynamic Sidebar” option at the top of the page. Every widget area is associated with a unique name that you need to enter. This feature also integrates with the theme’s grid system so you may choose to display widgets in this sidebar to display in multiple columns:

All manually created sidebars will appear in the options page and can be edited or deleted at any time. When a sidebar is deleted all its assigned widgets will be lost:

The theme’s default sidebars can not be edited or deleted but can be unassigned from Sidebar Locations.

Assigning Widget Area to Sidebar Locations

Newly created widget areas will appear in the sidebars list under “Appearance > Widgets” and you will be able to add widgets to them but to make them appear on the front-end you will have to assign them a location. The theme contains several fixed locations for widget areas that are listed under “Sidebar Locations”. A detailed breakdown of the theme’s sidebar structure is covered in a separate article. Widget areas can be dynamically assigned to these locations for any template.

You can select the template where you want to add the widget area under “Select Template to Edit”:

After the template has been selected you can assign widget areas to any of the predefined locations:

After the settings have been saved you can start adding widgets to your manually created sidebars:

These widgets will appear in the selected template in the assigned sidebar location. In our example above, widgets added to “My New Sidebar” will appear in the “Blog” template in the “Header” sidebar in 3 columns:

Overriding Sidebar Locations for individual Posts

In addition to dynamically customize widget areas for each template, you can override these settings for each individual post, including pages, attachments and any other custom post types. This is particularly useful when creating landing pages and you want to display content specifically related to that page no content in the sidebars at all.

When editing the post, in the central column under the post editor you can find a meta box titled “Sidebars”. The option “Use default sidebar locations for page” disables any overriding and uses the locations defined in “Theme Options” for that particular post type. To enable overriding first uncheck this option:

A list of all available sidebar locations will collapse. If the sidebars for this post have never been overridden, the settings from “Theme Options” are imported and you can assign the sidebars you want to display for this post:

The options selected in a post’s meta box will only be applied to that specific post:

In the example above, the “My New Sidebar” widget area has been assigned to the “Footer Secondary” sidebar location.

Conclusion

To be able to select what sidebars appear appear and where is surely helpful when creating personalized reading experiences like landing pages or author profiles. Please let us know in the comments sections how you find our implementation of unlimited sidebars and what improvements we could bring to the process. Don’t forget to read our other tutorials from Enlightenment Theme’s documentation.

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

The options for customizing the Grid Loop can be found under “Appearance > Theme Options > Grid Loop”. Here’s a preview of the options page:

From the option “Select Template to Edit” you can choose the archive you wish to display in a custom grid. The default “Blog” archive can be customized as well as Categories, Tags, Author pages and Search Results. Any custom post types and taxonomies will also appear in this list and additionally you can customize the grid of post formats archives:

The option “Select Grid” displays the available choices for grid columns. The first option resembles “One Column” and actually disables the grid loop, instead displaying posts in the traditional blog format. When the grid is activated posts can be displayed in either Two Columns, Three Columns or Four Columns.

Depending on the selected layout, a sidebar may also appear besides the content. For consistency reasons, when the content is selected to display in three or more columns the layout is overridden to full-width, regardless of the setting in theme options, to avoid cramped post tiles.

Each grid option can be previewed at the theme’s demo:

• Traditional Blog with Grid disabled
• Blog with 2 Columns Grid
• Blog with 3 Columns Grid
• Blog with 4 Columns Grid

Selecting Leading Posts

If you are displaying post archives in a grid, posts will display as tiles with featured media and a short excerpt of content. You have the option to display a selected number of posts as full posts from the “Lead Posts” option:

The “Lead Posts” option can be from zero (no leading posts) to the maximum “Posts per Page” setting you have set under Settings > Reading. Leading posts will display full-width with content instead of excerpt:

Overriding the Grid Loop option for all Archives

Under the “Select Template to Edit” option, if you select the “All” option you will be able to override the grid setting for every archive:

You won’t see any visual feedback when updating this setting, the grid selections for this case always remaining blank. Instead the setting for each archive will be updated.

Conclusion

Masonry grids are a great way to showcase any type of media. Wether it be images, galleries or videos they will all magically fit the tile’s content area. We have first experimented with this style in our Pinboard Theme and have tried to perfect it in our integration into Enlightenment Framework. Please let us know in the comments how you find our integration of blog archives with the masonry grid system and remember to read our other tutorials that cover Enlightenment Theme’s documentation.