WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add Custom Styles to WordPress Visual Editor

How to Add Custom Styles to WordPress Visual Editor

Last updated on September 7th, 2016 by Editorial Staff
294 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Custom Styles to WordPress Visual Editor

Do you want to add custom styles in the WordPress visual editor? Adding custom styles allows you to quickly apply formatting without switching to text editor. In this article, we will show you how to add custom styles to the WordPress visual editor.

Adding custom styles in WordPress visual editor

Note: This tutorial requires basic working knowledge of CSS.

Why and When You Need Custom Styles for WordPress Visual Editor

By default, WordPress visual editor comes with some basic formatting and style options. However, sometimes you may need custom styles of your own to add CSS buttons, content blocks, taglines, etc.

You can always switch from visual to text editor and add custom HTML and CSS. But if you regularly use some styles, then it would be best to add them into visual editor so that you can easily reuse them.

This will save you time spent on switching back and forth between text and visual editor. It will also allow you to consistently use the same styles throughout your website.

Most importantly, you can easily tweak or update styles without having to edit posts on your website.

Having said that, let’s take a look at how to add custom styles in WordPress visual editor.

Method 1: Add Custom Styles in Visual Editor Using Plugin

First thing you need to do is install and activate the TinyMCE Custom Styles plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » TinyMCE Custom Styles page to configure the plugin settings.

TinyMCE Custom Styles settings

The plugin allows you to choose the location of stylesheet files. It can use your theme or child theme’s stylesheets, or you can choose a custom location of your own.

After that, you need to click on the ‘Save All Settings’ button to store your changes.

Now you can add your custom styles. You need to scroll down a little to the style section and click on the Add new style button.

First you need to enter a title for the style. This title will be displayed in the drop down menu. Next, you need to choose whether it is an inline, block, or selector element.

After that add a CSS class and then add your CSS rules as shown in the screenshot below.

Adding a new custom style

Once you have added a CSS style, simply click on the ‘Save All Settings’ button to store your changes.

You can now edit an existing post or create a new one. You will notice a Format drop down menu in the second row of WordPress visual editor.

Custom style menu in TinyMCE

Simply select some text in the editor and then select your custom style from the Formats dropdown menu to apply it.

You can now preview your post to see that your custom styles are applied correctly.

Method 2: Manually Add Custom Styles to WordPress Visual Editor

This method requires you to manually add code to your WordPress files. If this is your first time adding code to WordPress, then please see our guide on adding code snippets from web into WordPress.

Step 1: Add a custom styles drop down menu in WordPress Visual Editor

First, we will add a Formats drop down menu in the WordPress visual editor. This drop down menu will then allow us to select and apply our custom styles.

You need to add the following code to your theme’s functions.php file or a site-specific plugin.

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Step 2: Add select options to drop down menu

Now you will need to add the options to the drop down menu you just created. You will then be able to select and apply these options from the Formats drop down menu.

For the sake of this tutorial, we are adding three custom styles to create content block and buttons.

You will need to add the following code to your theme’s functions.php file or a site-specific plugin.

