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.

This first article explains how I set up and customised the website. 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 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”.

I created some new individual gallery pages, added them to the menu and dragged them into position, indented below the “Galleries” custom link.

I uploaded a logo under Customiser>Site Identity and under Customiser>Layout>Header, I set the Header Width to “Contained”.

Under Customiser>Layout>Primary Navigation I chose Navigation Alignment left. I also set the Navigation Location to Float Right.

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”.

I 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

I added a few rules to the Additional CSS area of the customiser to tweak the appearance of certain 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-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.


More Tutorials

Leave a comment