Juniper.

The Human Made Pattern Library.

Back to main page.

WordPress Styles

These are styles for things that you get out of the box in WordPress. Some need a little work to get looking nice, but some just work.

Tag Cloud

Cupit Ex quo Hoc loco Vendibiliora Praeterea Nemo nostrum istius Expressa Quo modo autem optimum

WordPress Images & Captions

This is a left aligned caption
The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

This is a center aligned caption

WordPress Galleries

Cur tantas regiones barbarorum pedibus.
Ad populum.
Laboro autem non sine causa sequitur disserendi ratio.

Pagination

Default

This is the default, out of the box pagination for archive pages. Add the following code to your theme:

<div class="pagination">
 	<?php previous_posts_link( 'Previous Page' ); ?>
	<?php next_posts_link( 'Next Page' ); ?>
</div>

PageNavi Plugin Pagination

The pagenavi plugin is also supported. It is reccommended that you wrap the output in an element with the class Pagination like so:

<div class="pagination">
	<?php wp_pagenavi(); ?>
</div>

Multi-Page breaks

You can break long posts into multi-part posts with pagination links. Do this by adding <!--nextpage--> to the post content. You will need to have the following code in your single article template file.

<div class="pagination pagination--numbers">
	<?php
	wp_link_pages( array(
		'before' => '' . __( '<span class="pagination__label">Pages:</span>' ),
		'after'  => '',
	) );
	?>
</div>

In addition you need to add the following code to your theme.

<?php add_filter( 'wp_link_pages_link', function( $link, $i ) {
	global $page;
	if ( $i === $page ) {
		$link = '<span class="pagination__item pagination__item--current">' . $link . '</span>';
	}
	return $link;
}, 10, 2 );

Made by Humans