/*
* Callback function to filter the MCE settings
*/

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

	$style_formats = array(  
/*
* Each array child is a format with it's own settings
* Notice that each array has title, block, classes, and wrapper arguments
* Title is the label which will be visible in Formats menu
* Block defines whether it is a span, div, selector, or inline style
* Classes allows you to define CSS classes
* Wrapper whether or not to add a new block-level element around any selected elements
*/
		array(  
			'title' => 'Content Block',  
			'block' => 'span',  
			'classes' => 'content-block',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blue Button',  
			'block' => 'span',  
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(  
			'title' => 'Red Button',  
			'block' => 'span',  
			'classes' => 'red-button',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

You can now add a new post in WordPress and click on the Formats drop down menu in the Visual editor. You will notice that your custom styles are now visible under formats.

However, selecting them does not make any difference in the post editor right now.

Step 3: Add CSS Styles

Now the final step is to add CSS style rules for your custom styles.

You will need to add this CSS into your theme or child theme’s style.css and editor-style.css files.

.content-block { 
    border:1px solid #eee; 
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right; 
    text-align:center;
}
.content-block:after { 
    clear:both;
} 
.blue-button { 
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

Custom styles in WordPress post editor

The editor stylesheet controls the appearance of your content in the visual editor. Check your theme’s documentation to find out the location of this file.

If your theme doesn’t have an editor stylesheet file, then you can always create one. Simply create a new CSS file and name it custom-editor-style.css.

You need to upload this file to your theme’s root directory and then add this code in your theme’s functions.php file.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

That’s all. You have successfully added your custom styles into WordPress visual editor. Feel free to play around with the code by adding your own elements and styles.

We hope this article helped you learn how to add custom styles to WordPress visual editor. You may also want to see our guide on how to add custom styles to WordPress widgets.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

294 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

49 Comments

Leave a Reply
  1. Toufic Ahemmed says:
    Apr 19, 2019 at 12:04 am

    This guys are awesome. they help me most of the time. thank you very very much.

    Reply
    • WPBeginner Support says:
      Apr 19, 2019 at 10:22 am

      Glad we could help :)

      Reply
  2. Aslan French says:
    Nov 24, 2018 at 6:37 pm

    This article should be updated with Gutenberg in mind, as this kind of functionality has been added to the Rich Text API recently.

    Reply
    • WPBeginner Support says:
      Nov 25, 2018 at 2:31 pm

      Hi Aslan,

      Thanks for the suggestion. We will definitely look into older articles once Gutenberg is out.

      Reply
  3. Mehrdad says:
    Jan 23, 2017 at 2:51 pm

    Thanks a lot.
    This article really helped me.

    Reply
  4. sabbi says:
    Dec 3, 2016 at 4:02 pm

    This adds classes to a p-tag doesnt it?
    Is there a way to even create own tags?
    Or another thing:will a chosen custom Format overwrite a previously chosen h-tag with a p? Would be necessary to prevent a client from getting in trouble when hes clicking around in the default AND custom styles.

    Reply
  5. Britany says:
    Nov 23, 2016 at 2:29 am

    Unfortunately this didn’t help me at all. Is there an article that explains what each of the fields you have to fill in mean?

    All I need is a way to apply the same formatting to quotes on my podcast show notes pages. Each quote is the the same font (that I have set-up as a headline style), bolded, and centered.

    I get tired of manually applying each part of the format to every quote and just a way to click one button and be done.

    Reply
  6. Syams says:
    Nov 22, 2016 at 10:36 am

    Please, tell me how to add a new font to WP visual editor.

    Reply
  7. Moya Nicholson says:
    Nov 7, 2016 at 11:43 am

    Thank you. Really helpful.

    Reply
  8. stanley says:
    Sep 30, 2016 at 3:16 pm

    I need to modify my theme WP

    hell me please

    Reply
  9. Sandy Connolly says:
    Aug 4, 2016 at 3:18 pm

    THANK YOU FOR THIS!!! OMG!!!! How helpful upon handing a site over to a client who wants to be able to add his/her own content based on our design!

    Reply
  10. Marcin says:
    Apr 21, 2016 at 2:39 pm

    Hi, I develop WordPresses every day and do everything with WP but this piece of code is one of the most useful I’ve seen for long time… It is exactly what default WYSIWYG is (now I can say: was) missing! It allows to do some stunnig things inside content field. Thank You for sharing!

    Reply
  11. Foxglove says:
    Apr 20, 2016 at 11:23 am

    I have been using this plugin for a while now, but it is no longer available from wordpress.org — apparently no longer updated or supported. Is anyone aware of any alternatives other than the manual method you describe?

    Reply
    • Lisa McMahon says:
      Jul 25, 2016 at 11:00 am

      Here’s an updated/forked version of the original plugin mentioned in the article: TinyMCE Custom Styles

      Reply
      • WPBeginner Support says:
        Sep 7, 2016 at 11:01 am

        Hey Lisa, thanks for pointing this out. We have updated the article with the updated/forked version.

        Reply
  12. Shubha Das says:
    Mar 16, 2016 at 5:27 pm

    I want to add p instead of span. But when I change block name span to p, it doesn’t work.

    ‘title’ => ‘Note’,
    ‘block’ => ‘p’,
    ‘classes’ => ‘note’,
    ‘wrapper’ => true,

    Reply
  13. MacKenzie says:
    Nov 29, 2015 at 4:19 pm

    I found this really helpful and I feel like I almost have it but it isn’t quite working yet. My text gets properly tagged with the span and class tags in the editor when selected – but none of the styles I put in the style sheet are being applied to the published note.

    Reply
  14. Frank says:
    Sep 22, 2015 at 10:50 am

    I always become nervous and feel like vomiting if some customer needs wordpress tweaks. Coll, this style pulldown BUT, as someone said before, completely useless if styles cannot be withdrawn afterwards and only add up, add up, add up…

    I’m used to these half baked sulotions in wordpress – normally there’s also a complementary half-baked solutions to half repair the first one. But here?

    Now HOW would you suggest TO REMOVE CUSTOM STYLES added via the styles pulldown. Code view is in no way acceptable for my client?

    I’d be unbelievably lucky if someone has found a way to do that and would share this knowledge (and for putting the catastrophe called wordpress out of my reach for( i hope) a very long time).

    Thanks a lot in advance!

    Frank

    Reply
    • Chris says:
      Nov 11, 2015 at 5:27 am

      Click on the style in the pulldown again. Done.

      Reply
  15. Shafi ken says:
    Sep 9, 2015 at 3:09 am

    Thanks for the helpful tutorial. Thanks

    Reply
  16. K Shazzad says:
    Sep 7, 2015 at 1:39 pm

    Whole tutorial worked flawlessly for me. Thanks a bunch ;)

    Reply
  17. Stef says:
    Aug 18, 2015 at 4:44 am

    I tried out this plugin but realized, that when you change a custom style, It won’t update those you inserted already. You have to go back and reinsert them, because the feature adds the style inline and not via stylesheet

    Reply
  18. Phil says:
    Jun 24, 2015 at 8:45 am

    Thanks for the helpful tutorial. Is there any performance penalty in using the plugin rather than hand-coding it? Thanks,

    Reply
    • WPBeginner Support says:
      Jun 24, 2015 at 12:22 pm

      No, but for reusing elements this method is quite handy. It is also useful, if you are building a site for a client and want them to be able to add things from the visual editor.

      Reply
  19. Sei says:
    May 27, 2015 at 6:19 am

    Thanks for the tutorial!
    Is there a way to add two markups at once? Like, getting something like text

    Reply
    • Sei says:
      May 27, 2015 at 6:21 am

      Okay, your comments converts HTML. I mean, I’d like to get both ‘h1’ and ‘span’ markups around my text by clicking on only one style.

      Reply
  20. Lily says:
    May 3, 2015 at 7:17 am

    I’ve managed to do the custom classes and the elements do show with the right classes in the text editor and on the page, but the class isn’t applied in the visual editor which makes it very unclear whether it’s worked or not for the user. Is there any way to fix that?

    Reply
  21. Bonnie Dasher-Andersen says:
    Apr 2, 2015 at 7:49 am

    I’ve added two custom styles. When I go to edit a page, I have two Format menus, each one with the same entries (the two styles that I created). When I try to apply these styles, nothing happens. I can see the tag in the Text view, but when I view the page – the style hasn’t been applied.

    Any suggestions? Need to figure this out for a client who will be updated this WP site and is not very savvy.

    Reply
    • Marcello says:
      Aug 10, 2015 at 10:39 am

      I had the same problem, where the tags weren’t applied to code. Fixed it by setting ‘wrapper’ to ‘false’. I don’t know the technical reasons, just tested and it worked. Hope it helps!

      Reply
      • hugotom says:
        Jul 6, 2016 at 12:00 pm

        I had the same problem that the style sheet is not recorded.
        Solution
        If you already have this recording style sheets in the functions.php file should add right there stylesheet custom-editor-style.css

        Example:

        function styles_theme(){
        wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’);
        wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’);
        wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’);
        wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // HERE
        };

        Reply
  22. Raphael Landau says:
    Mar 10, 2015 at 5:41 am

    I’ve used this and also had the issue where the style/class is implemented to the entire Paragraph. This is because you set the style format as “block”. (‘block’ => ‘span’,).

    Quickly visiting the official WordPress codex, discovers much more options for style formatting.

    http://codex.wordpress.org/TinyMCE_Custom_Styles

    Since span is an inline style be default, you should replace ‘block’ with ‘inline’, and viola! You’re styling should work as expected.

    so in short:

    array(
    ‘title’ => ‘Your Title’,
    ‘inline’ => ‘span’,
    ‘classes’ => ‘your-class’,
    ‘wrapper’ => true,
    ),

    Reply
  23. nemaha says:
    Feb 21, 2015 at 7:09 am

    Hi,
    great tutorial, thanks for that! I, too, have the problem, that style (a span) is applied to the whole paragraph. What I intend to do: Write a headline and format it as heading 1, then mark only one specific word within that headline to add a custom style. Any update on how to fix this? Thanks!

    Reply
  24. bekee says:
    Jan 28, 2015 at 3:26 pm

    i, too, have the problem where it applies the style to the whole paragraph, not just the selected element. any update on this? thanks!

    Reply
  25. Debbie says:
    Dec 17, 2014 at 3:33 pm

    Having the same issue. Highlight one word, but takes effect on entire paragraph.

    Reply
  26. James says:
    Nov 22, 2014 at 9:16 pm

    I find a couple of problems. It does seem to work, but not as expected. Will not do for someone who does not know code.

    1. Highlight a single word in a paragraph to add a but the is added to the entire paragraph, not just the highlighted word.
    2. No way to remove the css without editing code. My client does not do code! Even tried to make a class of .nothing but the new class is only added to any others, does not replace existing class.

    Reply
  27. WPBeginner Staff says:
    Oct 23, 2014 at 11:16 pm

    See our guide on how to fix common image issues in WordPress.

    Reply
  28. Sheikh Zuhaib Siddiqui says:
    Oct 22, 2014 at 7:57 pm

    Hey I have an error in add media. When I try to upload any media, there is only continue loading and not showing up any media and can upload media……………Let me know what the mistake here???

    But this is working fine …………just error in media uploader. please provide me this solution.

    Reply
  29. Marlice says:
    Oct 7, 2014 at 4:45 am

    Hi. Thank you for this great tutorial. I have a problem with content that is already in the editor. If I mark a word or a part of text and choose a style (for example “blue button” – from your code) it wraps not only the marked word or part of text. Instead it marks the whole content and put a span with the class .blue button on it. I tried it several times with other pages and posts – always the same: if the content was already there and I marked it, then the whole content get the span class. This does not happen if I wrap a new edited text in the page/post – than everything works fine. Does anybody has this phenomen too?
    Thank you,
    Ute

    Reply
  30. John-Henry Ross says:
    Sep 2, 2014 at 3:51 am

    Hi. I tried this method and it works like a charm, exactly what I was looking for, thank you. I just want to find out if there is a way to add styles to a subfolder instead of just adding it under a format button. E.g. add a headings subfolder with all heading stylings, add div submenu with div stylings, etc.

    Reply
  31. dave says:
    Aug 26, 2014 at 4:24 pm

    Thanks!
    It’s great to show 2 methods, too… my clients cower in fear at handling any code.

    I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind. :)

    Ciao, Dave

    Reply
  32. WPBeginner Staff says:
    Aug 1, 2014 at 5:49 pm

    you do not need to add the dot in

    classes’ => ‘.alert-blue’,

    It should be

    classes’ => ‘alert-blue’,

    Reply
    • Jeff Gaudette says:
      Aug 5, 2014 at 3:26 pm

      Sadly, this didn’t work. I removed the period, but still nothing applies in the editor. I know you’re not a help desk, but here’s a screenshot if you’re interested: http://screencast.com/t/JI0zMvcH

      Thanks for all the great stuff you put out!

      Reply
      • WPBeginner Staff says:
        Aug 5, 2014 at 8:11 pm

        Can you paste the code you added in your functions.php file. Also paste the CSS you are using for these buttons.

        Reply
        • Jeff Gaudette says:
          Aug 5, 2014 at 8:18 pm

          Sure. Functions:

          /*
          * Callback function to filter the MCE settings
          */

          function my_mce_before_init_insert_formats( $init_array ) {

          // Define the style_formats array

          $style_formats = array(
          // Each array child is a format with it’s own settings
          array(
          ‘title’ => ‘Alert’,
          ‘block’ => ‘span’,
          ‘classes’ => ‘entry p.alert-blue’,
          ‘wrapper’ => true,

          ),
          array(
          ‘title’ => ‘Alert Blue’,
          ‘block’ => ‘p’,
          ‘classes’ => ‘alert-blue’,
          ‘wrapper’ => true,
          ),
          array(
          ‘title’ => ‘Blue Button’,
          ‘block’ => ‘span’,
          ‘classes’ => ‘alert-blue-button’,
          ‘wrapper’ => true,
          ),
          );
          // Insert the array, JSON ENCODED, into ‘style_formats’
          $init_array[‘style_formats’] = json_encode( $style_formats );

          return $init_array;

          }
          // Attach callback to ‘tiny_mce_before_init’
          add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );

          CSS

          .alert-blue{
          background: none repeat scroll 0 0 #E7F4FD;
          border: 1px solid #C5D7E3;
          color: #3A5971;
          font-size: 18px;
          line-height: 24px;
          text-align: center;
          margin: 0 0 15px !important;
          padding: 15px 25px;
          width: auto;
          }

  33. WPBeginner Staff says:
    Aug 1, 2014 at 5:46 pm

    Did you add the CSS in your stylesheet?

    Make sure that the style rules you add in your CSS match the classes you add in the Callback function to filter the MCE settings.

    Reply
  34. Kemi O says:
    Jul 31, 2014 at 5:46 pm

    TinyMCE Advanced Professsional Formats and Styles is only supported up to WP version 3.6.1

    Reply
  35. Keely Worth says:
    Jul 30, 2014 at 8:56 am

    I avoid the Visual Editor like the plague! Only use it if I have to switch to it to use a theme’s built-in shortcode button. Otherwise – never use it.

    Reply
  36. Blair2004 says:
    Jul 29, 2014 at 11:01 am

    I have tried first method, new style are available but, while i’m selecting one, nothing happens…

    Reply
  37. Jeff Gaudette says:
    Jul 29, 2014 at 10:51 am

    I am trying to do this with a block and having no luck. Code is:

    array(
    ‘title’ => ‘Alert Blue’,
    ‘block’ => ‘p’,
    ‘classes’ => ‘.alert-blue’,
    ‘wrapper’ => true,
    ),

    It works when I use span, but this necessitates a span class, which I can’t use.

    When i use the above code, nothing happens in the wp editor. I select the text, click the Alert Blue formatting option and nothing happens: http://screencast.com/t/dijujZ2ZdqBy

    Any advice?

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
DreamPress
DreamPress Coupon
Get up to 16% OFF on DreamPress's powerful WordPress Hosting.
Photocrati Coupon
Get 20% off on Photocrati premium photography theme for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.