How to add an Emoji to your WordPress blog

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Comments

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}, 50);}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

With so many major holidays coming at the end of the year, you may want to get festive with your posts!

Maybe you just want to end all of your blog posts with a quick smiley face. Maybe you are trying to be trendy and use emoji to gain the attention of a youthful audience.

For an easy WordPress solution to emoji, it all starts with the free, open source Emoji One software and the Emoji One WordPress plugin..

Update: Emoji Support added in WordPress 4.2

While you can still use some of the tools below to add emoji to older WordPress installs (it is always recommended to keep your WordPress website updated), native emoji support was added to WordPress core with WordPress 4.2.

How to add Emoji in WordPress 4.2

To add emoji, it depends on the device you are using. If you are using a mobile phone or tablet and the WordPress app or a WordPress browser, you can simply add emoji like you would if you were texting someone, by choosing the proper keyboard.

If you are using a desktop, to add emoji in WordPress one of the easiest ways is to go to GetEmoji.com and right-click / copy the emoji that you want to use. Then, you can simply paste it into the Visual editor on the WordPress page or post editor. YOu can paste by right-clicking on the content area and selecting “paste” or by using your paste command (usually Command+V on Mac or CTL+V on Windows).

Again, you will need WordPress 4.2 or later to use this functionality.

Free Emoji Plugin for WordPress – WP Emoji One

Emoji One is an open source Emoji project that allows you free reign over use of the icons given. Unlike the emoji you may be used to from Apple and now Android devices, Emoji One is a different character set of emoji. There is a full list of emoji supported by the project here.

There is also a free WordPress plugin for Emoji One creatively titled WP Emoji One.

This plugin can be found in the WordPress repository or searched from the “Add New” section of the plugin tab from your WordPress dashboard.

Once you have installed the plugin on the WordPress website of choice, there are no additional settings to be modified. The emoji are automatically placed into your WordPress website as images by using the plugin.

How to use WP Emoji One

Using WP Emoji One is very simple. It works right from a post or page of WordPress.

With WP Emoji One installed and activated, there will be a new icon on your toolbar that looks like a smiley-face emoji. You will want to click on this.

From here, you simply click on the emoji that you would like to add to your page and it is placed into the content area like a normal image.

Editing an emoji on WordPress

Resizing and editing the emoji is very easy to do. There are three different ways to do it!

1) The recommended option is to size the image before you place it into the page content. Before you select your image, you will see a dropdown to choose the size of the image. These are recommended sizes provided by the plugin author.

2) The second option is to edit the image like you would a traditional image in WordPress. Once the image has been placed in the content, you can drag the height and width of the image or even set it’s alignment and alt tags by clicking on the pencil icon (found after hovering over the image).

3) If you are more web savvy, you can also navigate to the “Text” portion of the Content editor and modify the link, size, alignment, and padding with code. The big benefit here is easy alignment of padding, or how spaced apart the emoji are going to be on the blog.

Emoji code in the text editor of WordPress.

NOTE: With options 2 or 3, it is important to not make the emoji too large, as the image will get pixelated. It is best to stay within and under the recommended 64 pixel height and width designated by the plugin and icons.

Ok, where are the holiday emoji?!

Here is a list and reference to some of our favorite holiday emoji! Search for them using WP Emoji One and put them into your WordPress blog!

:gift:
:christmas_tree:
:santa:
:ghost:
:jack_o_lantern:
:cookie:
:snowflake:
:snowman:
:chestnut:
:evergreen_tree:
:leaves:
:maple_leaf:
:yum:

Adding Emoji to your WordPress website

That should cover our tutorial on how to add emoji and specifically holiday emoji to your blog posts and pages. If you have any questions or recommendations for emoji solutions, let us know in the comments below!

For now we will leave you with this!

FUN FACT: Emoji literally means “picture letter” in Japanese, where the little icons originated.

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Share Tweet Share