30 Oct 2016

How To Customize The Text Editor of Your WordPress Site

WordPress started out as a simple blogging platform and over time has almost become a full framework for applications. One thing that hasn’t evolved much with time is the text editor or the kitchen sink. Users have been resorting to plugins to add functionality and to give it some style. While WordPress 4.0 did dramatically improve the editor, there’s still plenty of room left for more customization and improvement.

Why Would You Customize The Editor?

One of the biggest problems with the editor is that you still have to click the preview button to get a feel of how your front end looks. When you add up the time spent switching between your previews and back to your editor to make additional content changes, you’d be surprised how much time is wasted. Basically, you’ll instantly receive the benefit of a true WYSIWYG editor when you customize the text editor to look and function like the front end of your site.

If you’re a reseller or build WordPress sites for people, then you know that a lot of your clients aren’t going to be technically capable of managing their own sites or changing content. This is when they end up calling you at 4AM to tell you that they accidentally removed something when they tried to edit their site.

This happens a lot…

Having a true WYSIWYG editor for your text editor will dramatically reduce all of these mishaps. Why doesn’t WordPress have a true front-end editor yet? No one knows but the promise of having one has been on the horizon for years and competitors such as Weebly and Squarespace have made their sites super user friendly by adding front-end editors. It may be because there’s a downside to the front-end editors in terms of functionality and content flow when creating content.

 

Not only that but most of the front-end editors that are offered by those competitors aren’t solid, have bugs, create disgusting code and don’t have things such as Meta boxes. So while you can try to use a plugin like Visual Composer, be warned that not only does it create messy code but they’re often buggy and unreliable. I can’t count the number of times I’ve clicked save and nothing happened or things were deleted for no reason.

Warning: This is an advanced tutorial and beginner things like WordPress installation won’t be explained. You should have knowledge of how WordPress works and CSS before beginning.

wordpress-responsive

Step 1 – A Fresh Install

Make sure you’re doing this on a brand new fresh install of WordPress, preferably a remote version on your own computer. It shouldn’t need to be said but don’t do this with someone’s website to test things out, do this on a test website, try out a free theme if you need to.

Step 2 – Understanding the Core

Once there’s same sample content via your fresh WordPress install and a fresh theme to look at, you have to understand how the core of WordPress works and the functions of the text editor to get the most out of it. TinyMCE is a great tool but it’s completely ignorant of anything going on outside the editor. There’s one core file that controls TinyMCE but thankfully for us, the creators have allowed us to load additional stylesheets into it.

While it’s great that ever since 3.0.0, you’ve been able to add stylesheets in a function called add_editor_style in includes/theme.php, we’re going to be looking at more efficient ways to call the function. The very first thing we need to do is look for a file called editor-style.css. Does this file exist already for your theme?

The editor should look for the file editor-style.css by default but we can check for this in the development console. It’s F12 for most browsers and on the right hand pane, we can easily see that it indeed is pulling style from editor-style.css. A quick re-cap so far:

  • WordPress is powered by a powerful editor called TinyMCE but it lacks some core functionality that we’re going to be messing with
  • TinyMCE while it does come with core styling allows for the overwriting of its styling with a native function in WordPress
  • WordPress calls this function add_editor_style in includes/theme.php to allow people to do such a thing

Step 3 – Making Some Changes

Taking the steps above, if you’ve determined that there is an editor’s stylesheet in your theme’s folder, then you want to make sure you save a backup of this file and copy it. Call it something like custom-editor-style.css and place it in the exact same folder location. This is far more efficient than backing up the entire theme and database.

Next, we need for WordPress to actively search for that file rather than trying to find the default one. To do this, navigate to your theme’s folder and look for functions.php. We need to open this up and call add_editor_style to make sure that it’s going to use your new stylesheet rather than the old one.

Add the following code to the theme’s function.php and when you’re done, simply hit save. If you’re editing directly from a FTP client, make sure you re-upload the file.

// This is the code for adding a custom stylesheet to the WordPress post editor

function my_theme_add_editor_styles() {

  add_editor_style( 'custom-editor-style.css' );

}

 

add_action( 'admin_init', 'my_theme_add_editor_styles' );

Where custom-editor-style.css is, if you’ve named your new file something different, change it to that name. Next, we need to make sure that the editor is actually using the stylesheet and the default stylesheet isn’t overriding your new one. Simply look at the inspector to confirm this. Earlier we confirmed you’d need some CSS knowledge so you should have a few changes already made in that stylesheet to see if any of the changes have gone through.

Are the changes being tracked by the backend as well? Let’s do a quick test by changing the color of your headers. Find the following in your stylesheet or add it if it’s not there. By default, all of the headers should be listed.

h1, h2, h3, h4, h5, h6 {color: red; font-size: 35px;}

You can make the color whatever hexcode or color you want and you change the font-size to whatever you want but this is for testing purposes at this point. Is everything working great so far? It should be but let’s test something else by adding a little splash of border to the images in TinyMCE.

For this, all we have to do is target the TinyMCE main styling ID which is by default, #tinymce. This is the ID that it automatically generates in the body, regardless of the WordPress version you’re using, as long as it has TinyMCE. When we generate a border for our images, we should see the results instantly. This is the last CSS example we’re going to do because the entire point of this is to make sure that we have complete control over the styling of TinyMCE.

To generate a border around all TinyMCE images, simply type in the following in the stylesheet we made:

#tinymce img {border: 5px solid blue;}

From this point on, you should be able to style everything the way you want it now that we’ve confirmed the style changes are taking effect. If you’re new to CSS or styling, there are plenty of guides online such as Codeacademy that’s 100% free and has great tutorials on styling and a lot more.

What about Sites That Don’t Have an Existing Editor Stylesheet?

If this is the case, which it usually isn’t, you can simply open up the custom-editor-style.css file and replace the contents of that file with this:

@import url(‘my-style.css’);

The first time you do this, don’t panic if things look broken. It will take some time going back and forth, making sure changes were saved, etc. The steps above should give you a nice base to work with and if you’re new to styling, it should give you some practice as well. One great file to look at is the basic styling sheet for the theme Twenty Sixteen. This is a nice starting point and can help you map out your styling strategy for customizing your own.

Conclusion

That’s simply it. With a couple of steps you can begin editing the default look and behavior of your editor to feel far more like a WYSIWYG editor and like the front-end. There’s so much more you can do with the editor as well, such as adding styling based on different post types or custom post types. For these advanced tutorials, we’d highly recommend consulting with the WordPress documentation before touching anything.

While there are some plugins that do this for you, they need to be constantly updated, most of them are outdated, they slow down the site and plugins like Visual Composer as mentioned earlier are notorious for bugs, breaking your site, producing messy code and slowing down the site. The steps mentioned above are a great starting point for creating a truly customized editor. We’re still years away from a fully functional WYSIWYG TinyMCE that works flawlessly.

Share this
30 Oct 2016

How To Increase your WordPress Site Conversions With Psychology And Colors

Believe it or not, there’s a lot of psychology behind the conversion rate of your website and influencing factors. One of those biggest factors aside from having a user friendly design is the colors of your website. A great design only takes you so far but if you have a poor color scheme, you could be bleeding potential customers.

Why do colors affect us so much? You may not even realize it but when you’re browsing a site, there’s three different factors to take into consideration when theorizing how color affects people so much.

First, there’s contrast. The contrast of two colors is simply the difference between them. In art, you use contrast so that you can focus your attention towards a specific element and this is the exact same thing in web design. You use two different colors not only to grab the viewers’ attention and focus on a particular element but it’s also useful for readability. For example, light font on a light background is poor design and contrast.

Complementation is the second factor in color theory. When you look at a color wheel, you might notice there’s two colors that seem to be the complete opposite of each other. Red certainly looks nothing like green but it’s the complementary color. These colors when they’re used together make a great theme and have been shown to increase your conversion ratings.

Finally, there’s vibrancy. In general, this is the mood that a color sets for the visitor. Different studies have shown that warmer colors such as red, yellow or orange have been known to energize people. However, cooler colors such as blue, purple and green have put people into a more relaxed state. Red is one color that’s known to make people alert and green is known to get people in the shopping mood.

color-palete

Colors & Their Vibrancy

How over millions of years have we developed a mindset to react different to colors? No one truly knows because this isn’t something that we actively taught ourselves. Also, different cultures approach different colors differently as well. For the primary focus of this article, we’re going to focus on increasing your conversions with the western audience and what studies have shown.

When designing your theme or site, keep all of this in mind and think about the demographic you’re targeting. It could be the difference between a 10% bounce rate and a 60% bounce rate with a dramatic drop in conversions or clicks.

Red – This color is known to keep people alert and put people on edge. It’s the color of excitement and it’s also the color of passion. Numerous lingerie and adult online stories try to utilize red whenever possible, such as the front page of Victoria’s Secret showcasing red lingerie. Obviously there’s a lot of other factors as to why that company is successful but when you want someone to feel excited or passionate, this is your go to color.

Yellow – When you think about the color yellow, you probably visualize the summer time and a nice cool breeze. Yellow is warmth and also represents hospitality. This color can put people into a relaxed state of mind or give them a little more trustworthy feeling of the site they’re on.

Orange – As you may have guessed, orange is usually associated with Thanksgiving and Halloween. Orange is the color that represents the start of autumn and harvest. This is common tradition for the west as September through November is when Thanksgiving and Halloween occur. However, this color isn’t particularly known to affect one’s mood so much above the others.

Blue – There’s primarily two different mood factors here for blue. First, there’s the negative context of blue which means sadness or depression. It’s commonly used by pharmaceutical companies trying to sell anti-depressants and the sales numbers don’t lie, it works. However, in a positive context it means authority, power and trust. Believe it or not, a blue tie in an interview can give you an authority look. This is the same reason banks love to use blue on their logos.

Green – This color is one of the broadest colors out there that can be used for a wide variety of things. First, there’s the luck of the Irish, which is why you commonly see green themes everywhere during the month of March. Then, you have pro-environmental groups that use green as their main theme because it represents nature and environment. However, green can also be used by get rich quick sites or sites trying to get you to buy something because it embodies the traits of jealousy and envy.

You see some rich smug guy on a get rich quick page driving a nice car? There’s more than likely pictures of money with some hints of green on it. This is designed to make you jealous to bring you one step closer to clicking that purchase button. It’s not because rich people are obsessed with the color green.

White – This is the most common background color used on websites. It represents peace or purity and isn’t threatening in any manner. It’s also used for religion, weddings and hospitals.

Black – This is the most depressing color on the list as people commonly think of death and formality with this color. However, for web design purposes, if used correctly, it can be a color of force or control.

Brown – This is not an appealing color for your website and in most cases should be avoided but it represents the Earth and health. It’s known to be stable or dependable.

Pink – The stereotypical color that is thought to be every woman’s favorite. Why are western women so attracted to the color pink? The reason for this is because pink is known to represent fun, childhood and sweetness. It’s also thought to be the color of femininity.

emotional-triggers-of-colors

Understanding It All and How to Use Different Colors

In order to effectively gauge what color scheme works best for your WordPress site, you need to understand the conversion funnel or at least have one mapped out. While the colors are being taken into consideration, there’s a specific process that happens when a user comes to your website. First, they have to become aware of the elements you want their attention drawn to.

Second, they need to become interested in what you’re selling. Third, they need to have the desire to press forward with the decision. Finally, there’s the conversion.

Awareness – This is essentially the marketing of your website or your brand. A brand can exist on its own but your website won’t get customers or traffic simply by existing. People need to be aware that your site exists and you need to understand your target audience in order to attract customers.

Interest – Once your visitors have landed on your site, you now need to interest them. You need to act fast because the average user only spends a few seconds on a website before they close the tab, creating a bounce. A bounce is when someone visits your page and leaves it without visiting any other links on the page. This negatively impacts your SEO. This stage should focus on the color scheme, your headlines, your images and compelling copy content.

Desire – Anyone can build interest in a product, if they weren’t interested already but now you need to give them the tool to want what you’re selling. You need to conclude with a multitude of different things in order to build desire other than your product simply existing. You need testimonials, you need a great color scheme that represents the mood of your product and audience and you should give the customers options.

When you’re planning out a site, it’s a general rule of thumb to have 3 different colors selected that best represents your demographic, your brand and your product. Not only do you want your design to be visually impressive but using the guide above, you want something that will positively impact their mood based on what you’re selling. For example, selling wedding services with a primarily black theme will tank your conversions.

You also have to take colors into consideration when designing your call to action button. The call to action button is when people finally reach the desire stage and are ready to purchase. This is the button clicked when they’re ready to make a purchase. Studies have shown that red call to action buttons have been the most effective for most websites.

Before you even begin, what is the goal of your website? What do you hope to accomplish?

One Time Sales – Are you hoping to capture customers for a one time sale?

Email Opt In – Do you hope to capture emails so that you can send our promotional offers and newsletters?

Recurring Sales – Do you hope to acquire customers for a monthly or yearly service?

Affiliation – Are you affiliating for another website and sending visitors to another sales page?

Maximizing your WordPress conversion rate has very little to do with your personal preferences. You really have to step into the mindset of your customers and think about what they want to see and what kind of tone you’re setting when someone first sees the website.

Share this

UKWebHostReview.com - Best Web Hosting Comparison