Theme Customization

Overview
Ever since I decided to start up my own website (again) with the intent of having it for a long time I knew there were two key things I needed to do, besides the content itself. The first was to come up with my domain name and the second was to find a WordPress theme that I liked. I wanted the theme to contain some key features I was looking for as well to have a style that I liked. I spent time over the past month or so looking at themes and testing some I thought I might like before finally settling on Revera as a solid start to what I was looking for.

Foundation
Revera is a free premium WordPress theme that contains many features that I was looking for. This includes being a responsive WordPress theme utilizing the Bootstrap 3 framework, custom menu, portfolio page template, and blog (which might not be so much a feature as ‘just is’). One feature it has that I am still uncertain as to how much I am going to like is featured images for your posts. I do like how they display prominently on the homepage to advertise new blog posts and display for portfolio elements; however, since I am not using it for photography there may be cases when an image in my post does not make sense, or that it should not be featured. I intend to utilize the portfolio section to showcase applications once a stable release is completed.

Customization
Since I discovered a theme that had a solid foundation for me to build off I progressed into performing some customizations to brand the theme for me and gain some additional functionality.

The first customization I performed was to ‘mini-brand’ my site by changing the colors to what I wanted, which was a darker shade of green as it is my favorite color. In order to do this I modified theme.css by changing the appropriate hex codes to the appropriate hex code for the shade of green I required.  Below the left hand side represents the hex code for the default color and the right hand side represents my color choice.  I also modified the color for the arrows on the homepage to match by modifying bg_direction_nav.png using MS Paint.

ed564b -> 339614
f96b61 -> 5eb42d
f4473a -> 308715
-> ff0000 (inColor)

Above, inColor, is a special addition I made as I wanted to use links on the homepage feature section which has a background color the same as the default link color.  In order to obtain this I added a child class for links called inColor:

a.inColor {
	color: #ff0000;

}
a.inColor:visited {
	color: #ff0000;
}
a.inColor:hover,
a.inColor:focus,
a.inColor:active {
	color:#000;
	text-decoration: none;
}

I am not sure if I am going to stick with the red link color or not as  I plan to get some opinions on the look of red on green.  I at least have the CSS styles in place for if I want to change that color or have a different color for visited links.

Lastly I needed to add templates for full width pages, one with and one without a comment section.  In both cases I also did not want the page title to duplicate. I accomplished this by modifying the page template, page.php, and creating two new template files full-page-no-comments.php and full-page-with-comments.php.  The key here was stripping out the sections I did not need and in order to remove the title I had to modify the get_template_part function call to point to my new content template, which I called content-pageNoTitle.php.  The naming is important as you can see the parallel between the parameters passed and the file name (left and right side of the hyphen).  The function call becomes:

<?php get_template_part( 'content', 'pageNoTitle' ); ?>

You also need to add comments within php tags at the top in order for the file to be recognized as a template file when you upload it to the appropriate theme directory as follows:

<?php
/*
Template Name: Full Page No Comments
*/
?>

Lastly I modified the contents of content-page.php by stripping out the header section and saving as content-pageNoTitle.php, accessed by the aforementioned function call, so it becomes:

<?php
/**
 * The template used for displaying page content in page.php with no title.
 *
 * @package web2feel
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="entry-content">
		<?php the_content(); ?>
		<?php
			wp_link_pages( array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->
	<?php edit_post_link( __( 'Edit', 'web2feel' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
</article><!-- #post-## -->

That’s it! Besides some basic text changes for various displays (i.e. blog section) that is all the code modifications and additions I made, to date, in order to get the theme to what I have envisioned for my virtual home.