Upload to Server

Upload your Bedrock/Sage theme to Cpanel Hosting

In this section, we will get Bedrock set up on Cpanel hosting. In the advanced section of the Cpanel hosting panel, you should find the terminal. Run this command Get to the public root directory, here you need to create new folder for a subdomain and go into that folder if you are following along. […]

Full Width theme support WordPress

Add Full Width and Wide Width Theme Support in Sage

Before we work on the page layouts we will add theme support to “break-out” of the container div and make certain content go full width. This creates a really nice effect. This is an option you need to setup and isn’t enabled by default on WordPress unless the theme says it supports it. Once enabled […]

WordPress footer

WordPress Widget Footer Grid

Sage comes with a footer sidebar ready to go, so we will change this to a 3 column grid where it will space out 1-3 widgets across the bottom of the footer. Sage comes with an empty stylesheet for the footer scss, but first let’s create the class we need to style it as we […]

Sidebar Widget Plugin

Create a Theme Plugin

One of the basics I would often find myself doing is creating an advanced “latest posts” plugin, mainly so I could style the latest posts widgets a little nicer. This tutorial will show you how to create this plugin, and will give you some ideas to styling the sidebar. First, navigate to your plugins folder […]

Add a Sidebar in Sage

Sage Sidebars

In this tutorial, we will be adding a new sidebar called “sidebar-post”, and assign both the primary and new sidebar to various pages. Register a new sidebar We will register the new sidebar in the setup file – this is located in app/setup.php around line 80. I will add the new “Post Sidebar” to the […]

Fix header Issues - Sage Theme

Finishing off our Header – Sage tutorial

Our header has come a long way from that early unordered list, but we should finish off our styling and ongoing issues before we continue. Hamburger Menu in Sage not displaying So this was an issue I had – and it seems others have also, but it’s worth checking to see if this even an […]

Template Partial Sage

Add a Template Partial in Sage

As part of the header design I wanted to add another area above the navbar to contain social icons and the search bar. As we scroll down this are will disappear and the nav element will become sticky to the top of the page. This is what we will achieve in todays post, or if […]

Add FontAwesome to Sage

Add Font Awesome to Sage Theme

We are going to use a few icons from FontAwesome. With a little bit of extra work we can import only the icons we need, instead of the entire library (10x faster according to FortAwesome), We are aiming to make a theme with 95%-100% rating for page speed, so this extra work is essential to […]

Responsive menu - Sage

Add a responsive menu in Sage

You should have added all the test data to the theme in the last step, to begin working on our menu go to “Appearance > Menu” and choose the testing menu from the drop-down : Then, set this as your primary navigation : Now, visit your main page to see the visually stunning result, which […]

Install Soil.

Soil and Demo Content

We should do a tiny bit more setup just to make things smoother as we progress. First I want you to install wp-cli – this is the “WordPress – Comand Line Interface”. I won’t be using it much, but you will find it’s often used in documentation so I found it useful to have. Now, […]