Tag: Theme Editing

Get Country Name From IP

Today I had the idea of compiling an automatic list of how many spam comments I get from the same country.

After a bit of research I have begun by finding out how to get country names from an IP address.

This is the code I used:

/**
 * Adds Location Finder shortcode.
 */
add_shortcode('location_finder', 'location_finder_shortcode');
/**
 * Checks the country of the IP address.
 * 
 * ip: [location_finder ip="45.12.177.193"]
 * 
 */
function location_finder_shortcode($atts) {
	$result = "N/A";

	$ip_address = $atts['ip'];
	
	$geopluginURL = 'http://www.geoplugin.net/php.gp?ip=' . $ip_address;

	$geoip_response = unserialize( file_get_contents( $geopluginURL ) );

	if ( ! empty( $geoip_response ) ) {
		$result = $geoip_response['geoplugin_countryName'];
	}
	
	return $result;
}

This uses the GeoPlugin service (requires no sign up or actual plugin, the code above can simply be pasted into function.php).

Filed under: WordPressTagged with: , ,

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

Fixing Footer To Bottom Of Screen

After a long absence (caused by a month long battle with the Rona) I have returned with a few more minor programming trivia that I drafted months ago but never got around to publishing.

The following code affixes the Beans footer to the bottom of the window even when you scroll.

/**
 * Make footer fixed at bottom
 * of the screen.
 */
.tm-footer {
	position:fixed!important;
	bottom:0px;
	width:100%;
}

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

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: