Author: pixandhue

Whether you are just starting a blog or have been blogging for many years, your goal is to get more traffic and subscribers. Google Analytics is a robust and FREE tool. It helps you measure your success and reach more of an audience. This blog post will detail what Google Analytics can do for you. Additionally, it will show you how to add Google Analytics to your WordPress site.

Why is Google Analytics Important?

Google Analytics provides you with great insight about who you readers are, how they got to your website, and how they interact with your website. Here are some of the benefits of Google Analytics:

  • Track the geographic location and language of your visitors
  • Understand how many people your website multiple times
  • Learn how many pages your readers visit and how long they remain on each page
  • Compare how readers reach your website (i.e. referred from another website, social media)
  • Determine what are the most popular posts and pages on your website
  • Find out when the most people visit your website

Armed with this knowledge, you can make data-driven decisions about how to make adjustments to your blog. For example, if a certain post is popular, add more detailed blog posts about this same topic in the future. You can also learn if a certain marketing campaign was successful (or not) if it drives a lot of traffic to your website. Finally, if many people visit your website at a specific time, this is the best time to publish new posts to your blog.

Get a Google Analytics Account

If you do not already have one, the first step is to get a Google Analytics account. Visit the Google Analytics home page and click “Sign Up For Free.” Enter your Google username and password to login to your Google account. You will be redirected to the screen below. Click “Sign Up.” to begin with Google Analytics.

On the next screen (shown below), enter the information for your website. Make sure “Website” is selected for the first question – “What do you want to track?” After entering your information, click “Get Tracking ID” at the bottom of the screen.

And that’s it for setting up your Google Analytics account. You are now ready to move to the next step, and add Google Analytics to your WordPress website.

Add Google Analytics to WordPress

With over 1 million active installs, the Google Analytics Dashboard WP Plugin is a simple and fast way to add Google Analytics to your WordPress site. The plugin allows you to view detailed data right from your WordPress Dashboard and requires no code to get Google Analytics up and running!

Begin by installing and activating the plugin on your website. After activating the plugin, click on Google Analytics > General Settings in the sidebar of your WordPress Dashboard. For this first time, you will need to authorize the plugin as shown below. Do NOT check the box next to “Use your own API credentials.” Just click “Authorize Plugin.”

You will be redirected to a new screen similar to the one shown below. Click “Get Access Code” to continue. Accept the terms and conditions, and you will see a screen with your access code. Copy and paste this access code into the text box labeled “Access Code.” Click “Save Access Code” and the plugin will now be synced with your Google Analytics account.

You should be able to match the Google Analytics Tracking ID listed within the plugin settings to the ID listed in your Google Analytics account. The Google Analytics Dashboard for WP Plugin provides extensive documentation, including a video tutorial on how to set up the plugin. For more help with the plugin settings and the video tutorial, visit the plugin page here. You are now ready to use Google Analytics and learn more about your visitors!

Since WordPress Version 4.7, you can use the WordPress Customizer to easily add custom CSS to your WordPress theme. Premium WordPress themes come packaged with tons of built-in features so you can make several changes to your blog without ever having to enter a single line of code. However, even if with all of these features, you still may want to make adjustments so your website matches your unique brand and style.

This blog post will detail how to add custom CSS to your WordPress website, and why this method is better than the other methods available for customizing CSS.

Add Custom CSS to WordPress

To access the WordPress Customizer, go to Appearance > Customize. Find the section titled “Additional CSS” and click on the section to open it. The screenshot below shows the Additional CSS section opened to edit our Averie theme.

Add Custom CSS to WordPress

As soon as you add custom CSS to the panel, the screen will display a preview of what the CSS would look like if applied to your website. Here is an example of adding custom CSS to the Averie theme. Compared to the screenshot above, the top bar has turned pink because of the CSS entered here.

Easily Add Custom CSS to WordPress

Please note that these changes are not live on your website until you click “Save & Publish” at the top of the screen. Additionally, any changes made to the “Additional CSS” section are only available with the current, active theme on your website. If you decide to use a different theme, you will need to copy and add custom CSS to the same section of the WordPress Customizer after activating the new theme.

Benefits of Using the WordPress Customizer

