Install Sage Starter Theme

Okay, so hopefully now we have Bedrock working. The next part in our development workflow is to get Sage installed. Navigate to your themes folder here is the location of mine :

File structure of sage theme

We can either load the terminal type in “cd ” and then drag the theme folder into the terminal window OR, a slightly different way I will show you this time would be to right-click the themes folder at the bottom of the Finder window and click “copy pathname” you can then type cd and paste the pathname into the terminal, however, my Local installation made a folder called “Local sites” (note the space) so you would need to escape the space in the pathname (“Local\ sites”). Dragging the folder to the terminal avoids this issue. Windows users you are on your own!

copy pathname example

Now, lets make Composer do some magic and paste this into terminal

composer create-project roots/sage your-theme-name
install process of sage theme screenshot

Answer all the questions it asks you, clicking enter will save the default. If you are following along with the series, make sure to choose Bootstrap (1) when asked. We will use Bootstrap to make a responsive menu in an upcoming section

So we are almost done, if we navigate into out new theme folder we will find a package.json file, this is a file that lists the project dependencies that we now need to install. So let’s go to this folder in the terminal – either copy the path or drag the folder right into the terminal to change the directory.

The official docs tell you to type in “yarn” I have node.js installed so I use this. If you have neither of these, then I would recommend installing node.js now before continuing and follow along with me.

npm install

once this has completed, type in :

npm run start

After a few seconds, your browser will launch, and you will be able to login to your admin panel and change the theme to the new sage theme we have set up.

Page not load?
Okay, so if your browser keeps spinning, you are one of the lucky ones that get to complete one last step! Load up local and click “open site”, then copy the URL of the page that loads up. Now, from vscode go to : web/app/themes/themename/resources/config.json then on line 12, where it has the “devUrl” paste in the correct url for your site. Now try running npm run start once more.

Extra:

Now if you don’t have Yarn, installed lets get that on out systems globally. First, because we have started the development server in our terminal we need to press control+c to end the session – we can use Node to install it so just type :

sudo npm install --global yarn

Type in your password.

The official docs and most tutorials for Sage use Yarn, so now you can too 🙂

The development environment is now set up our code will be automatically optimized, and we can begin to develop our theme. Check out our next tutorial as we begin to build our theme.

Get Bedrock Working on Local by Flywheel

This is the very start of our journey creating a theme using Sage. Full disclosure – Im learning too! and thats why you should comment whenever you have a question or a better way of doing something. I have done a lot of research in each section and try to keep to best practices, so make sure to tell me when I don’t.

A few prerequisites – Local is easy enough to install, Composer is probably the trickiest to get working, make sure it’s installed globally (type “composer” in your terminal and see if you get “command not found”)

  1. Composer” installed globally
  2. Local By Flywheel installed, and a new site setup.

Great, now we need to make the new site you just set up work with Bedrock. A good place to begin will be to install Bedrock. Our first step will be to navigate to the correct folder in the terminal. If you are like me, then this is always a pain, so let’s cheat. If you are running on a Mac, follow along if not then you will have to do some changes to work with Windows… I haven’t developed on a. windows machine so unfortunately, I cant be much help.

Go to your Local Site and click the small arrow next to the path. This will bring up the finder in the correct location.

Now, load up the terminal and type in “cd ” (note the space, this is important!)

cd 

You can now drag the “app” folder from the finder onto the terminal window and press enter, you will now be in the correct location in the terminal. See the video for an example.

As the terminal is now in the correct location copy and paste the following command:

composer create-project roots/bedrock

Awesome! if it begins downloading and installing things you are on your way – if you have an error you will likely now need to go and look into installing Composer globally. I will assume it all worked great!

Let’s do some cleanup, we can now go into the app/ folder in finder and you should see one folder called “bedrock” and another called “public” Let’s delete the public folder.

Now we need to load the folder up into Visual Studio in terminal type

cd ../

This will take us back to our root folder. We can now type

code .

