Better Gallery Alignment in Twenty Seventeen

The new theme Twenty Seventeen shows the right thumbnail image in the default 3-column gallery with just a little space to its right,  which is particular noticable when you post a full width image directly above or below the gallery.

To have clear left and right lines in your site, add this CSS to your theme, either into style.css of a child theme, or into the ‘Appearance – Customize – Additonal CSS’:

/*aligning 3-column gallery*/

.gallery-item {
  margin-right: 4%;
  padding-right: 0;
  width: 48%;
}
.gallery-item:nth-child( 2n ) {
  margin-right: 0;
}
@media screen and (min-width: 30em) {
  .gallery-columns-3 .gallery-item {
    padding-right: 0;
    width: 31.5%;
    margin-right: 2.75%;
  }
  .gallery-columns-3 .gallery-item:nth-child( 3n ) {
    margin-right: 0;
  }
}

If you want to change the gallery to show one column only in narrow browsers such as mobile phones, change the CSS to this variation:

/*aligning 3-column gallery - variation*/

.gallery-item {
  padding-right: 0;
  width: 100%;
}
@media screen and (min-width: 22em) {
  .gallery-item {
    margin-right: 4%;
    padding-right: 0;
    width: 48%;
  }
  .gallery-item:nth-child( 2n ) {
    margin-right: 0;
  }
}
@media screen and (min-width: 30em) {
  .gallery-columns-3 .gallery-item {
    padding-right: 0;
    width: 31.5%;
    margin-right: 2.75%;
  }
  .gallery-columns-3 .gallery-item:nth-child( 3n ) {
    margin-right: 0;
  }
}

A Specialty Miniature Sofa for a Glove Puppeteer

Recently comissioned, custom designed, crafted and finished – a new miniature sofa with hidden features.

a puppeteer's miniature sofa with hidden features
a puppeteer’s miniature sofa with hidden features

The back of the settee is cut-out so that the arm of a puppeteer can easily fit through it.

cut-out at the back of the settee, shown in the wooden base structure
cut-out at the back of the settee, shown in the wooden base structure

The wooden structure is lined with upholstery foam and wadding and then covered in Dupioni silk.
Continue reading “A Specialty Miniature Sofa for a Glove Puppeteer”

Showing the Content of the ‘Posts Page’ before all Posts

If you have set a static front page, and defined a ‘posts page’, WordPress will use the index template to show the list of posts.
This also means that any content you might have entereed into the ‘posts page’ will not get shown.

Make sure to add any content before you set the page as the ‘posts page’; otherwise the editor will not be shown, and a warning message will be displayed instead.

To show this content of the ‘posts page’ before the list of posts, you can use following code (to be inserted into functions.php of a child theme, the html structure of the example below is based on Twenty Fourteen):

function page_content_on_posts_page() {
if( get_option( 'page_for_posts' ) && is_home() ) {
global $wp_query;
if( !is_paged() && $wp_query->current_post == 0 ) { ?>
<article id="post-<?php echo get_option( 'page_for_posts' ); ?>" class="<?php echo implode(  ', ', get_post_class( 'posts-page-content', get_option( 'page_for_posts' ) ) ); ?>">

<div class="entry-content">
<?php
echo apply_filters( 'the_content', get_post( get_option( 'page_for_posts' ) )->post_content );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php }
}
}

add_action( 'the_post', 'page_content_on_posts_page' );

 

 

Adding Widgets Between Posts in the Index Page

For a child theme of the (current) default theme Twenty Fifteen – a way to add a new sidebar aka widget area to show after the first post in the index page; making use of the action hook ‘the_post’.

/* WIDGET AREAS aka SIDEBARS INBETWEEN POSTS IN LOOP OF INDEX PAGE */

add_action( 'after_setup_theme', 'twentyfifteen_child_setup' );

function twentyfifteen_child_setup() {
add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );
add_action( 'the_post', 'twentyfifteen_child_inter_posts_sidebars' );
}

//register sidebar for inbetween posts

function twentyfifteen_child_widgets_init() {

	register_sidebar( array(
		'name' => __( 'First Inter-Posts Widget Area ', 'twentyfifteen' ),
		'id' => 'inter-posts-1',
		'description'   => __( 'Add widgets here to appear between post 1 and 2 in your index page.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget inter-post-widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

}

//widget output between posts in index page

function twentyfifteen_child_inter_posts_sidebars() {
	global $wp_query;
	if( is_home() && $wp_query->current_post == 1 ) {
		dynamic_sidebar( 'inter-posts-1' );
	}
	
}

you will need to create your own CSS based on the CSS class .inter-post-widget …

example:

.inter-post-widget { 
	margin: 20px 8.33%;
	padding: 3%;
	width: auto;
}