Clever use of the image color throughout the theme.

header.php

Curious on what's happening with the background-image: linear-gradient. Doesn't seem to have much impact, but I do think I see a slight different when I toggle it on and off. Also, it seems like the gradient you are setting is actually a solid color since you use the same rgba value twice. I could be missing something here, though.

Featured Images

<div class="topsection" style="background-image: url('<?php the_post_thumbnail_url( $full ); ?>');">
</div> <!-- topsection -->

Bear in mind that on some sites the featured images should be considered content, not merely decorative. In that case, you should render them in an img tag (with good alt text) instead of in a background image. You can achieve the same presentation as background-size: cover; by using object-fit: cover;.

Also, where is the $full variable coming from? I don't think it's being set anywhere, in which case it doesn't exist and shouldn't be put there.

Cleaning up your templates

RGB

Because of the RGB stuff you're doing, there's a lot of messy / repetitious code in your templates that makes them much harder to read and maintain.

Let's clean that up using header.php as an example. The same principles will apply for your other template files.

Before header.php (annotated):

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700|Crimson+Text" rel="stylesheet">
    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php
// we'll abstract the following into a function call that can be call from any template:
$img = imagecreatefromjpeg( get_the_post_thumbnail_url( $post_id, 'thumbnail_1x1' ) );
$rgb = imagecolorat($img, 0, 0);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
?>

<!-- we'll return a single RGB string from the function to clean up the following: -->
<header style="background-image: linear-gradient(0deg, rgba(<?php echo $r ?>, <?php echo $g ?>, <?php echo $b ?>, 1), rgba(<?php echo $r ?>, <?php echo $g ?>, <?php echo $b ?>, 1));">
    <div id="header-menu">
        <div id="logo">
            <?php echo '<a href="' . get_home_url() . '"><img></img></a>'; ?>
        </div>
        <div id="nav">
            <?php wp_nav_menu( array( "theme_location" => 'header-menu' ) ) ?>
        </div>
    </div>
</header>

<!-- this will also be cleaned up: -->
<div class="site-container" style="background-color: rgba(<?php echo $r ?>, <?php echo $g ?>, <?php echo $b ?>, 0.08);">

After header.php:

<?php
global $thumbnail_rgb;
$thumbnail_rgb = get_rgb_from_thumbnail();
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700|Crimson+Text" rel="stylesheet">
    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<header style="background-image: linear-gradient(0deg, rgba(<?php echo $thumbnail_rgb ?>, 1), rgba(<?php echo $thumbnail_rgb ?>, 1));">
    <div id="header-menu">
        <div id="logo">
            <?php echo '<a href="' . get_home_url() . '"><img></img></a>'; ?>
        </div>
        <div id="nav">
            <?php wp_nav_menu(array( "theme_location" => 'header-menu' )) ?>
        </div>
    </div>
</header>

<div class="site-container" style="background-color: rgba(<?php echo $thumbnail_rgb ?>, 0.08);">

And in functions.php:

function get_rgb_from_thumbnail()
{
    $img = imagecreatefromjpeg(get_the_post_thumbnail_url($post_id, 'thumbnail_1x1'));
    $rgb = imagecolorat($img, 0, 0);
    $r = ($rgb >> 16) & 0xFF;
    $g = ($rgb >> 8) & 0xFF;
    $b = $rgb & 0xFF;

    return "$r, $g, $b";
}

From here, you just need to properly set the variable as a global variable so that it's accessible in the footer, and you're good to go.

CSS variables

A further step approach that might work to make your templates even cleaner would be to put all your styles that use the extracted RGB value in a stylesheet as you normally would, and set the RGB value to a CSS variable (that is defined with a sensible default). Then, in your PHP, all you would have to do is echo a bit of CSS in your header that overrides the value of the variable.

If that worked, if would make a huge difference in how readable and maintainable your code is.

For example, this in footer.php:

<?php
global $thumbnail_rgb;
?>

    </div> <!-- main -->
</div> <!-- site container -->

<div id='site-footer' style="background-image: linear-gradient(0deg, rgba(<?php echo $thumbnail_rgb ?>, 1), rgba(<?php echo $thumbnail_rgb ?>, 1)); border-top: 1px solid rgb(<?php echo $thumbnail_rgb ?>);">
<p style="color: rgba(<?php echo $thumbnail_rgb ?>, 1);">Copyright &copy; &mdash; Derek Yale 2017</p>
</div>

<?php wp_footer(); ?>

</body>
</html> <!-- thanks! -->

Would become this:

<?php
global $thumbnail_rgb;
?>

    </div> <!-- main -->
</div> <!-- site container -->

<div id='site-footer'>
    <p>Copyright &copy; &mdash; Derek Yale 2017</p>
</div>

<?php wp_footer(); ?>

</body>
</html> <!-- thanks! -->

Featured image / posts nav

If your featured image and posts navigation bar are the same on every page/post (and they are so far as I can see), I would move them out of the individual templates and into the header.

Once you do that, you can drop single.php completely, and it will fall back on index.php.

Homework assignment

Another opportunity for cleanup - your posts nav bar. That code is super gnarly, but it's not uncommon to see code like that in themes (particularly from less experienced developers). Can you think of a couple of solutions of how you might clean that up further so that it's easier to read and edit? Post them here.

ipo-dyale / dereksitebuild

Template code #2