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.
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);">
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.
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.
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
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 goodalt
text) instead of in a background image. You can achieve the same presentation asbackground-size: cover;
by usingobject-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):After
header.php
:And in
functions.php
: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
:Would become this:
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 onindex.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.