Little modifying here and there

Been making some minor changes to the current wordpress theme- Twenty Seventeen.  Learned more about creating child themes, adding stuff to the php files (mainly the functions.php), and modifying the theme’s CSS files.

I should go head and get something posted with some changes made already, its kind of a mixed bag–

Plugins

Not really to much going on here since I’ve been avoiding them whenever possible since they are kind of a cop out to possibly learning something useful with PHP, CSS, or maybe both.  Here’s the few helping with appearances–

  • Photonic Gallery for Flickr, Picasa, SmugMug, 500px, Zenfolio and Instagram
    Extends the native gallery shortcode to support Flickr, Picasa, SmugMug, 500px, Zenfolio and Instagram. JS libraries like Swipebox, Fancybox, Colorbox, PrettyPhoto, Image Lightbox, Lightcase and Lightgallery are supported. Photos are displayed in a grid of square or circular thumbnails, or a randomized set of tiles. The plugin also helps convert a regular WP gallery into a slideshow.
    • This one just makes it easier for me to add sideshows straight from shutterdragonphotos.com.  I’ll eventually come back around and get this feature added with a PHP function at some later point and just remove this plugin.  You can see this in action on this post:
      Checking in on Shutter Dragon Photos
  • Select Posts in Page
    Easily add one or more posts to any page using simple shortcodes. Supports categories, tags, custom post types, custom taxonomies, and more.
    • This one has been pretty useful, you may have already noticed how there’s one main page for all post entires and then a page for each categories.  Thats all due to this plugin running through and pulling those entires and adding them to each respective page based off of the added category.
  • Simple Share Buttons Adder
    A simple plugin that enables you to add share buttons to all of your posts and/or pages.
    • Cause I’m being lazy and not wanting to go through to add the PHP functions to add the sharing buttons to the various social platforms.  Much like the Photonic I’ll eventually come back around to work on implementing this from the functions.php and then remove the plugin.
  • SyntaxHighlighter Evolved
    Easily post syntax-highlighted code to your site without having to modify the code at all. Uses Alex Gorbatchev’s SyntaxHighlighter.
  • This one is kind of self explanatory, it helps add code syntax highlighting that makes it easier for you to read.

 

CSS

I’ve been having a pretty decent experience making any needed CSS changes through WordPress’s Customize > Additional CSS feature.  Here’s how its looking so far:
Warning if you chose to expend, its kind of lengthy…

/*Controlling the page's header image */
.single-featured-image-header img {
height: 250px;
object-fit: cover;
}

/* Controlling the twitter feed element */
.widget_text {
height: 400px;
overflow: scroll;
}

/* Adding widget space */
.widget{
margin-top: 20px;
}

/* Side widget stuff */
.fixed{
position:fixed;
top:0;
right:0;
overflow-y:scroll;
height:100%;
}

/* Header & Featured Image changes */
.single-featured-image-header{
}

/* Featured Image Changes */
.single-featured-image-header img{
width: 100%;

}

/* Attacking the empty space */
@media (min-width: 700px) {
.wrap {
max-width: 100%;
padding-left: 5em;
}
.has-sidebar #secondary {
width: 25%;
}
}

/* All of the page or post background changes */
/* First off the pages */
/* Landing page */
.page-id-2 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Landscapes/i-VF8rnN8/0/fa8c4379/X3/Sunset%20on%20Mt%20St%20Helens-X3.jpg');
background-size: cover;
background-attachment: fixed;
}

/* Main post page */
.hfeed .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Time-spent-around-South-Korea/i-bZW6mhW/0/93d4bcb2/X2/Overlooking%20AK%20Plaza-X2.jpg');
background-size: cover;
background-attachment: fixed;
}

/* Shutter Dragon Photos page */
.page-id-115 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Time-spent-around-South-Korea/i-MGXLvbr/0/49696770/X2/Seoul%20Tower%20overlooking%20downtown-X2.jpg');
background-size: cover;
background-attachment: fixed;
}

/* Some Tech page */
.page-id-33 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('https://photos.smugmug.com/Time-spent-around-South-Korea/i-QhR4Jbn/0/bef02b37/X2/You%20know%20you%20reached%20the%20Electronic%20Marketplace%20when-X2.jpg');
background-size: cover;
background-attachment: fixed;
}

/* WordPress Snippets */
.page-id-120 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Landscapes/i-tmtGDQ2/0/26f36f32/X3/Downtown%20Portland-X3.jpg');
background-size: cover;
background-attachment: fixed;
}

/* And now any of the posts */
/* Checking in on Shutter Dragon Photos */
.postid-84 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Me/i-ncwrnrc/0/98665b79/L/Checking%20out%20Shi%20Shi%20Beach-L.jpg');
background-size: cover;
background-attachment: fixed;
}

/* Photo walk by Clover Island Kennewick WA */
.postid-160 .site-content-contain {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://photos.smugmug.com/Landscapes/i-HbhCNg4/0/14eb9ce5/X3/Lighthouse%20Kennwick%20WA-X3.jpg');
background-size: cover;
background-attachment: fixed;
}

PHP

Not much going on for appearance related functions, I did have to make use of the enqueue option since I’m using a spinoff theme from the parent and that option is how you go about pulling the styling info from there. You may notice I’ve enqueue bootstrap, there are already some elements styled using bootstrap but this is geared more to future changes I plan on making.

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'bootstrap1',
        /* get_stylesheet_directory_uri() . '/style.css', */
		get_stylesheet_directory_uri() . '/css/bootstrap.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

function custom_stuff() {
	wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.js');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 'custom_stuff' );


?>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.