Category: WordPress

White Spaces Lingering When Quickly Scrolling

This is an unusual problem I have noticed with my site when I scroll up and down quickly on a long page.

I don’t know if this is just caused by loading a long page full of images, exerpts and code blocks (which are themselves scrollable).

Bit of a difficult thing to figure out when there are so many possible causes…

It only seems to happen when I scroll quickly/violently so I’d assume it was a loading issue.

But then the white spaces don’t linger on Edge so it might be a Chrome issue.

But then why doesn’t it happen on mobile?

I’ll probably post a question on a forum somewhere and put the solution here if I can find one.

Update:

Turns out the problem was rather simple, the html was white while the body was black.

Whenever the body failed to load quickly enough the white html background was revealed.

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: , , ,

Circle And Square Crop

Figured out a couple ways to crop images in a few ways without having to handle it at upload.

Circle

To crop an image into a circle:

img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}

Before

After

Square

To crop an image into a square:

img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;
}

Before

After

Now I just need to figure out how to register these as custom Gutenberg Block Styles…

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: , ,

To Add A New Plugin

If you are new to this like me use a boilerplate plugin as a starting point:

https://github.com/DevinVinson/WordPress-Plugin-Boilerplate

Then simply compress it (as a Zip file) and install it onto your website.

Make sure you have some FTP software to access your websites files when you inevitably mess up and crash your website and need to delete your broken plugin to make your website function again (I recommend Cyberduck).

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: , ,

Embed Customisation Supporting “Co-Authors Plus”: Final Solution

So a while ago while doing some volunteer work I fiddled around with making the website adding support for “Co-Authors Plus” in embedded posts as outlined in Embed Customisation Supporting “Co-Authors Plus”.

 I found that my solutions all looked rather messy.

I presented those initial attempts to my boss and after making a few changes based on his feedback this is what we eventually settled on.

/**
 * Removes the title (David Stockdale).
 */
add_filter('embed_site_title_html','__return_false');
/**
 * Adds the author's names (David Stockdale).
 */
add_action( 'embed_content', 'embed_author' );
/**
 * Adds the author div to the embed iframe (David Stockdale).
 */
function embed_author() {
	$output .= '<div class="wp-embed-author">By:';
	$coauthors = get_coauthors();
	$loopcheck = 0;
	foreach( $coauthors as $coauthor ): 
		/**
		 * Checking if it's the first line to decide if it should be seperated with a comma.
		 */
		if($loopcheck == 0) {
			$loopcheck++;
		} else {
			$output .= ',';
		}
		$output .= ' ';
		$authorArchiveLink = get_author_posts_url($coauthor->ID);
		$output .=  "<a href=$authorArchiveLink> $coauthor->user_firstname $coauthor->user_lastname</a>";
	endforeach;
	$output .= '.';
	$output .= '</div>';
    echo $output;
}

By removing the author portraits I was able to create a cleaner looking list.

I then styled it to fit the websites theme of links in a specific colour.

/**
 * Customises the style/colours of embedded posts.
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed the plugin's custom styles.
 */
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;
	}
</style>
CSS;
}

All in all a much neater look that is far more consistant with the website as a whole.

Filed under: WordPressTagged with: , ,

Adding “Excerpt” To Pages

Another day of volunteer work, another nugget of knowledge learned.

To enable post-like excerpts on your website go into the functions.php file of your theme (in theme editor) or a site-specific plugin (in plugin editor).

Add the following code at the end:

add_post_type_support( 'page', 'excerpt' );

This code modifies the default WordPress content type ‘page’ to add support for excerpts.

Filed under: WordPressTagged with: , ,

David Scroller Plugin

The final stage in making it as easy as possible to display a number contained by a cell within a Google Spreadsheet as a scrolling number: making a plugin.

This is only Version 1.0.0 of the plugin and it is definitely not documented properly (I used both WordPress-Plugin-Boilerplate as a starting point and it includes NumScroller as part of the plugin so I need to find the correct way to comment/document/credit these to meet industry standards) but it works!

All you need to do is update your API Keys and Spreadsheet IDs:

/**
 * Stores/updates the array of Api Keys within the options database table.
 */
update_option( 'api_key_array', array(1 => "XXX_XXX"), true );
/**
 * Stores/updates the array of SpreadSheet IDs within the options database table.
 */
update_option( 'spreadsheet_id_array', array(1 => "XXX-XXX-XXX",
											 2 =>"XXX-XXX"), true );

Plop down some shortcode:

[david_scroller location="'Summary Page'!L6" api_key=1 spreadsheet_id=2 delay=1 increment=100]

And Voila:

0
Filed under: WordPressTagged with: , , , , ,