Tag: PHP

Embedded Posts Loading Fix

After updating the various wordpress sites I maintain to WordPress 5.7 I began to notice embedded posts not loading.

After a few tests I realized that sometimes the embedded posts would load (which I found by opening 4-5 new tabs of the same post) just not consistantly.

This lead me to assume that this was some sort of problem with the new “Lazy Loading” feature added in a recent update.

Thus I applied a quick fix which disabled Lazy Loading by default.

/**
 * Disables lazy loading (Done to fix embedded posts not loading consistantly).
 */ 
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

After adding this code to function.php I had no more problems (although the sites load noticably slower).

Filed under: WordPressTagged with: , ,

Co-Author Support & Customization

A compilation of embedded posts containing information on how I went about adding support for Co-Authors Plus.

This allowed for multiple authors to work on the same posts/pages and have their names added to a list of links to author archives automatically displayed below their work (which now display every post or page they have authored or co-authored).

Filed under: WordPressTagged with: , , ,

Adding Author Box To Archive

The final piece of my co-authors archive template is the creation of an author box.

This contains the authors picture, name and description in a stylised box.

Here is the code to add to your “author.php” template:

add_action( 'beans_before_loop', 'beans_child_view_add_description');

function beans_child_view_add_description() {
?>
<?php
	$curauth = (get_query_var('author_name')) ? add_action( 'beans_before_loop', 'beans_child_view_add_description');
function beans_child_view_add_description() {
?>
<?php
	$curauth = (get_query_var('author_name')) ? get_user_by('slug', get_query_var('author_name')) :
	get_userdata(get_query_var('author'));?>

<div class="uk-container uk-container-center">
	<div class="postauthor-wrap">
		<div class="uk-grid">
			<div class="uk-width-1-6">
				<span itemscope itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>">
					<?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?>
				</span>
			</div>
			<div class="uk-width-5-6">
				<h5 class="vcard author" itemprop="url" rel="author">
					<span class="author-about">
						About <?php echo get_the_author_meta('first_name'); ?>
					</span>
				</h5>
				<?php the_author_meta('description') ?>
			</div>
		</div>
	</div>
</div>
<?php
}

-And here is the custom css to style it like the image above:

.postauthor-wrap {
	background-color:#f6f6f6!important;
}

.postauthor-wrap .uk-width-5-6 {
	padding-left:0px;
}

.postauthor-wrap .uk-width-1-6 {
	padding-left:50px;
	
}
.postauthor-wrap .uk-width-1-6 img {
	border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

Filed under: WordPressTagged with: , , ,

Author & Co-Author Links on Posts/Pages

After altering the “author.php” template to list any pages/posts authored or co-authored by an author the next step is to make links to these archives available everywhere on your website.

First create the “post_authors_post_links” shortcode to return the names of co-authors linked to their archive pages.

/**
 * Shortcode for getting coauthors.
 */
add_shortcode( 'post_authors_posts_links', 'post_authors_posts_links_shortcode' );
/**
 * Shortcode for getting coauthors.
 */
function post_authors_posts_links_shortcode(  ) {
	return coauthors_posts_links();
}

Then create the “post_date” shortcode to get the date the posts/page was posted.

function shortcode_post_published_date(){
 return get_the_date();
}
add_shortcode( 'post_date', 'shortcode_post_published_date' );

Next enable shortcode to function within widgets

add_filter( 'widget_text', 'shortcode_unautop');
add_filter( 'widget_text', 'do_shortcode');

After which you create the “authors” widget.

add_action( 'widgets_init', 'authors_widgets_init' );

function authors_widgets_init() {
    beans_register_widget_area( array(
        'name' => 'Authors',
        'id' => 'authors',
        'description' => 'Widgets in this area will be shown after posts and pages for the purpose of listing the co-authors and date of publishing.',
        'beans_type' => 'grid'
    ) );
}

Then you add the “beans_content_after_markup” action to display the “authors” widget after all beans content.

add_action( 'beans_content_after_markup', 'authors_widget_area' );

function authors_widget_area() {
 echo beans_widget_area( 'authors' );
}

Finally simply add this Custom HTML to the “Authors” widget:

[post_date] [post_authors_posts_links]

Unfortunately Co-Authors Plus seemingly causes a double/repeat of the “coauthors_posts_links” shortcode results to show up above whatever content it is placed below/after.

This means you might get the same list of co-authors on both the top and bottom of the page.

I solved this problem with the brutally simply solution of hiding everything and then just showing what I wanted to be shown.

This was done by adding the following CSS code to my style.

/**
 * Hides everything in beans_main (part 1 of hiding duplicate names caused by use of coauthors).
 */
body > div.tm-site > main > div > div > div {
	visibility: collapse;
}

/**
 * Un-hides only the actual content within beans_main (part 2 of hiding duplicate names caused by use of coauthors).
 */
#beans-content {
	visibility: visible!important;
}

/**
 * Un-hides and styles the text widget containing a the coauthors of a page/post (part 3 of hiding duplicate names caused by use of coauthors).
 */
body > div.tm-site > main > div > div > div:nth-child(1) .textwidget {
	display:inline!important;
	visibility:visible!important;
}

Filed under: WordPressTagged with: , , ,

Archive of All Posts and Pages Authored or Co-Authored

In order to show posts and pages while also supporting the use of co-authors plus simply add the following to the template “author.php”.

add_filter( 'beans_loop_query_args', function() {
	return array(
		'posts_per_page' => 10,
		'paged' => get_query_var( 'paged' ),
		'post_type' => array('post', 'page'),
		'author_name' => get_the_author_meta('user_nicename'),
		'orderby' => 'post_date'
	);
});

Filed under: WordPressTagged with: , ,

Embedded Posts: Forcing Square Images

Combining my solutions for cropping images into squares and customising embedded posts:

I altered the styles to crop images into squares.

/**
 * Customises the style/colours of embedded posts (David Stockdale).
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed the  custom styles (David Stockdale).
 */
function embed_styles() {
    echo <<<CSS
<style>
	.wp-embed-author {
		margin-top: 0.5em;
	}
	.wp-embed-author a {
		color: #a6191a;
	}
	.wp-embed-author a:hover {
		color: #454545;
 	}
 	.wp-embed-featured-image {
 		width: 150px!important;
		height: 150px!important;
		
 	}
	.wp-embed-featured-image > a > img {
 		width: 150px!important;
		object-fit: cover;
		height: 150px!important;
 	}
</style>
CSS;
}

I then copied “embed-content.php” from “/wp-includes/theme-compat/” to my child themes folder and edited it to force all featured images to be considered squares.

<?php
/**
 * Contains the post embed content template part
 *
 * When a post is embedded in an iframe, this file is used to create the content template part
 * output if the active theme does not include an embed-content.php template.
 *
 * @package WordPress
 * @subpackage Theme_Compat
 * @since 4.5.0
 */
?>
	<div <?php post_class( 'wp-embed' ); ?>>
		<?php
		$thumbnail_id = 0;

		if ( has_post_thumbnail() ) {
			$thumbnail_id = get_post_thumbnail_id();
		}

		if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
			$thumbnail_id = get_the_ID();
		}

		/**
		 * Filters the thumbnail image ID for use in the embed template.
		 *
		 * @since 4.9.0
		 *
		 * @param int $thumbnail_id Attachment ID.
		 */
		$thumbnail_id = apply_filters( 'embed_thumbnail_id', $thumbnail_id );

		if ( $thumbnail_id ) {
			$aspect_ratio = 1;
			$measurements = array( 1, 1 );
			$image_size   = 'full'; // Fallback.

			$meta = wp_get_attachment_metadata( $thumbnail_id );
			if ( ! empty( $meta['sizes'] ) ) {
				foreach ( $meta['sizes'] as $size => $data ) {
					if ( $data['height'] > 0 && $data['width'] / $data['height'] > $aspect_ratio ) {
						$aspect_ratio = $data['width'] / $data['height'];
						$measurements = array( $data['width'], $data['height'] );
						$image_size   = $size;
					}
				}
			}

			/**
			 * Filters the thumbnail image size for use in the embed template.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $image_size   Thumbnail image size.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );

			/**
			 * 
			 * !!!!!! CHANGED TO PREVENT RECTANGLES !!!!!!
			 * 
			 */
			$shape = 'square';

			/**
			 * Filters the thumbnail shape for use in the embed template.
			 *
			 * Rectangular images are shown above the title while square images
			 * are shown next to the content.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $shape        Thumbnail image shape. Either 'rectangular' or 'square'.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );
		}

		if ( $thumbnail_id && 'rectangular' === $shape ) :
			?>
			<div class="wp-embed-featured-image rectangular">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

		<p class="wp-embed-heading">
			<a href="<?php the_permalink(); ?>" target="_top">
				<?php the_title(); ?>
			</a>
		</p>

		<?php if ( $thumbnail_id && 'square' === $shape ) : ?>
			<div class="wp-embed-featured-image square">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

		<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

		<?php
		/**
		 * Prints additional content after the embed excerpt.
		 *
		 * @since 4.4.0
		 */
		do_action( 'embed_content' );
		?>

		<div class="wp-embed-footer">
			<?php the_embed_site_title(); ?>

			<div class="wp-embed-meta">
				<?php
				/**
				 * Prints additional meta content in the embed template.
				 *
				 * @since 4.4.0
				 */
				do_action( 'embed_content_meta' );
				?>
			</div>
		</div>
	</div>
<?php

Thus creating a more uniform look:

Filed under: WordPressTagged with: , , ,

Improved Custom Gutenberg Image Styles “Circled” and “Squared”

I fiddled around with my crops a bit more and created these improved versions.

Square

Small


/**
 * Adds custom Gutenberg Image Block Style "Squared (Small)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '9.5em';
	$inline_css = '.is-style-square-small img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-small',
		'label' => __('Squared (Small)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Medium

/**
 * Adds custom Gutenberg Image Block Style "Squared (Medium)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '15em';
	$inline_css = '.is-style-square-medium img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-medium',
		'label' => __('Squared (Medium)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Large

/**
 * Adds custom Gutenberg Image Block Style "Squared (Large)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '35em';
	$inline_css = '.is-style-square-large img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';}';
	register_block_style('core/image', [
		'name' => 'square-large',
		'label' => __('Squared (Large)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Small

/**
 * Adds custom Gutenberg Image Block Style "Circle (Small)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '9.5em';
	$inline_css = '.is-style-circle-small img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-small',
		'label' => __('Circled (Small)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Medium

/**
 * Adds custom Gutenberg Image Block Style "Circle (Medium)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '15em';
	$inline_css = '.is-style-circle-medium img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-medium',
		'label' => __('Circled (Medium)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Large

/**
 * Adds custom Gutenberg Image Block Style "Circle (Large)" (David Stockdale).
 */
add_action('init', function() {
	$height_and_width = '35em';
	$inline_css = '.is-style-circle-large img {
	object-fit: cover;
	width: '. $height_and_width . '; 
	height: ' . $height_and_width . ';
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle-large',
		'label' => __('Circled (Large)', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

This image has an empty alt attribute; its file name is test.jpg
This image has an empty alt attribute; its file name is test2.jpg
This image has an empty alt attribute; its file name is test3.jpg
Filed under: WordPressTagged with: ,

Adding Custom Gutenberg Image Styles “Circled” and “Squared”

After quite a bit of searching I found the easiest way to add custom Gutenberg styles.

This single action contains both the registration of the style and the CSS of the style itself.

Square

The best way to bring uniformity to columns of images.

/**
 * Adds custom Gutenberg Image Block Style "Square" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-square img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;}';
	register_block_style('core/image', [
		'name' => 'square',
		'label' => __('Squared', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Takes the edge off.

/**
 * Adds custom Gutenberg Image Block Style "Circle" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-circle img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle',
		'label' => __('Circled', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

I feel like Circle could be improved…

Filed under: WordPressTagged with: , , ,

Creating A Header Centred Between A Menu And A Widget

Shown above is the header I created within the Beans theme for the website of Tees Valley Arts.

The goal here was to mimic the old layout created for the Tees Valley Arts website using the Genesis theme using the Beans theme instead.

This required a widget area to the right of the site title for the use of the plugin “Simple social icons” (although I may later make an improved version that doesn’t require the plugin at all).

Functions

The code for setting everything to it’s proper place:


add_action( 'widgets_init', 'widget_areas' );
/**
 * Add widget area.
 */
function widget_areas() {

    beans_register_widget_area( array(
        'name' => 'Right',
        'id' => 'right',
		'description' => 'Widgets in this area will be shown on the right side
 of the site title (put simple social icons here).',
        'beans_type' => 'grid'
    ) );
}




/**
 * Display the header widget area at the end of the header.
 */
add_action( 'beans_site_branding_after_markup', 'header_widget_area' );
/**
 * Header widget area layout/style.
 */
function header_widget_area() {

 ?>
<?php echo beans_widget_area( 'right' ); ?>
<?php

}


/**
 * Moves Beans "Primary Menu" to the left side of the site title.
 */
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_prepend_markup' );


Style

The code for centring the site title between a stylised menu and a set of spaced out social icons:

/**
 * Sets up the layout of the header
 */

//social media icons
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
}

body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li { 
	display: inline;
	float:right;
	width:25px;
	height:25px;
	
	padding-left:30px!important;
} 


body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li a svg { 
	width:25px;
	height:25px;
} 

//site title
body > div.tm-site > header > div > div.tm-site-branding {
	display: inline;
}

body > div.tm-site > header.tm-header .uk-grid {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
	
	float:right;
}

body > div.tm-site > header.tm-header .uk-grid .uk-width-medium-1-1 {
	width:232.188px;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}

//primary menu
body > div.tm-site > header.tm-header .tm-primary-menu {
	margin-right:0px;
	margin-left:0px;
	
	float:left;
}


body > div.tm-site > header.tm-header .uk-container-center {
	padding-left:0px;
	padding-right:0px;
	
	margin-left:0px;
	margin-right:0px;
	
	max-width:100%;
}

body > div.tm-site > header.tm-header {
	margin-left:0px;
	margin-right:0px;
	
	text-align:center;
	
	padding-left:8%;
	padding-right:8%;
}

Widget

Then simply place the simple social icons plugin within the widget area.

Bear in mind that the plugins style settings will not function outside of a post/page but the style handles that.

Of course this solution doesn’t look good on mobile yet, so I’ll probably do another post on that when I’ve fixed it.

Filed under: WordPressTagged with: , ,

Getting Data From Google Sheet

Shown here is my Shortcode which aquires the value of a single cell of Google Sheet Data: 

/**
 * Aquiring google sheet data (David Stockdale)
 * Shortcode should be something like this: [get_sheet_value location="'Summary Page'!C3"]
 */
function sheet_value_shortcode($atts) {
    $API = 'XXX_XXX';
    $google_spreadsheet_ID = 'XXX-XXX-XXX';
    $api_key = esc_attr( $API);

    $location = $atts['location'];
    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";	
    $cell_response = $get_cell -> get( $cell_url);
    $json_body = json_decode($cell_response['body'],true);	
    $cell_value = $json_body['values'][0][0];
    return $cell_value;
}
add_shortcode('get_sheet_value', 'sheet_value_shortcode');

To get the API Key goto the “Google Developers Console” and create a key in the “Credentials” section.

To get the SpreadSheet ID simply look in the “Sharable Link” (broken down here):

https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=sheetId

Shortcode:

[get_sheet_value location="'Summary Page'!C3"]

Filed under: WordPressTagged with: , ,