I wanted to use one of the default blogging themes, so picked a simple one from WordPress themselves. This is Twenty Seventeen.

However a few changes were needed to get it working for posts with code in it.

The main single post width needed increasing. This does not help on the mobile media, but it helps a lot when viewing wide code snippets on a full size browser window.

Adding Various Plugins

Disable Comments

Comments got out of hand very quickly with 1000s of spam posts I would have to delete. This should be easier so perhaps this needs looking into again one day.

Limit Login Attempts

Just a sensible precaution.

Simple Author Box

This was a nice idea so the site can be used by two different authors, Theo and Mark. This is a nice plug in, but it has a bug in that the author displays on post listings when the post has been truncated by a More Block. To fix this the content is checked in PHP and only if it is the full posting with the author box be added.

function the_content_plus_author_on_pages($content='') {
    if (!( is_singular() && in_the_loop() && is_main_query() ))
		return $content;
	if( str_contains($_SERVER['REQUEST_URI'], 'wp-admin/post'))
		return $content;
	if ( 'post' == get_post_type() && (str_contains($content, "a class=\"more-link\"")))
			return $content;
	if ( function_exists( 'wpsabox_author_box' ) ) 
		return $content . wpsabox_author_box();
}
add_filter('the_content', 'the_content_plus_author_on_pages', 999);

The settings for the plug-in are:

Manually insert the Simple Author Box: On

Then add all the info and links in the Users settings of WordPress.

facebook.com/stonemonkeymark
instagram.com/stonemonkeymark
twitter.com/stonemonkeymark
linkedin.com/in/stonemonkeymark
twitch.tv/stonemonkeymark
open.spotify.com/user/stonemonkeymark
steamcommunity.com/id/stonemonkeymark
wa.me/447867554423
stackexchange.com/users/21375998/stonemonkeymark
youtube.com/@stonemonkeymark
flickr.com/stonemonkeymark

Enlighter – Customizable Syntax Highlighter

The settings for this are:

Appearance: Theme: Beyond
Appearance: Text overflow: Add scrollbar
Appearance: Line-numbering: Disable
Appearance: RAW-Code on doubleclick: Disable
Toolar: Visibility: Always hide the toolbar

This also requires additional CSS changes to make the font changes that are not possibel in the plug-in. See below.

Change Default More Block

The default text for the More Block shows up as “Continue Reading”, but the block is called More. This can be manually changed for each case but that would be tedious.

So I changed the default, so that they all match up: More Block, /More, More…

I could not find the place to change the editor text of — READ MORE —- to — MORE —

This code needs to go in the functions.php file. This is on the WordPress menu: Appearance -> Theme File Editor -> Theme Functions

function modify_read_more_link() {
    return '<a class="more-link" href="' . 
    esc_url( get_permalink( get_the_ID() ) ) .
    '">More...</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link', 999 );

Adding Support for Code in the Posts

Appearance -> Theme File Editor -> Stylesheet

These changes are needed in several places.

max-width: 1200px; /* was 1000px */
max-width: 940px;  /* was 740px */
max-width: 900px;  /* was 700px */

Media

Inconsolata.ttf. is installed by Enlighter – Customizable Syntax Highlighter. Inconsolata is needed to be able to use font-stretch.

Upload the two variable size font files, inconsolata.woff2 and inconsolata.ttf. These need to be in the uploads directory in their own inconsolata directory. I still have not found the real location of the ‘Additional CSS’ file on the server so the relative path is the best we can do until we know where it is so the font can be uploaded directly next to this CSS. There are version of Inconsolata out there that are not variable, these need to be avoided. The only font format I found that successfully converted from truetype and kept the variability was woff2.

Appearance -> Customise -> Additional CSS

Put this code in:

@font-face
{
	font-family: "Inconsolata";
	src: 
		url(../../wp-content/uploads/inconsolata/inconsolata.woff2) format('woff2'),
		url(../../wp-content/uploads/inconsolata/inconsolata.ttf) format('truetype');
}

@media (max-width:512px)
	{ /* Small screens */
	.enlighter-default {
		font-family: "Inconsolata", monospace;
		font-size: 60%;
		font-stretch: 60%;
		padding-left: 0px;
	}
}

@media (min-width:511px)
	{ /* Big screens */
	.enlighter-default {
		font-family: "Inconsolata", monospace;
		font-stretch: 80%;
		padding-left: 0px;
	}
}

Also add this to support better anchors. Soft scroll and with a margin at the top. Note usability section for those that don’t like smooth scrolling.

*[id] 
{
	scroll-margin-top: 30px;
}

html
{
	scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce)
{
	html
	{
		scroll-behavior: auto;
	}
}

Finally add in a change to the default full size media column so that the social media icons look OK.

.wrap {
max-width: 1100px;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 1100px;
}
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 1100px;
}

.wrap
{
    max-width: 1100px;
}

@media screen and (min-width: 48em)
{
    .wrap
    {
        max-width: 1100px;
    }
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary
{
    max-width: 1100px;
}

@media screen and (min-width: 30em)
{
    .page-one-column .panel-content .wrap
    {
        max-width: 1100px;
    }
}

Configuring WordPress