And we should have VS code load the folder for us. This did not work as default for me, so if you have issues with VS not loading just open the folder as you usually would in VS Code, or see the accepted answer on StackOverflow to fix it! We will now need to edit a few files. Edit this file first :

app/bedrock/.env

At the top of the file add your username and password for the database, this should be the same as mine :

DB_NAME='local'
DB_USER='root'
DB_PASSWORD='root'

On line 14 you will also need to change the WP_HOME variable, mine is shown below, but use whatever is listed in Local :

WP_HOME='http://localhost:10008'

Almost done, one last file to change, and this will be in

conf/nginx/site.conf.hbs

on line 9 you will see :

    root   "{{root}}";

we need to get the correct path so go back to finder and navigate to the folder :

app/bedrock/web/

Now copy the path, watch this video for an easy way to do this.

Now head back to Local right-click the site name and click restart server. You may see some database errors in the Local database tab, these can now be ignored as everything should be working. The next step in our Workflow setup will be to Install Sage, check our next tutorial in the series.

Tutorial: How to add Font Awesome icon to form input

It’s often nice to add small font awesome icons inside form fields. For instance, on a contact form, we can add a little email icon, person icon, phone icon all inside the form field. If we include the FontAwesome Library I am a firm believer that we should get some real value out of it and not just use it for some social media icons. This is a nice little enhancement that works with the latest version of Font Awesome.

What we are making :

We will be looking at moving the icons from the left to the right-hand side, and also set up an event listener so that we can use this as a search field. For the above style, we are loading the standard icon to the left of the input, then with CSS moving it into the correct position. We then add small padding to the input to allow for the icon. This is a good place to note that FontAwesome has a cheat sheet to easily find icons, replace the fa-address-card class below with fa-icon-name from the cheat sheet. Here is the HTML code :

<i class="fa fa-address-card iconnameleft"></i>
<input class="inputleft" type="text" placeholder="Name" />

And the CSS code looks like this :

.inputleft {
    padding-left:35px;
    height: 2em;
    width: 30em;
    border: 2px solid #acacac;
    border-radius: 0.5em;
    font-size: 1em;
}

.iconnameleft {
    position: relative;
    font-size: 1.3em;
    z-index: 1;
    left: 10px;
    top: 1px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}

And thats it! the nice thing is as we aren’t using the icon code in the CSS like some solutions we can use multiple inputs with the same CSS rules and just change the icon in the HTML.

Input with FontAwesome Icon on the Right

This is what we are working on now :

The HTML code is very similar, but we now add the icon after the input :

<input class="input" type="text" placeholder="Search" />
<i  class="fa fa-search iconsubmit"></i>

And the CSS code uses a negative number to align the icon back into the input :

.input {
    height: 2em;
    width: 30em;
    border: 2px solid #acacac;
    border-radius: 0.5em;
    font-size: 1em;
}
.iconsubmit {
    position: relative;
    font-size: 1.3em;
    z-index: 1;
    left: -30px;
    top: 1px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}

So now you know how to add icons on the left and the right of an input, but what if we want the icon clickable? Well first we should make sure the user realizes its clickable, we should style a change as the user moves the cursor over the search icon, this is a simple color change but you could style it however you wanted.

.iconsubmit:hover {
  color: #add8e6;
}

Now we need some JavaScript to watch this icon and do something when its clicked.

<script>
const button = document.querySelector(".iconsubmit");

button.addEventListener("click", ()=>{
  // Do whatever you need here. 
  alert('It works!');                     
})
</script>

Here is all the code for both styles on a CodePen for easy reference and editing.

See the Pen Form Inputs by Matt Egginton (@matt-egginton) on CodePen.

Parallax WordPress Hero Tutorial

Check out the front page to see this in action. This style of parallax works great as a front-page “Hero Image”. It’s coded with just some CSS. It does however require you to make some coding changes to the template, and because your template file WILL be different from mine you should only do this if you understand the code enough to make the relevant changes. In this tutorial, we will be making all the changes in the front-page.php file. Your theme may not have this file… If that is the case I would recommend copying the index.php file and renaming the copy as “front-page.php” this template affects ONLY the main page. Remember to copy this into your child theme folder.