Although there are many ways to add custom CSS to your WordPress website, this is the easiest and most effective way to do so. Here are a few reasons why this method is better than others:

  • You do not need to modify the parent theme, and you can easily update the parent theme without losing your changes in the future.
  • You no longer need to install a child theme just to customize CSS.
  • If you’re not sure about CSS, this allows you to preview the CSS changes! You can easily see if the code you added is valid and makes your preferred changes without ever impacting your live website.
  • You can add responsive changes here as well. Therefore, all of your custom CSS changes will be in one location instead of multiple theme files.

Do you have any questions about how to add custom CSS to WordPress? Leave your questions in the comments!

Are you looking to improve the style and design of your website, but your budget is low? A quick and easy way to freshen up the style of your website is to add Google Fonts to WordPress.

While many WordPress themes come packaged with at least one or two Google Fonts, maybe it doesn’t have the font that is exactly you and exactly your brand. This blog post will show you how to add Google Fonts to WordPress in a few easy steps!

What is Google Fonts?

Google Fonts has over 700 web fonts that are open source, which means you can use them without worrying about infringing on someone else’s work. Google has made it very easy to add Google Fonts to WordPress in a few simple steps. With fonts that are free, high quality, open source, and easy to add to your website – what’s not to like – let’s learn how to add the fonts to WordPress.

How to Find Google Fonts

To peruse the Google Font library, visit their website. On the left side of the page, they provide filters, which makes it easy to narrow down the sheer number of available options.

To add a font to your WordPress site, click the blue button “Add to Collection.” You will see all of your selected fonts in the “Collection” window at the bottom of the screen. A word of caution – using too many fonts can slow down your website so consider limiting the number of fonts to just one or two. After you are finished choosing your fonts, click “Use” at the top, right of the Collection window.

How to Add Google Fonts To WordPress

Next, we verify the settings of our selected fonts and add them to our website, using the 4 steps outlined by Google, which are covered in detail below.

Step 1 – Google Fonts will show you the weights and styles available for each font. In order to use these styles and weights on your website, you must check the box next to them. In the example below, I have selected the Roboto font, including the font weights 300 (light) and 400 (normal).

google fonts to wordpress

Step 2 – select character sets, as needed.

