After several years of only having a landing page I decided it was now time to create a more professional website.
While there are many ways to create your website – there are hosting companies that provide easy website creation tools such as Wix or Squarespace, I decided to host my website with my hosting company GoDaddy using WordPress as the underlying framework.
I looked at that in the past and found that the Genesis framework provides an easy way to develop and design beautiful websites.
The Genesis framework was originally developed by Studiopress (now part of wpengine) and they provide many ready made templates to choose from.
I opted for the Essence pro theme which I subsequently adopted to my needs:
- I updated the hero image size on the front page (I thought it was just too big)
- I moved the primary navigation bar (the top menu) to the right of my logo
- I modified the blog page to show an avator of the author at the top of the page
In the following sections I will go into more detail how I achieved these changes and talk about the various challenges I faced. One thing I can already say now, there are many ways leading to Rome and pretty much everything I did could have been implemented in another, possibly simpler way. I think it is also important to remember that these modifications are aimed at the final website and not meant to be part of child theme with further modifications in mind.
The Hero Header
The Essence Pro theme comes with a Hero header or Hero section. This is comprised of a large image that aims to draw the reader in – normally by relating to the aim of your webpage but also contains text elements like a main slogan or/and a call to action. The image and the text elements are defined in the Admin UI (Appearance > Customize > Essence Pro Settings) and the Essence Pro installation guide provides ample information on how to do this. ;
The final size though is hard coded in the CSS. Since I wanted the Section to be a bit smaller so I amended the CSS accordingly.
.header-hero {
padding-bottom: 10vw;
overflow: hidden;
}
/* the size is defined through the page title height */
.hero-page-title {
padding: 10vw 180px 0 180px;
}
.hero-description {
margin: 28px auto 28px !important;
max-width: 600px;
} The Site header
The first step when amending the site header is to add some branding for your own company/site.
Logo
One of the most effective ways is to add your own logo to the site. In the case of the Essence pro child theme, this is easily achieved by adding a logo under Site identity under theme customization (> Appearance > Customize). But wait – the result might not look like what you would expect. The logo might show far to large. The suggested logo size is defined as 600px x 200px. This is far to big. There are two ways to easily adjust this:
1) just upload your logo with the correct size (something like 200px x 70px for instance). This will work for any logo smaller than 600px in width.
2) adjust the width of the title area element in the stylesheet. The advantage here is that the size of the logo is independent of the actual logo size (as long as the logo size is larger than the proposed width).
.title-area {
width: 200px
}
Navigation menu
The next step for me was to move the main navigation menu next to the logo. Looking at the CSS this can be achieved by removing the clear attribute from the actual naviation list and float it right.
.genesis-nav-menu{
.float: right;
}It also made sense to adjust the branding of the links by adding an orange bottom border, rather than the original white border. Since the orange color is defined as the main accent color in the UI, it makes sense to use a WordPress function to serve the CSS up as inline CSS referencing the current accent color (see section on Blog Page for details).
/* adjust the bottom border color to match the branding */
.nav-primary .genesis-nav-menu > .menu-item > a:focus,
.nav-primary .genesis-nav-menu > .menu-item > a:hover,
.nav-primary .genesis-nav-menu > .menu-item.current-menu-item > a {
border-bottom-color: #f7941d; /* orange color */
border-bottom-width: 2px
}Sticky Header
Finally I wanted to make sure that the site navigation is available at all times, even when you scroll down the page. This is a bit more involved as it requires some javascript to function properly.
- modify the CSS.
- adding a javascript file that adds or removes a header class, when the user scrolls the page
- add the javascript file to the wordpress script queue
The initial step is simply to add a position attribute of fixed to the site-header. The other attribute that should be added is a z-index with a high value. These two attributes will ensure that the site header will stay at the top of the browser window and is visible at all times.
.site-header {
position: fixed;
width: 100%;
z-index: 9999999;
}In many cases this might be all that is required. Here – with the Essence Pro theme some further modifications are necessary. Since the header is transparent, it is necessary to add a background once the user starts scrolling to make sure that everything looks correct. This can be achieved by adding an additional class to the site-header that modifies the look of the site-header as required. It is also possible to add some transformations to make the change look smoother.
.site-header.shrink {
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
background-color: #4b4b4b; /* dark grey color */
}Since the attributes of the shrink class shall only be applied once the user starts scrolling it needs to be done dynamically – this is were the javascript code comes in. It does exactly that. It also adds a top margin to the child element that follows to account for the header, that sits at the top of the page but has been removed from the normal element flow.
jQuery(function( $ ){
// Add 'shrink' class to site header on scrolling
$( document ).on('scroll', function(){
if ( $( document ).scrollTop() > 0 ){
$( '.site-header' ).addClass( 'shrink' );
} else {
$( '.site-header' ).removeClass( 'shrink' );
}
});
// Function to automatically add a top margin to the visible element below .site-header
function addTopMargin() {
var header_height = $( ".site-header" ).outerHeight();
console.log($(".site-header").next());
$( ".site-header" ).next().css( "margin-top", header_height + "px" );
}
// http://stackoverflow.com/a/1974797/778809
// Bind to the resize event of the window object
$(window).on("resize", function () {
addTopMargin();
// Invoke the resize event immediately
}).resize();
});PS
the javascript code depends on the jquery library, that is already bundled with WordPress.
Author avatar
A key element of every WordPress site are obviously the posts – well in this case I call them articles, as they are all about topics related to the work IDD Knowledge does for its clients.
From a branding perspective I believe it is therefore important to let people know who wrote the article, the topic it relates to and when it was published and updated.
As with many things a picture tells a thousand words – I decided to put an avatar of the author at the top of the article page like in the image.
In order to achieve this there are two steps again.
- add the avatar to the article (blog post)
- style it accordingly with CSS
The easiest way to add the avatar to the code is to use one of the many hooks that are provided by the Genesis framework. Since the avatar is at the top of the post the most obvious hook is the entry header.
// add the avatar to the top of a individual blog post
add_action('genesis_entry_header', 'ptorWP_add_avatar_top');
function ptorWP_add_avatar_top(){
if ( is_single() ) {
echo '<div class="entry-avatar">';
echo get_avatar( get_the_author_meta( 'user_email' ), 110 );
echo '<p>~ ';
echo get_the_author_meta( 'description');
echo ' ~</p>';
echo '</div>';
}
};
```
> Note
In order to show a proper picture rather than just a placeholder the author of the post needs to register their avatar with gravatar.com.
Once the avatar has been added to the blog you position it using CSS. The original layout has a horizontal orange line instead of the avatar. This is removed by setting the content of the before pseudo-element to nothing.
``` CSS
/* update the top of a single blog post */
.single .site-inner::before {
content: none;
}
.single .entry-avatar {
margin-bottom: 40px;
font-size: 16px;
text-align: center;
}
.single .entry-avatar .avatar {
background-color: #fff;
float: none;
margin-bottom: -10px;
margin-top: -60px;
padding: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 9999
}Blog Page (Articles)
Lastly I also modified the two column layout for the Blog page (Remember I call it Articles on my page)
The two column layout is controlled by the `half-width-entry`class on the HTML body tag. By removing this class we move from the two column setup to a full width setup. This can be achieve by adding a filter on the body_class, removing this specific class from the blog page. (note that the blog page can be identified by the `is_home()` function in WordPress.
// change to full width column blog page
add_filter('body_class', 'remove_half_width_entry_from_post');
function remove_half_width_entry_from_post($classes){
// check that the page is the blog page or an archive page
if (is_home() || is_archive() || is_page('new-blog') ){
// check the classes array contains the half-width-entry class
if(in_array('half-width-entries', $classes)) {
// remove the half-width-entry class
unset ($classes[array_search('half-width-entries', $classes)]);
}
return $classes;
} else {
return $classes;
}
};
Once you have the single column layout you need to adjust the styling somewhat to ensure a consistent look across all pages. Here, that means to add the vertical divider at the top of the main content area and ensure a white background as well.
This just requires some additional CSS.
/* specific settings for blog and archive page */
/* add white background color and shadow to main content area (site-inner) */
.archive .site-inner,
.blog .site-inner {
background-color: #fff;
box-shadow: 0 25px 40px 0 rgba(0, 0, 0, 0.05);
}
/* add the vertical divider to the top using the before pseudo element */
.archive:not(.author) .site-inner::before,
.blog .site-inner::before {
background-color: #a86500;
content: "";
display: block;
height: 100px;
margin: 0 auto;
position: relative;
top: -50px;
width: 2px;
z-index: 9;
}Since the divider has the accent color and should be defined by the accent color chosen in the wordpress customizer area we also need to add a function that adds some additional inline CSS that overwrites the fall back color shown above referencing the accent color.
// note this code is part of a larger function that enqueues several styles and scipts which have been omitted her
add_action( 'wp_enqueue_scripts', 'pt_enqueue_custom_scripts',98);
pt_enqueue_custom_scripts() {
// add a custom style sheet for modifications
wp_enqueue_style(
genesis_get_theme_handle() . '-custom',
get_stylesheet_directory_uri() . '/custom.css',
false,
genesis_get_theme_version()
);
// add color styling from settings to custom css
$color_link = get_theme_mod( 'essence_link_color', essence_customizer_get_default_link_color() );
$css .= ( essence_customizer_get_default_link_color() !== $color_link ) ? sprintf(
'
/* use accent color defined during theme customization for vertical divider on blog and
archive pages */
.single .site-inner::before,
.archive:not(.author) .site-inner::before,
.blog .site-inner::before {
background-color: %1$s;
color: %2$s;
}
/* use accent color defined during theme customization for navigation border */
.nav-primary .genesis-nav-menu > .menu-item > a:focus,
.nav-primary .genesis-nav-menu > .menu-item > a:hover,
.nav-primary .genesis-nav-menu > .menu-item.current-menu-item > a {
border-bottom-color: %1$s;
border-bottom-width: 2px
}
',
$color_link,
essence_color_contrast( $color_link )
) : '';
if ( $css ) {
wp_add_inline_style( genesis_get_theme_handle() . '-custom', $css );
}
}Final thoughts
For a consultancy company like IDD knowledge wordpress offers an execllent starting point for the development of a website. Paired with a framework like Genesis and the themes they offer the tasks becomes even easier. As with most commercial child themes a lot of the modifications that you might want are already available through the WordPress UI.
Having said that, there is still a great likelihood that you will have to dive deeper and modify the actual code. If you are not afraid of doing so this is the way to go.
Share Your Thoughts