Category: IT

No technical feature (i.e. coding) under the umbrella of tommygreenfield.com is particularly impressive-Not that I personally have implemented, anyway.* Mainly, because tommygreenfield.com has no function that requires technically impressive code. Still, now and then I feel like learning something new and applying it to the site, whether there’s a “functional” value-add or not.

{ WordPress is, of course, impressive.}

For instance, I considered a hypothetical scenario where I have multiple pages with the same header/footer. An implementation where the same div is copy-pasted one every page would be a foolish one; if I had to make a change, I would need to copy/paste the changes into each hypothetical file. Better would be if the header were it’s own resource and each page looked to the same single resource.

jquery’s .load() function affords this opportunity: Instead of plugging something like this into each page which needs a header…

<div class="inheader" id="name">Back to <a href="../index.html">TommyGreenfield.com</a></div>
<div class="inheader" id="email"><a href="mailto:tommyn.gre@gmail.com">tommyn.gre@gmail.com</a></div>

…We define that in its own html resource and plug this into each page which needs a header:

<script>
$(function loadhedr() {
$( "#header-reference" ).load( "header.html #header-source" );
});
</script>

In this case, needless to say (??), “#header-reference” refers to the div id for each page which needs a header; “header.html” is the new html resource; “#header-source” is the div id within header.html.

Then when we change the html resource we’re referencing, each page which references it will be “updated.”

Another use case: I can load a list of recent entries on this blog into a div on another page (e.g. tommygreenfield.com).

<script>
$(function getposts() {
$( "#posts-reference" ).load( "/blog/index.php #recent-posts-2 li" );
});
</script>

In this case, I just created an empty div on tommygreenfield.com called “#post1″ then load the li elements from the blog’s homepage (contained in #recent-posts-2”) into it. No need to perform any maintenance whatsoever Whenever I add a new post-tommygreenfield.com will always load from tommygreenfield.com/b (the blog).

The only downside to this approach is performance; it takes a moment to load. Another day I’ll see whether I can improve this further 🙂

Invented a new task for myself: Learn some wordpress customizations. Didn’t really know where to start, or what I wanted to do, so off I went to google. “Quick wordpress customizations,” things like that.

I found that many of the “quick wordpress customizations” google promoted-In their mysterious proprietary algorithms which, with facebook, account for 80% of traffic to news sites-Were just configurations exposed in the admin dashboard.

Not the kind of thing I was looking for. Not exciting. I needed something that would rustle the jimmies-In a good way.

So I honed my search and ultimately discovered: In order to do the sorts of things I probably want to do I should probably create a child theme. Luck of the draw (i.e. google), I landed on this site which I found helpful:

How To Create A Child Theme, And Why You Should Be Using One

Before I keep going I should mention: I host on Godaddy and use many of the management features they offer. (In some way or another, these instructions will reflect that. Sorry, no screenshots intended-Pain in the butt.)

But here’s a “gist” to supplement their ET’s tutorial. I needed to create a folder (name of child theme), and style.css page within it. Then send it to a zip, log into WP admin, then Appearance >> Theme >> Add New Theme >> Upload Theme.

You might do it wrong and see something like this. That’s OK, you’ll work it out.

Installing Theme from uploaded file: wp_childtheme.zip
Unpacking the package…
Installing the theme…
The package could not be installed. The theme is missing the style.css stylesheet.
Theme install failed.

In my case the theme install failed because my css file wasn’t named “style.css”; It must be called style.css. Fixed that, then:

Unpacking the package…
Installing the theme…
This theme requires a parent theme. Checking if it is installed…
The parent theme, Twenty Sixteen 1.1, is currently installed.
Theme installed successfully.

Then click Activate.

Another site that looked good:
https://codex.wordpress.org/Child_Themes

Next thing I wanted to do was add a favicon. These days WP lets you add one via the admin dashboard. I believe that’s a recent feature. I already mentioned I’m looking for customizations a little deeper than leveraging exposed configuration, so I continued to look for “old school” info. This website ultimately helped me out:

https://premium.wpmudev.org/blog/favicons-wordpress/

Not much to it. Just like adding a favicon to a normal website-Just need to know where to put it. Added favicon tags to <head> of header.php:
<link rel="shortcut icon" href="http://www.tommygreenfield.com/me.png" type="image/x-icon" />
<link rel="icon"" href="http://www.tommygreenfield.com/me.png” type="image/x-icon" />

Around this time I noticed my page is loading pretty slowly. I didn’t think it was my customizations because, lets face it, I have done very little. So my next thought was…“load fewer posts on main page?”

Found instructions here:
https://wordpress.org/support/topic/change-number-of-posts-on-main-page-from-10-to-5

What next, what next….

One thing I thought would be useful is at the top of each post saying/calculating something like…”The word count for this post is “x.” It takes an average reader “y” minutes to read “x” words.”

Checked to see if anyone else had done something like that and this site gave me a good head start:
http://www.thomashardy.me.uk/wordpress-word-count-function

Earlier I mentioned creating a style.css file inside the child theme directory of your site-I didn’t mention if you want to write custom functions, not just custom css, you’ll need to add a functions.php file to the same directory. Just like with the css, this way if you upgrade your template at some point, only the child’s parent theme will be upgraded; Your customizations will be preserved.

So with the head start I had (previous link) I got to work. Scanned a bunch of files in the WP directory until I found content-single.php. By trial and error, I added text here and there within the template to determine whether the best/easiest place to add my word count blurb is. Ultimately I decided on line 37 or 40, can’t remember, don’t want to look.

Then added the same thing, more or less, to content.php (content-single.php is the file you interact with when you’re viewing a single post; content.php is the file you interact with when you’re endlessly scrolling.

Here’s what I plugged into content- and content-single.php. (You can see it in green and white at the top of this post.)
<!--CUSTOMIZATION-->
This post contains
<?php word_count(1); ?> words,
which would take an average reader
<?php read_time(); ?> minutes to read.
</br>
</br>
<!--END CUSTOMIZATION-->

Then here’s the code behind it:
// word count
function word_count($method) {
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( strip_tags( $content ) );
if ($method==1) {
echo $word_count;
}
if ($method==2) {
return $word_count;
}
}
// read time
function read_time() {
$read_time = (word_count(2) / 200);
echo $read_time;
}

Pretty simple functions. Pretty cool no?