Custom WordPress Login

Sometimes it’s the little touches that can really elevate a client experience. One of my favorites is a custom login page. It will make your clients feel like you went the extra mile, and it won’t take you long to set up.

This tutorial will go over how to customize your WordPress login page, without needing a plugin.

By default, your WordPress login page will look like this:

Default WordPress Login Screen

Once we’re done, you’ll have something that looks like this!

The directions below are for customizing it with a background image so you can decide what you want to use.

Customized WordPress Login Screen - Caffeinated Web Studio

The first thing we’re going to do is get our files ready.

  1. Copy the code below into your favorite editor (mine’s Atom)
  2. Replace button_primary_color with the hex color that you want to use for your button (ex: #de3974)
  3. Replace button_hover_color with the color that you want to use for your button hover
  4. Replace insert_url_here with your background image URL
  5. Set your overlay color
  6. Replace insert_logo_url with your logo URL
  7. Save the file as custom-login-styles.css
  8. Add a folder to your child theme named login and add this file there
:root {
  --button: button_primary_color;
  --hover: button_hover_color;
}

body.login {
  background-image: url('insert_url_here'); /* if you don't want to use an image, you can remove everything from here except the background-color */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: overlay;
  background-color: rgba(51,51,51,.5); /* this color will overlay the image or be the background color if no image */
}

.login h1 a {
  background-image: url('insert_logo_url'); /* add your logo image url here */
}

.login h1 a {
  -webkit-background-size: 200px !important;
  background-size: 200px !important;
  background-position: center top;
  background-repeat: no-repeat;
  height: 100px !important;
  width: 200px !important;
  color: #444444;
  font-size: 20px;
  line-height: 1.3em;
  margin: 0 auto 25px;
  padding: 0;
  text-indent: -9999px;
  outline: 0;
  display: block;
}

.login form {
  background: #ffffff;
  font-weight: 400;
  margin-top: 20px;
  margin-left: 0;
  padding: 26px 24px 46px;
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.login label {
  font-size: 12px;
  color: #444444;
}

.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login .button-primary {
  min-width: 120px;
  float:right;
  background-color:var(--button) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--button)), to(var(--button)));
  background: -webkit-linear-gradient(top, var(--button), var(--button));
  background: -moz-linear-gradient(top, var(--button), var(--button));
  background: -ms-linear-gradient(top, var(--button), var(--button));
  background: -o-linear-gradient(top, var(--button), var(--button));
  background-image: -ms-linear-gradient(top, var(--button) 0%, var(--button) 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid var(--button);
}

.login .button-primary:hover {
  background-color:var(--hover) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--hover)), to(var(--hover) ));
  background: -webkit-linear-gradient(top, var(--hover), var(--hover) );
  background: -moz-linear-gradient(top, var(--hover), var(--hover) );
  background: -ms-linear-gradient(top, var(--hover), var(--hover) );
  background: -o-linear-gradient(top, var(--hover), var(--hover) );
  background-image: -ms-linear-gradient(top, var(--hover) 0%, var(--hover) 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid var(--hover);
}

.login .button-primary:active {
  background-color:var(--hover) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--hover)), to(var(--hover)));
  background: -webkit-linear-gradient(top, var(--hover), var(--hover));
  background: -moz-linear-gradient(top, var(--hover), var(--hover));
  background: -ms-linear-gradient(top, var(--hover), var(--hover));
  background: -o-linear-gradient(top, var(--hover), var(--hover));
  background-image: -ms-linear-gradient(top, var(--hover) 0%, var(--hover) 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid var(--hover);
}

.wp-core-ui .button-primary {
  background: var(--button);
  border-color: var(--button) var(--button) var(--button);
  -webkit-box-shadow: 0 1px 0 var(--button);
  box-shadow: 0 1px 0 var(--button);
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 -1px 1px var(--button), 1px 0 1px var(--button), 0 1px 1px var(--button), -1px 0 1px var(--button);
}

.wp-core-ui .button-primary:hover {
  background: var(--hover);
  border-color: var(--hover) var(--hover) var(--hover);
  -webkit-box-shadow: 0 1px 0 var(--hover);
  box-shadow: 0 1px 0 var(--hover);
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 -1px 1px var(--hover), 1px 0 1px var(--hover), 0 1px 1px var(--hover), -1px 0 1px var(--hover);
}

