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.
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.
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:
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:
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:
* The template used for displaying page content in page.php with no title.
* @package web2feel
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
'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.