Building My “Boxed” Demo Site – Part 1

Boxed is one of a handful of WordPress websites that I’ve set up to demonstrate some of the different formats that can be achieved using my favourite WordPress theme, GeneratePress with its Premium modules.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page. I am happy to recommend GeneratePress and you can find out why it’s my favourite theme by reading my blog post “Flexible, Customisable WordPress Themes“.

The Boxed site demonstrates the following:

  • colours and fonts set using GeneratePress Premium’s customiser options
  • the “separate containers” layout
  • different backgrounds for the body and content areas of the site
  • blog posts with a masonry grid layout
  • a navigation menu on the side of the page.

The layout of the site is inspired by the “Sider” GeneratePress site which uses CSS code to move the navigation menu to the side. The easiest and quickest way for you to build this kind of website from scratch might be to install Sider as a starting point. However, for this exercise, I chose to use some of Sider’s code in my site’s additional CSS area, as I will describe later in this post.

  • This first article explains how I set up and customised the website and then added code copied from the “Sider” site to move the navigation menu.
  • Part two will be about using the FooGallery and Smart Slider 3 plugins to add galleries and a slideshow.

First Steps

My WordPress Website Checklist describes the process I use to set up a basic website, so I won’t repeat myself by going into details here. Following these steps resulted in a blank site, with the default GeneratePress style.

I added some pages called “Home”, “About” and “Blog” and then adjusted the settings so that the homepage would not consist of a list of blog posts, but would be the new page I had just created.

About Page with Photo

In order to include an image with text flowing around the side and bottom, I added an image block before the first paragraph of text, then left aligned the image.

Contact Page

I used the Caldera Forms plugin to create a new form, leaving most things set to their default values. I did make a couple of changes to the email settings in an attempt to maximise the chances of my messages being delivered, and not being flagged as spam:

  • I changed the “From email” to “noreply” @ my website name – even though this email address does not actually exist.
  • I set the “Reply to” email to be %email_address% which will pick up the email address input by the person sending the form
  • I added my personal email address as the “Email recipient”.

Under the Caldera general settings, I de-selected the “Form Styles” option. This will mean that the style of the form will be controlled by my theme, so for example, the form button will look like the buttons on the rest of my website.

Finally, I added the new form to a page called “Contact”.

Privacy Page

In the dashboard, choosing Settings>Privacy>Create New Page will create a page with suggested headings that should be customised with your own privacy policy information.

I enabled the GeneratePress Premium Copyright module and then, in the customiser, added a link to the new privacy page under Layout>Footer>Copyright.

Navigation Menu

I created a new menu under Dashboard>Appearance>Menus and added the Home, About, Contact and Blog pages. I assigned this menu to the display location “Primary Menu”.

I decided that I wanted my gallery pages to appear in the navigation menu under an overall heading of “Galleries” but I didn’t want that top level item to lead anywhere itself – just to open up the sub-menu when clicked. This could be achieved by adding a custom link to the menu, with a URL of # and Link Text of “Galleries”.

All the individual gallery pages were added to the menu and dragged into position, indented below the “Galleries” custom link.

I enabled GeneratePress Premium’s Menu Plus module and uploaded a navigation logo under Customiser>Layout>Primary Navigation>Navigation Logo.

This gave me a navigation menu across the top of the page, which is what I would usually want. In fact, unless you are really keen to have a side menu, then I’d suggest you keep things simple and don’t go to the trouble of moving it from its default position.

Moving the Navigation Menu to the Side

One of the things I wanted to try, for the sake of this exercise, was to copy the method used by the GeneratePress “Sider” site to move the navigation menu to the side. As I said earlier, if you like this layout, then you may find it easiest just to start by importing the Sider site. I wanted to see if it would be possible to use the code from Sider to move the menu of an existing website.

I copied and pasted the CSS code from Sider into the Additional CSS area of my Boxed website’s Customiser. I want to make it clear that I cannot take any credit for writing this code. I did make a little adaptation to remove the padding around the logo when it was in the side menu as I found it made the logo too small. Here is the code I used:

 /** Copied from the additional CSS of the GP Site "Sider" **/

 @media (min-width: 1000px) {
     body {
         padding: 0 50px 50px;
         margin-left: 260px;
     }

 /** make the logo larger by removing the padding around it (this line not from Sider CSS) **/

 .main-navigation .navigation-logo img {padding: 0px;
     margin-top: 24px;   
     margin-bottom: 24px;
 }
 .site-header {position: fixed; left: 0; top: 0; width: 260px; z-index: 300; height: 100%; 
 overflow: auto;  overflow-x: hidden;  
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease; }
.admin-bar .site-header {top: 32px; }
.site-header .main-navigation li {float: none; }
 }

 .inside-header {
     display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
 }
 .site-branding,
 .site-logo {
     order: 1;
 }
 .header-widget {
     order: 3;
 }
 .nav-float-right .inside-header .main-navigation {
     order: 2;
     float: none;
     margin-top: 30px;
     margin-bottom: 50px;
 }
 .nav-float-right .header-widget {
     float: none;
     top: auto;
     max-width: 100%;
 }
 .dropdown-click .site-header .main-navigation ul ul {
     position: relative;
 }
 .main-navigation.toggled .main-nav li {
     text-align: center !important;
 }
 @media (max-width: 768px) {
     .separate-containers .site-main {
         margin-top: 20px;
         margin-bottom: 0;
     }
 .post { margin-bottom: 20px; }
.inside-header { padding: 30px; } html:not(.mobile-menu-open)
.header-widget { display: none; }
.nav-float-right .inside-header .main-navigation {margin-top: 0; }
.nav-float-right .inside-header .main-navigation:not(.toggled) { margin-bottom: 0; }
 } 

 /* End GeneratePress Site CSS */