.wp-core-ui .button-primary:active {
  background: var(--hover);
  border-color: var(--hover) var(--hover) var(--hover);
  -webkit-box-shadow: 0 1px 0 var(--hover);
  box-shadow: 0 1px 0 var(--hover);
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 -1px 1px var(--hover), 1px 0 1px var(--hover), 0 1px 1px var(--hover), -1px 0 1px var(--hover);
}

p#nav {
  display: none;
}

p#backtoblog {
  display: none;
}

a:focus {
  color: #124964;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Now that the style sheet is ready, we’re ready to call it into our child theme.

  1. Copy the code below and paste it into your functions.php file
  2. Replace SITE NAME with your site’s name
  3. Click Update file
// Custom Login
function my_custom_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');

function my_login_logo_url() {
  return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
  return 'SITE NAME';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

function login_error_override()
{
  return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

function my_login_head() {
  remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
  echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

And that’s it, you now have a custom WordPress login page! It’s such an easy way to make your site feel more custom.

Try it out and let me know what you think in the comments.

If you have a Facebook page, you’ve been there. You create a cover image for your promotion, load it up, and it looks kick ass on desktop. Then, you head over to mobile and the image is kinda fuzzy and the sides are cut off. Bummer.

The official Facebook guidelines says your cover photo…

Displays at 820 pixels wide by 312 pixels tall on your Page on computers and 640 pixels wide by 360 pixels tall on smartphones

Is that helpful? Not really.

Worry not though, because I have a solution for you!

I like to load images a little larger than the display area so the text is clear, even on retina displays, so I always recommend a width of at least 1200px for Facebook.

Following that rule, your Facebook cover photo should be 1200×675 pixels and your main content (the stuff you want to be seen no matter what the screen size) should fit within a 1200×460 pixel area.

Once your image is complete, you’ll want to change your cover image from a desktop and not mobile. That way, you can position your content where you want it.

Make it easy on yourself and grab a template!

Facebook Cover Photo Template for Illustrator
Facebook Cover Photo Template for Photoshop

Note: This information is for the current Facebook layout as of April 2020.

Create A Wordpress Child Theme

Customizing your chosen WordPress theme is fun! What’s not fun is customizing the code files only to have them overwritten when your theme gets an update from the creator. Even if you’re not sure you’ll edit the theme files, it’s always a good practice to start with a child theme, just in case.

What’s a child theme?

A WordPress child theme inherits its functionality from another WordPress theme, the parent theme. This allows you to add/alter code to your theme, without touching the code of the original theme. Making it easier to fix problems and allowing you to update your parent theme without losing changes. YAY!

So how do I create a child theme?

Below we’ll breakdown the steps you’ll take to create a very basic child theme.

1. Load the parent theme into your WordPress install.

If you’re reading this, you probably already know how to install a WordPress theme. If not, you can find instructions here. Once it’s installed, you don’t need to activate it since this won’t be the main theme.

2. Create your child theme files.

The first thing we’ll do is create a folder to hold your files on your desktop, I usually use the client name or some version of it. For example, the folder name for my child theme is caffeinatedweb. Once the folder is created you’ll create two files to go inside it (I use Sublime Text to create and edit files, but you can use whatever works best for you). These are the only two files essential to your child theme, but you can always add more to overwrite existing pages and/or add template pages.

The first file we’ll create will be your style.css. You can copy the code below into that file, make sure to edit the code for each child theme you create (directions below).

/*
Theme Name: Twenty Twenty Child Theme
Theme URI: https://example.com
description: A theme created for [Client Name].
Author: Jane Doe
Author URI: https://example.com
Template: twentytwenty
*/

What the heck is that?

  • Theme name. This will show up as the name for your theme in the WordPress back end. I usually set it to the client company name.
  • Theme URI. Since this is for your client, and not something going into the WP Theme Store, I set this as the URL for the site the theme is for.
  • Description. This description will show up when you click on “Theme Details.” Something along the lines of “A theme created for [client name]” is fine.
  • Author. This is the author’s name — that’s YOU! Add your company name here.
  • Author URI. This should be the URL to your site.
  • Template. This is the MOST IMPORTANT part of this code. The name of the parent theme, meaning its folder name, goes here. It is case-sensitive, and if you don’t put in the right name, it’s not going to work.

The next file we’ll create will be functions.php. This file will pull in the style and functionality from the parent theme and it’s where you’ll add new functions as well.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

// Do not delete anything above this line. Add custom functions below.

The last file we’ll add to our folder is optional. You can create an image that will show on the theme screen. It should be 1200 x 900 and be named screenshot.png.

Once all of your files are added and edited, zip your folder up.

3. Load the child theme.

You’ll load the child theme exactly like you did the parent theme, but this time you’ll activate it. If you did it correctly, you won’t receive any errors and the site should look identical to the original theme.

4. Make your edits.

Now you’re ready to make your edits without compromising the original theme!

Have questions about creating a child theme? Leave a comment below!

How I Use Dubsado To Run My Business

We’re all looking for ways to make running our businesses easier so we have more time to focus on other things. Before I started using Dubsado for my business I was using so many different platforms and it was a pain. I had one platform for invoicing, another for contracts, I was doing proposals in Microsoft Word and couldn’t find a task management system I wanted to use at all. Plus, I tried several other CRM’s and didn’t think they worked well for my business.

Then, one day, I randomly happened upon Dubsado in a Facebook group. I tried it out and never looked back! It had everything I was looking for, which at the time was a single application with a nice user interface that could handle contracts and invoices. Dubsado had that and so much more!

Dubsado has been a total lifesaver for my business and these are just some of the functions that I feel are super helpful.

How I Use Dubsado To Run My Business

Lead capture forms.

A lead capture form is basically a contact form. It allows you to collect information from people who want to work with you. The difference between using a contact from your web platform and a lead capture form is the lead capture form will automatically bring all of the collected information into Dubsado. This lets you track where a lead is at in your intake process and easily upgrade a potential client from a lead to a job.

I use several lead capture forms (I have one on my contact page, one on my 404 page, one that is linked to Facebook, and one that I use for ad landing pages) allowing me to quickly see where leads are coming from.

Canned emails.

If you answer the same question often, send out the same email to each client canned emails will save you SO MUCH TIME! I have emails pre-written for maintenance reports, invoices, hosting updates and all kinds of other things. A lot of times these emails end up getting altered before sending, but having a starting point is crazy helpful.

Custom questionnaires, proposals and contracts. Oh, my!

Onboarding clients can involve a lot of paperwork. Luckily, Dubsado allows for everything to be digital and kept in one place. Their drag and drop interface makes it easy to customize all of your forms too. In addition to adding text to these documents, you can add things like images, gifs and even code blocks, which allow you to incorporate schedulers (Calendly, Acuity, etc.).

The proposal process is great, moving clients easily from proposal to contract to invoice. I use the Dubsado questionnaires for a couple different things like project briefs, website content, collecting client login information, case-study followups… the possibilities are endless!

Need a second contract? You can do that too! Sub-agreements allow you to add things like project sign-offs, model releases, addendums and more.

And the icing on the cake? Dubsado has an amazing form template library to get you started!

Dubsado Form Library

Invoicing and recurring billing.

When looking for a CRM, it was really important to me that it handle contracts AND invoicing. I really wanted all my shit in one place. Their invoicing is super easy and now supports recurring billing which I use for my maintenance plans.

Workflows.

Workflows really bring everything in Dubsado together. It does so much and the folks at Dubsado do a much better job of explaining it. But I use it to automatically trigger actions from a lead form. Once the form is filled out Dubsado will automatically send an email to the potential client, create a job, start to-dos, etc.

They recently added a great workflow overview to let you see exactly where everyone is in your process!

Dubsado Workflow Overview

Calendar integration.

Being able to see my calendar (you can sync Google or iCal) in Dubsado has been really helpful. When I log in I can see everything I have coming up that day right on the dashboard.

All jobs and appointments created in Dubsado are automatically added to my calendar. Plus, any tasks that have been assigned a date.

Client portal.

One of my absolute FAVORITE features of Dubsado is their client portals. I love that clients have an area where they can see all of their contracts, forms, invoices and job details. It also houses all of our email communication and you can now share task boards with clients which has been great for project management.

Dubsado Client Portal

White labeling.

EVERYTHING ON BRAND! Dubsado is so modest that it let’s you brand every inch of it. Amazing.

We recently discussed Dubsado on The Digital Café Podcast! Check it out at thedigitalcafepodcast.com.

What Is Hosting | Caffeinated Web Studio

Starting a business is exciting! But, when it comes to your business website, things can get confusing. If you glaze over when people start mentioning things like domains, hosting and email clients… you’re not alone.

So… what is hosting and why do you need it?

Hosting is the foundation of your online business. It’s where all of the files for your site live so they can be served up to your customers. There are TONS of options for web hosting out there so let’s take a look at some of the things your host should be doing for you.

What Is Hosting | Caffeinated Web Studio

Providing awesome customer service.

When something goes wrong with your site having quick and easy access to support is SO important. Every company is different; some offer 24-hour support, some are only open Monday – Friday during normal business hours. Some offer chat support, some you can only call or email. Make sure you know the hours your hosting support is available and how you can reach them.

Running security checks.

Site security is a BIG deal. If something has compromised the security of your site, you want to know right away. And, what happens if your site is hacked? Will your host remove malware for you, or is it a separate service?

Backing up your data.

Even the best-laid plans can go south. If something happens to your site, does your host have your back? Most hosting companies offer some kind of backup service but you need to make sure you know what their process looks like.

  • Are the backups automatic, or do you need to set something up?
  • Are the backups included in your plan, or do you pay extra for the service?
  • In the event you need to restore a backup, can you do it, or do you need to contact support and have them do it?

Offering SSL Certificates.

SSL Certificates encrypt your site, protecting the data of your users. Not only will the little green lock next to your URL make your customers feel safe, Google has decided everyone needs to be secure and not having one can affect your ranking. A few hosts now offer SSL Certificates at no additional cost using a service called Let’s Encrypt, does yours?

For your WordPress site, hosts like Flywheel and SiteGround offer all of these things. Ask around, get opinions, know your options.

Need more help? Email me at [email protected].

Caffeinated Happiness no.3

I spend a lot of time searching the web to find things that make my life easier, personally and professionally. Nothing makes me happier than finding that something and sharing it. Check out some of the awesome things I’ve come across!

Caffeinated Happiness no.3 | Caffeinated Web Studio

1. Honey*

Honey is an amazing tool that helps you save money! Who doesn’t like that? When you shop online Honey will find promo codes for that site and run them for you finding the best deal.

2. Loom*

Loom is a great FREE tool for professionals who need to show clients how to perform tasks. While in the browser, hit record and let Loom take care of the rest. Record tutorials with or without audio and you can even show yourself on screen during the tutorial.

3. Font Base

If you’re anything like me you have a slight font addiction. But, scrolling through hundreds of fonts in Illustrator can be time-consuming and frustrating. Font Base is here for you. It lets you sort fonts into collections, folders, favorites and preview the font as well. It’s available free for Mac, Windows and Linux operating systems.

4. Prism

I am THE WORST at keeping track of when bills are due. Or, I was. Not anymore! Prism lets you add your bills by adding accounts through logins or manually and adds them to a calendar as they come in. I get reminders of when things are due and can pay them through the app. YES!

5. 1Password

First off, everything has a password these days. Then, you’re supposed to have a unique password for each thing. And to make life even crazier, you’re supposed to memorize them all. HAHA, yeah right. 1Password has been a lifesaver. I keep all of my passwords in it can easily access them from my iPhone app or the browser extension. And now, I never worry about forgetting that unique 14 digit password that has to have a letter, number, special character and jazz hands, HA. SO EASY!

*Full Disclosure: this is an affiliate link.

Have a problem you’re searching for a solution to or know of something awesome that can help people out?

Looking for more caffeinated happiness? Find it here!

As a business owner, you may be asking yourself if you should even bother with a website. The short answer; yes, you should! But do short answers ever change your mind? Probably not. So let’s look at why you need a website.

Your customers are looking for you online!

Let’s say you’ve just heard of a fantastic new place or product. What’s the first thing you do? That’s right. Google it. Your customers and clients should be able to get the information they want quickly and easily from your site.

Your competition has a website.

At the same time, if you google something and find nothing, what do you do next? Find something similar that does have a site.

It’s a powerful marketing tool.

A properly optimized website is your business’s best asset. Not only can you use it to announce sales, specials, and new products or services; you can also see exactly what your customers are up to on your site. Customers make decisions on purchases based on who comes to mind first. A website gives you that opportunity every day of the year.

Have you ever looked a product, decided against the purchase for the moment and then two days later saw it while you were reading an article? That’s digital marketing at it’s finest, and it wouldn’t be possible without a website.

It’s available 24/7.

Your website gives customers a way to interact with you, even when you aren’t available to interact with them. They can purchase your products, browse your menu or check out your portfolio. You’ve just made a sale and didn’t even have to do anything extra!

It makes you look legit.

Your website adds a layer of credibility to your business. People want to be able to research a product or service before making a purchase. They want to know how much it’s going to be, what all the options are and whether or not other people like it. Make sure they are getting all of that information from you, on your website.

You own it!

I once heard someone say they don’t need a website because they have Facebook. My head almost exploded. Not only is Facebook not an ideal way to present information, but with the algorithms of Facebook constantly changing the chances of someone seeing what you want them to are so slim.

A website lets you show information in a way that works best for your business and that content belongs to you! Besides, what happens to your business if Facebook ever goes the way of MySpace…

Are you ready to take the next step? Let’s grab coffee and chat about what your website can do for you!

Caffeinated Happiness no.2

I spend a lot of time searching the web to find things that make my life easier, personally and professionally. Nothing makes me happier than finding that something and sharing it. Check out some of the awesome things I’ve come across!

Caffeinated Happiness from Jennifer at Caffeinated Web Studio

1. Trello*

I’m pretty sure everyone knows what Trello is, but I just love it! It makes it super easy to collaborate with people I’m working on projects with and keep my life running smoothly. I took a course, Trello for Business, and it was seriously SO HELPFUL!

2. #HashMe

Sometimes it’s difficult to find the right hashtags for your Instagram photo. And, for SEO purposes, you should have about 30 per post. WHAT?! I know. But, #HashMe is here to help! Just put in a hashtag you want to use and it’ll suggest 60 more for you to use. Just choose the ones you want. Copy. Paste. Done.

3. Lynda.com

Lynda.com is an AMAZING platform that you can learn just about anything on. However, it can be pretty pricy with plans starting at $19.99 a month. But guess what… chances are your local library offers it to you with just your library card!

4. Hopper

Hopper is a pretty nifty little app that helps you find the lowest airfare for your next trip. Just enter where you’re coming from, where you’re going and when you want to go. It will then show you the cheapest fares and notify you when they change.

5. Page Ruler

Trying to find out how big something is on the web? Page Ruler is a chrome extension that measures everything for you. You can get the measurements by dragging your mouse or by selecting elements. Now you won’t have to inspect elements or save images to find out what size they are!

*Full Disclosure: this is an affiliate link.

Have a problem you’re searching for a solution to or know of something awesome that can help people out?

I spend a lot of time searching the web to find things that make my life easier, personally and professionally. Nothing makes me happier than finding that something and sharing it. Check out some of the awesome things I’ve come across!

1. Dubsado*

Dubsado is a job management app. I cannot tell you how long have searched for a program that does what I want it to do. I love the simple interface Dubsado provides for tracking contracts and invoices. They also are working on integrating a client collaboration area, fully integrated email and bookkeeping. Plus, you can use my Dubsado coupon code, caffeinatedweb, to get 20% off your first month!

2. Prime for Instagram

Everyone is looking to crack the Instagram code. I don’t have answers for that. However, I do have Prime for Instagram. It’s a handy app that analyzes your Instagram followers and tells you the best time to post!

3. WP Media Folder

For all the wonderful things WordPress does, they have seriously dropped the ball when it comes to how it handles media. But worry not, WP Media Folder is here to make your life easier by allowing you to organize all of your media into folders. This is the best money I’ve ever spent on a plugin.

4. Frontify

When your brand is being managed by a couple different people it can be difficult to keep everyone on the same page. Not any more! Frontify lets you create an online style guide that lays out exactly what colors, fonts and imagery is allowed.

5. Librestock

Searching for a stock photo for your blog can be a pain. Librestock helps ease the frustration by searching over 40 free stock sites for you. Easy peasy!

*Full Disclosure: this is an affiliate link.

Have a problem you’re searching for a solution to or know of something awesome that can help people out?