Source a cover image for the Parallax Header

Firstly, find yourself a great cover image. Some space on the left, right, or center of the image will allow you to have a clutter-free area for the text and button. Check out Pexels, Unsplash, and Pixabay who each offer free stock images or illustrations that might work for your needs., I personally LOVE vectorstock.com – you can get quality illustrations (with .ai .eps .jpeg versions of each file and it costs just $1 per image if you buy a credit pack) Vector stock is where I downloaded the image on our front page if you wanted to use the same one.

You will likely need to make a few changes to the image, we will be using the CSS “cover” which makes the image always display at 100% width, this causes the image to be cropped, sometimes significantly when viewed on different sizes of screen. Make sure the main focus of the image is near the center or slightly offset if you plan on having text on the left or right side of the image. Also make sure a good portion of the edges is background, or un-important enough that cropping will not matter. Have a look at the rough example below.

Target Image size for cover css

Add the HTML Structure

Next, we are going to create the HTML structure. Load up the front-page.php file. Your file is likely different from mine, so you may need to adjust this a little, lets take it slowly, first off look at the template for the function that calls in the header template. It will look like this :

<? get_header(); ?>

This outputs your header and your menu – immediately below this we want the parallax hero section, paste this code making the relevant changes to the text. Warning: your template file may have extra logic and PHP code, you will need to find the right place to put this code in your own setup.


<div class="paralax-a">
  <header id="para">
	<div class="hero-text">
            <h1>TheWPGeek.com</h1>
            <p>Web Development - with a focus on WordPress</p>
        <div class="wp-block-button is-style-fill"><a class="wp-block-button__link">Learn to make this Parallax Header.</a></div>
     </div>
  </header>

The observant among you will notice that this code does not close the initial <div> tag. This will need to be closed AFTER the content on the page has been output. In the same front-page.php file you will find some code that looks like this :

<?php
get_footer();

Just above that, we need to close out initial <div> so it will now look like this :

</div>
<?php
get_footer();

Now we need to load up the style sheet, usually style.css in your child theme folder.

Add the CSS code

Before we paste this code take a look at your front-page.php file, and see what your theme has named the <main> tag, here is mine :

<main id="primary" class="site-main">

if you do not have an id, add one called primary (id=”primary”).


.paralax-a {
	height: 200vh;
	max-height: 100%;
	overflow-x: hidden;
	perspective: 1px;
	perspective-origin: center top;
	transform-style: preserve-3d;
	padding: 0 40px;
}

#para {
	height: 50vh;
	background: url("/wp-content/uploads/2021/06/hero-copy.jpg");
	background-size: cover;
	background-position: center center;
	position: relative;
	vertical-align: top;
	transform-origin: center top;
	transform: translateZ(-1px) scale(2);
	box-shadow: rgba(0, 0, 0, 0.6) 0px 30px 50px -12px inset,
		rgba(0, 0, 0, 0.6) 0px 15px 32px -18px inset;
	background-color: rgba(255, 255, 255, 1);
}
#primary {
	height: 100%;
	background: white;
	transform: translateZ(0);
	padding: 10px 0;
}
.hero-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 70%;
	transform: translate(-50%, -50%);
	color: white;
}

Upload the hero image to your media library, and then copy the url and paste it into the stylesheet replacing this :

background: url("/wp-content/uploads/2021/06/hero-copy.jpg");

the alignment of the text is controlled by this in the .hero-text CSS

left: 70%;

30% pushes it to the right, 50% will align to the centre. For my image 70% aligned the image perfectly for my needs.

Notes

As this CSS code is not used elsewhere on the site you could also add it to the page itself.

As my text is not directly in the middle it does not work well on small screens, we will need to add a media query to either centralize the text or resize accordingly. For me, text in the middle does not work as it becomes cluttered with the image, I made the decision to remove the text completely from the image. A better solution would be to use a grid layout for the text, and a media query to change the column layout for small screens.

@media only screen and (max-width: 600px) {
	.hero-text {
		display: none;
	}
}