I’d chosen to have a right sidebar on my blog page but I found that, on screens below 1300px, trying to cram in a side menu on the left, plus blog posts, plus a sidebar on the right, just didn’t look right. I found some code in the GeneratePress support forum that I could use to make the right sidebar move to the bottom on these narrower screens.

/** move sidebars to bottom on medium sized screens **/

 @media (max-width: 1300px) {
     .content-area, .inside-footer-widgets>div, .sidebar {
         float: none;
         width: 100%;
         left: 0;
         right: 0;
     }
 }

Separate Container Layout and Site Background

Although I often choose the “One Container” layout, the default for GeneratePress is “Separate Containers”.

Activating the GeneratePress Premium Backgrounds module enables you to add backgrounds to various areas of a site. I used a seamless background from www.toptal.com/designers/subtlepatterns/ which I applied in the Background Images>Body section of the customiser. Backgrounds from this source are free to use, but you do need to add a comment in the CSS along the lines of “/* Background pattern from Toptal Subtle Patterns */”

Blog with Masonry Grid Layout

I had given my blog posts featured images as I added them and had also included “Read More” blocks.

I activated the GP Premium Blog Module to give myself options for displaying blog posts. In the Customiser, under Layout>Blog>Content>Archives I chose to show an excerpt and to display read more as a button.

Under Layout>Blog>Featured Images>Posts I chose not to display the featured image.

Under Layout>Blog> Featured Images >Archives I opted to display featured images in a location of “Above Title”.

I selected the option to display posts in columns, and input 2 as the number of columns, then ticked the box for “Display posts in masonry grid”.

As mentioned earlier, I’d decided to have a right sidebar on the blog page. This can be set in the customiser as Layout>Sidebars>Blog Sidebar Layout>Content/Sidebar. Widgets can be dragged into the various widget areas, either in the Dashboard or via the Customiser.

Typography

Activating the GP Premium Typography module enables any of the top 200 Google Fonts to be applied to numerous different areas of a website. I decided to use the Montserrat font throughout my Boxed website.

Colours

As I was building a photography portfolio website, I didn’t want to overshadow the images with lots of colour. I decided to add just a few little touches of a bluey green.

#5FA2B0
#5196A4
#407782

Unsurprisingly, there is a GP Premium colors module which enables colours to be altered in the customiser.

Code to Fine Tune the Appearance of the Site

As well as the CSS rules I talked about earlier, which determine the position of the navigation menu and sidebar, I added a few rules to the Additional CSS area of the customiser to tweak the appearance of certain other items. The effects of these are demonstrated on the Boxed website’s About page.

I gave buttons an outset border.

/** buttons **/

 button, a.button, .wp-block-button .wp-block-button__link, html input[type="button"], 
input[type="reset"], input[type="submit"] 
{ border: 3px outset #407782;  }

I added some colour to the horizontal rule line and to block quotes.

/** appearance of horizontal dividing lines  **/

 hr {border-bottom: solid 1px #5FA2B0;}

 /** add some colour to blockquotes **/

 blockquote {
     border-left: 5px solid rgba(180,212,218,0.4);}

I added a border to the search box that appears when the icon in the navigation menu is clicked.

/** search box **/

 input[type="search"] {border: solid 1px #5FA2B0;}

I changed bullet points to squares.

/** appearance of bullet points  **/

 ul li { list-style-type: square; }
 .widget ul li, .main-navigation ul ul li, .site-header .main-navigation li {list-style-type: none;}

Finally, I altered what happens when a text link, or an image link, is hovered over with a mouse.

/** links **/

 .inside-article p a:not(.read-more):hover { text-decoration: underline;}

 /** images that are links **/

 a:hover img {opacity: 0.8;}

As well as using the customiser to add the CSS code above, I decided to use the Code Snippets plugin to add some code to make the “Read More” button on the blog page take visitors to the top of the corresponding blog post, rather than skipping to the point after the excerpt they have already read.

add_filter( 'generate_more_jump','__return_false' );

This post has described how I set up and customised my new demo website using GeneratePress Premium. In my next post I will explain how I added the photo galleries and slideshow.

Leave a comment