Step 3 – Google provides the code we need to add Google Fonts to WordPress. In my example, the code looks like the image below. Note – we only need the web address (https://fonts.googleapis.com/css?family=Roboto:400,30), and not the entire line of code.

google fonts to wordpressNext, navigate to the functions.php file of your theme. Using the Roboto example, here is the code to add to the functions.php file of your theme:

I recommend you use a child theme to make changes to your WordPress site. If you add this code to the functions.php file of your parent theme, you will lose this change next time you update your parent theme. If you do not know how to make a WordPress child theme, check out our earlier blog post.

Step 4 – Now the font has been added to your WordPress site and is ready to use! In order to use it, we use CSS to apply the font to specific elements of our website. Again, Google provides the CSS code to use in our theme’s style.css file. See my example below:

The beauty of Google Fonts is that you can easily try out different web fonts. After selecting new fonts, simply repeat Steps 3 and 4 to update your theme’s functions.php file and style.css file.

Icons add a unique detail to your website, and can be used on your WordPress posts and pages to stand out. The best source of icons for your WordPress website is Font Awesome. Why Font Awesome? They are constantly adding new icons – as of this blog post, there over 600 icons to choose from! You can easily change the style of the icons by customizing them with CSS. This blog post will teach you how to include Font Awesome in WordPress, and how to customize these icons on your website.

How To Include Font Awesome in WordPress

Before you can begin using the icons, you first need to include Font Awesome in WordPress. Many WordPress themes already include Font Awesome, so you may be able to skip this step. To check if your theme already includes Font Awesome, search your theme for the font-awesome.min.css file. If you find this file in your theme, you can move on to the next step!

To include Font Awesome in WordPress, navigate to your theme’s functions.php file. Here is the code to include in your theme’s functions.php file:

I recommend you use a child theme to make changes to your WordPress site. If you add this code to the functions.php file of your parent theme, you will lose this change next time you update your parent theme. If you do not know how to make a WordPress child theme, check out our earlier blog post.

How To Use Font Awesome Icons

To include Font Awesome in WordPress posts and pages, click on an icon to get more information such as the heart icon. Here you will find the code to include the heart icon on your website:

Copy and paste this code in the “Text” tab of your WordPress posts and pages. By copying and pasting the code in this blog post, here is the result with some Font Awesome icons:

Font Awesome Options

Just like regular text on your WordPress site, you can make the same changes to Font Awesome icons with CSS. Here are some examples using CSS and showing the customized icons:

With so many icons and customization options, it’s a great idea to include Font Awesome in WordPress. What are some of your favorite icons? Include them in the comments section below!

Contact Form 7 is an excellent, free plugin that allows you to easily build a contact form on your WordPress website. At Pix & Hue, we provide custom styling for the Contact Form 7 plugin in all of our themes and it can be see in all of our demos. As with any interactive feature of your WordPress website, the contact form is subject to spam. This blog post will cover how to stop Contact Form 7 spam, detailing two different approaches you can implement on your WordPress website. You are busy focused on your business and your brand, the last thing you need is more spam! By following the steps in the post, you can automatically stop spam from ever entering your inbox.

Contact Form 7 Spam Approach #1 – Honeypot

We use with the honeypot approach with the contact form on the Pix & Hue website. This approach is very effective and does not impact the aesthetics of the contact form or the user experience.

The honeypot approach relies on the premise that most spam is automated, and not manual. They honeypot approach adds a hidden field to your form, not visible to your website visitors. If the field is completed (such as by a spambot), the contact form will not submit.

We recommend the Contact Form 7 Honeypot plugin for a simple and free way to implement this approach on your website. Install and activate the plugin on your website. The plugin installation page provides a video with very clear instructions on how to add the hidden field to your form. Follow the steps in the video to modify your contact form and stop receiving Contact Form 7 spam immediately.

Contact Form 7 Spam Approach #2 – Google reCaptcha

While the first approach is very effective — an even more effective approach is to use Google reCAPTCHA, which adds a simple checkbox to your contact form. Google reCAPTCHA stops spam by having humans check the box, confirming they are not robots.

If would like to install Google reCAPTCHA on your website, you need to register your site with Google and get your API pair. To register, simply visit the Google reCaptcha page and click “Get reCAPTCHA.” After registering your site, get the site key and the secret key.

To integrate Google reCAPTCHA with Contact Form 7, go to Contact > Integration. Select “Configure Keys” and copy in the site key and secret key and save them. Within your contact form, add the [recaptcha] placeholder just before the submit button to enable Google reCaptcha on your form. Refer to the plugin page for detailed instructions.

Use either one of these two approaches to stop Contact Form 7 spam, and ensure only genuine leads ever reach your inbox.

Many premium WordPress themes offer tons of features and functionality to allow you to easily customize your WordPress website without coding. However, because your business, your brand, and your identity is unique – you may find that your theme does not let you execute your exact vision. If you are planning to make changes to your WordPress theme, it is important to use a WordPress child theme. This blog post will help you understand what a child theme is and how to add a WordPress child theme to your website.

Why Use a WordPress Child Theme

The most important reason to use a WordPress child theme is to make sure your WordPress website remains update-to-date and your changes last over time. Many WordPress themes offer regular updates (just like an iPhone app) and they are important to install as they fix bugs, ensure the theme is compatible with the latest version of WordPress, and provide security patches.

If you make any changes directly to your purchased theme, you will lose these changes when you update this theme. Therefore, we use a child theme so that we can regularly update the purchased theme while keeping our changes over time.

How a WordPress Child Theme Works

The terminology follows a familial pattern. We have a parent theme – meaning your purchased theme – and the child theme. The child theme inherits all of the styling and functionality of the parent theme. Any changes made within the child theme will override the parent theme, allowing you to make (and keep) adjustments to your purchased theme.

All of the Pix & Hue feminine WordPress themes come packaged with a child theme. However, if your theme does not provide you with a child theme – follow the steps below to create one.

How to Make A WordPress Child Theme

For this example, we will use the WordPress Twenty Fifteen theme as our parent theme. To create a child theme, we will first need to create a folder titled twentyfifteen-child. Replace “twentyfifteen” with the name of the folder that contains your parent theme. You can double check name of the folder that contains your parent theme by visiting /wp-content/themes.

Inside the folder “twentyfifteen-child,” we will create two files: functions.php and style.css. First, the code to include in the functions.php file:

Next, the code to include at the very top of style.css. An important note – you must include the “Template: twentyfifteen” field, but again, replace “twentyfifteen” with the name of the folder that contains your parent theme. Complete the other fields based on your child theme, including the name, description, and author.

How to Use A WordPress Child Theme

To use your child theme, you must install and activate it on your WordPress site. To install the child theme, use a FTP client such as FileZilla and upload the twentyfifteen-child folder (containing our two files functions.php and style.css) to the /wp-content/themes folder.

Within your WordPress dashboard, visiting Appearance > Themes and Activate the child theme. You can now begin making changes to your WordPress theme and continue to update your parent theme without worrying about losing those changes!

Elevate your online presence and WordPress website with stunning and free stock photos. When you hear “stock photo,” you may picture those horribly staged photos of corporate meetings, handshakes, and overly enthusiastic actors. While those certainly exist, there are so many excellent (free!) resources out there. In this blog post, we share some of our favorite resources for free stock photos for WordPress.

Copyright, Free Stock Photos, and Best Practices

But first, no post on stock photos would be complete without considering the copyright implications of using other people’s photos. While I am not a lawyer, I have run into a lot of clients who mistakenly believe you can simply copy images from the internet and use them on your site. Additionally, people believe that if you credit the source of the photo, this will protect you. It does not, and if you are doing this on your blog, you should stop immediately.

For further reading and best practices, check out this guide from lifehacker. The best advice I can offer is to use only photos you are confident you have the right to use. With so many stock photo resources, it’s just not worth the risk.

Free Stock Photos

Listed below are some of our favorite resources for high-quality and free stock photos. Don’t forget to resize and compress your images to improve the page speed of your WordPress site, as discussed in an earlier post.

Do you have another favorite you want to share? Post below in the comments!

The right images can transform your website from a very average one to a high-end, professional website one that boosts your online presence and adds credibility to your brand. For this reason, you should always add a featured image to each blog post. When using images on your WordPress site, it is very important to consider the size of the underlying image file. This post will walk you through some quick and easy steps to resize and compress images before using them on your site.

But Why Does it Matter?

If you have not considered how to crop and compress images on your WordPress site, the images may be slowing down your website and you may not even realize it. Images are typically the largest items on your website, and simply put, larger images take longer to load. The sizes of the image files on your site are an important factor in the total time it takes your website to load.

If you use stock photography, many of the original downloaded files are huge and way larger than needed for a website. Take for example, the featured image of this blog post, downloaded from unsplash.com. The original file is a whopping 3.9MB and approximately 4800px by 3200px, adding precious seconds to the time it takes this page to load. Website visitors expect fast load times, and may not stick around to read the content if your website loads too slowly.

So what can you do about it?

Crop Images with Adobe Photoshop

resize and compress images for wordpressThe first step is to crop the images to the actual size needed on the website. As viewed on a desktop, the width of the featured image at the top of this blog post is 1100px. That means the original file downloaded from unpslash (at 4800px wide) was more than 4x what I needed for this blog post!

The size needed will depend on the image’s placement on your website and if you are using a full-width image or not. If you visit the Pix & Hue home page, the very first image is full-width as it takes up the entire screen. Compare it to the other images on the home page, which are much smaller and do not extend the entire width of the site. Likewise, an image included in the body of a blog post should be much smaller than featured image of the blog post. To help you, Pix & Hue recommends the right size for the featured images of all of our themes.

Once you know the size of your image, open up the image inside Adobe Photoshop (or similar). From the top menu, select Image > Image Size. Set the width to the necessary size. Save your file.

Compress Images with TinyPNG

You have already made important adjustments to your images by simply resizing them to what you actually need. However, you can take it a step further and compress images with free online tools. By compressing your images, you can further reduce the size of a file and improve your load time even more.

I use TinyPNG for this final step – its simple and free. Follow the instructions on TinyPNG to drag and drop your image file. Download the compressed file and use this resized, compressed file on your WordPress site.

By following these simple steps, I was able to reduce the size of the featured image of this post from 3.9MB to 79KB. Follow these 2 easy steps for each and every image on your site, ensuring your WordPress loads faster and keeps your readers from leaving too soon.

Have you heard about the famous 5-minute install of WordPress? You may be wondering if it’s really that fast and easy? Good news, it is! In this blog post, I will walk you through exactly how to install WordPress and get your site up and running… in just 5 minutes.

What You Need to Install WordPress

How to Install WordPress

First things, first! Navigate to wordpress.org and download the latest version of WordPress. Once you have downloaded the file to your computer, double click the .zip file to access its contents.

Next, you will need to upload the WordPress files to your website. In order to upload the files, you will need a FTP client. I recommend using FileZilla, it’s completely free to download and use. Download the latest version of FileZilla, or whatever FTP client you choose, to your computer.

For the next step, you will need the cPanel login credentials provided by your hosting service. Open FileZilla, and at the top of the window you will see boxes for Host, Username, Password, and Port. Here’s what you should enter into each box:

  • Host: name of website (i.e. pixandhue.com)
  • Username: cPanel username
  • Password: cPanel password
  • Port: Leave blank or Enter 22

Click “Quickconnect” and if you are successful, you will see the folders of your website appear on the right side of the screen. If you have trouble connecting, double check your username and password are correct.

The next steps may vary by host, but for most people – on the right side of the screen, you should navigate to the public_html folder by double clicking on it. On the left side of the screen, you should navigate to the location of your computer where you have saved the downloaded (unzipped) copy of WordPress. Double click on the WordPress folder. As shown in the image below, you should see a listing of WordPress files and folders on the left side of your screen.

how to install WordPress

On the left side of the screen, select all of the WordPress files and folders. Right click and press “Upload.” At this point, you are have begun to install WordPress on your site! While this is happening, move on to the next step – setting up the WordPress database.

How to set up the WordPress Database

What is the WordPress database? The database stores all of the data of your WordPress site, including posts, pages, and images. You need to set up the database before you can install WordPress on your website. If your hosting service uses cPanel, follow the steps below to set up your WordPress database.

  1. Navigate to cPanel and Login with your cPanel username and password.
  2. Find the icon called “MySQL Databases” and click on it.
  3. At the very top of the screen, under “Create New Database” – enter a name and click “Create Database.”
  4. Scroll down to “Add New User.” Enter a username and password, and click “Create User.”
  5. Make sure you remember/save the username and password as you will need these in the next step – How to Set up WordPress On My Website.
  6. Scroll down to “Add User to Database.” Select your newly created user and newly created database from each list and click “Add.”
  7. On the next screen, check “All Privileges” and click “Make Changes.”

Once you have finished setting up the database, you are now ready to move on to the final step – time to set up and install WordPress on your website.

How to Set Up WordPress On My Website

Return to your FTP Client and double check if it has finished uploading WordPress to your website. If so, visit your website. You should see the install WordPress page with the language menu like the one pictured below. Select your language and press “Continue.”

how to install WordPressRead the instructions provided on the next screen and click “Let’s go!” It’s now time to connect the database you created in the previous step to your WordPress website. For the first 3 boxes, enter the database name, username, and user password you created in the previous step. Make sure you include the full database name and full username, and double check to make sure your password is correct!

For many, you do not need to change the “Database Host” or “Table Prefix.” If you run into any trouble during set up, follow up with your hosting service to confirm the correct entry for “Database Host.” Once you have entered the database name, username and password, click “Submit.”

If you have successfully entered the database information, you should see a new screen that begins “All right, sparky!” Click “Run the install.”

After the installation has finished, you will enter the title and login information for your WordPress website. The username and password created here will be used to access your WordPress site in the future. Make sure you remember/save this username and password. Click “Install WordPress.” If you have entered all of the information correctly, you should see a new screen titled “Success!” and that’s it!

Congratulations, you have managed to install WordPress!! If this was your first time working with WordPress, it may have taken you more than 5 minutes, but hopefully it was easier than you imagined. Click “Login” and using the username and password you created in this final step, go ahead and login to view the WordPress Dashboard. Within the WordPress Dashboard, you can write your first post and begin setting up your site!