{"id":23019,"date":"2015-01-05T21:01:05","date_gmt":"2015-01-05T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23019"},"modified":"2025-04-04T02:01:55","modified_gmt":"2025-04-03T18:01:55","slug":"wordpress-tinymce-editor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/","title":{"rendered":"How to Use and Customize the TinyMCE Editor in WordPress"},"content":{"rendered":"

Many WordPress users are familiar with the TinyMCE editor<\/strong>, even if they don\u2019t know it by name. It\u2019s the editor you use to create or edit content, featuring buttons for bold text, headings, text alignment, and more. In this guide, we\u2019ll explore how to add functionality<\/strong> to the TinyMCE editor and how to integrate it into your WordPress plugins<\/strong>.<\/p>\n

The TinyMCE editor is built on a platform-independent JavaScript system called TinyMCE<\/a>, which is widely used across the Web. WordPress provides a great API that allows you to create custom buttons and integrate the editor into other parts of WordPress.<\/p>\n

Adding Available Buttons<\/h2>\n

WordPress disables some TinyMCE buttons \u2013 such as superscript, subscript, and horizontal rules \u2013 to simplify the interface. However, these buttons can be easily added back.<\/p>\n

Start by creating a plugin. You can find detailed instructions in the WordPress Codex<\/a>. In brief, create a folder named \u2018my-mce-plugin\u2019 in the wp-content\/plugins directory. Then, create a file with the same name, using a PHP extension: my-mce-plugin.php<\/strong>.<\/p>\n

Paste the following code inside that file:<\/p>\n

\r\n<?php\r\n\/**\r\n * Plugin Name: My TinyMCE Plugin\r\n * Description: A plugin for adding custom functionality to the WordPress TinyMCE editor.\r\n *\/\r\n<\/pre>\n
After saving the file, activate the plugin in WordPress. From this point forward, any additional code can be placed inside this file.<\/p>\n
Now, let\u2019s enable some of the built-in but hidden buttons. Here\u2019s the code to enable the superscript, subscript, and horizontal rule buttons:<\/p>\n
\r\nadd_filter( 'mce_buttons_2', 'my_tinymce_buttons' );\r\nfunction my_tinymce_buttons( $buttons ) {\r\n    $buttons[] = 'superscript';\r\n    $buttons[] = 'subscript';\r\n    $buttons[] = 'hr';\r\n    return $buttons;\r\n}\r\n<\/pre>\n
\"Example<\/figure>\n
For a full list of available buttons and their names, refer to the TinyMCE documentation<\/a>.<\/p>\n
Creating Custom Buttons<\/h2>\n
Let\u2019s explore how to create custom buttons from scratch. For instance, if you\u2019re using Prism<\/a> for code highlighting, you\u2019ll often need to wrap your code within <code><\/code> and <pre><\/code> tags. Here\u2019s an example:<\/p>\n
\r\n<pre><code>$variable = 'value'<\/code><\/pre>\r\n<\/pre>\n
We can create a button to automate this process!<\/p>\n
This involves three steps: adding a button, loading a JavaScript file, and writing the content of the JavaScript file. Let\u2019s walk through it:<\/p>\n
To add the button and load the JavaScript file, use the following code:<\/p>\n
\r\nadd_filter( 'mce_buttons', 'pre_code_add_button' );\r\nfunction pre_code_add_button( $buttons ) {\r\n    $buttons[] = 'pre_code_button';\r\n    return $buttons;\r\n}\r\n\r\nadd_filter( 'mce_external_plugins', 'pre_code_add_javascript' );\r\nfunction pre_code_add_javascript( $plugin_array ) {\r\n    $plugin_array['pre_code_button'] = get_template_directory_uri() . '\/tinymce-plugin.js';\r\n    return $plugin_array;\r\n}\r\n<\/pre>\n
It\u2019s important to ensure that the button name added in the pre_code_add_button()<\/code> function matches the key in the $plugin_array<\/code> variable within the pre_code_add_javascript()<\/code> function<\/strong>. Also, you\u2019ll need to use this same string in your JavaScript file later.<\/p>\n
Some tutorials recommend using an additional admin_head<\/code> hook to finalize the setup, but this is not necessary and should be avoided as it\u2019s not part of the official Codex.<\/p>\n
Next, let\u2019s write the JavaScript to implement the button\u2019s functionality. The following code adds <pre><\/code> and <code><\/code> tags around selected text:<\/p>\n
\r\n(function() {\r\n    tinymce.PluginManager.add('pre_code_button', function( editor, url ) {\r\n        editor.addButton( 'pre_code_button', {\r\n            text: 'Prism',\r\n            icon: false,\r\n            onclick: function() {\r\n                var selected = tinyMCE.activeEditor.selection.getContent();\r\n                var content = '<pre><code>' + selected + '<\/code><\/pre>';\r\n                editor.insertContent( content + \"\\n\" );\r\n            }\r\n        });\r\n    });\r\n})();\r\n<\/pre>\n
The button\u2019s name (pre_code_button<\/code>) is used in lines 2 and 3. The value of the text<\/code> property will be displayed if no icon is used. The onclick<\/code> method defines the button\u2019s behavior, which in this case, wraps the selected text in the necessary HTML tags.<\/p>\n
To display this icon, attach a stylesheet to your plugin and add the following CSS:<\/p>\n
\r\nadd_action( 'admin_enqueue_scripts', 'pre_code_styles' );\r\nfunction pre_code_styles() {\r\n    wp_enqueue_style( 'pre_code_button', plugins_url( '\/style.css', __FILE__ ) );\r\n}\r\n<\/pre>\n
In your JavaScript file, replace \u201cfalse\u201d in the icon<\/code> property with the class name you\u2019d like your button to have, such as pre_code_button<\/code>.<\/p>\n
Next, create a style.css file in your plugin directory and add this CSS:<\/p>\n
\r\ni.mce-i-pre_code_button:before {\r\n    font-family: dashicons;\r\n    content: \"\\f475\";\r\n}\r\n<\/pre>\n
\"TinyMCE<\/figure>\n
The button will receive the mce-i-[your class here]<\/code> class, which you can use for styling. Set the font to Dashicons and the content to the unicode value of the icon.<\/p>\n
Using TinyMCE Elsewhere<\/h2>\n
Plugins often create textareas for entering longer text<\/strong>. Wouldn\u2019t it be great if you could use TinyMCE there too? Luckily, you can, and it\u2019s straightforward to implement. The wp_editor()<\/code> function allows you to place a TinyMCE editor anywhere in the admin area. Here\u2019s what it looks like:<\/p>\n
\r\nwp_editor( $initial_content, $element_id, $settings );\r\n<\/pre>\n
The first parameter sets the initial content for the editor<\/strong>, which can be loaded from a database option, for example. The second parameter sets the ID of the HTML element. The third parameter is an array of settings. For more details on the available settings, refer to the WordPress Editor documentation<\/a>.<\/p>\n
The most important setting is textarea_name<\/code>, which sets the name attribute of the textarea element, making it easier to save the data. Here\u2019s how my editor looks when used in an options page:<\/p>\n
\r\n$settings = array( 'textarea_name' => 'buyer_bio' );\r\nwp_editor( get_option('buyer_bio'), 'buyer_bio', $settings );\r\n<\/pre>\n
This is equivalent to writing the following code, which generates a simple textarea:<\/p>\n
\n<textarea id='buyer_bio' class='buyer_bio'><?php echo get_option \n<\/pre>","protected":false},"excerpt":{"rendered":"
Many WordPress users are familiar with the TinyMCE editor, even if they don\u2019t know it by name. It\u2019s the editor you use to create or edit content, featuring buttons for bold text, headings, text alignment, and more. In this guide, we\u2019ll explore how to add functionality to the TinyMCE editor and how to integrate it…<\/p>\n","protected":false},"author":143,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[4663,2604],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Use and Customize the TinyMCE Editor in WordPress - Hongkiat<\/title>\n<meta name=\"description\" content=\"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use and Customize the TinyMCE Editor in WordPress\" \/>\n<meta property=\"og:description\" content=\"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-05T13:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:01:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg\" \/>\n<meta name=\"author\" content=\"Daniel Pataki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Pataki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/\"},\"author\":{\"name\":\"Daniel Pataki\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\"},\"headline\":\"How to Use and Customize the TinyMCE Editor in WordPress\",\"datePublished\":\"2015-01-05T13:01:05+00:00\",\"dateModified\":\"2025-04-03T18:01:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/\"},\"wordCount\":721,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-tinymce-editor\\\/image01.jpg\",\"keywords\":[\"ad-divi\",\"wordpress editors\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/\",\"name\":\"How to Use and Customize the TinyMCE Editor in WordPress - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-tinymce-editor\\\/image01.jpg\",\"datePublished\":\"2015-01-05T13:01:05+00:00\",\"dateModified\":\"2025-04-03T18:01:55+00:00\",\"description\":\"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-tinymce-editor\\\/image01.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-tinymce-editor\\\/image01.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-tinymce-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use and Customize the TinyMCE Editor in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\",\"name\":\"Daniel Pataki\",\"description\":\"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.\",\"sameAs\":[\"http:\\\/\\\/danielpataki.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/danielpataki\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use and Customize the TinyMCE Editor in WordPress - Hongkiat","description":"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use and Customize the TinyMCE Editor in WordPress","og_description":"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,","og_url":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-01-05T13:01:05+00:00","article_modified_time":"2025-04-03T18:01:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg","type":"","width":"","height":""}],"author":"Daniel Pataki","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Daniel Pataki","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/"},"author":{"name":"Daniel Pataki","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc"},"headline":"How to Use and Customize the TinyMCE Editor in WordPress","datePublished":"2015-01-05T13:01:05+00:00","dateModified":"2025-04-03T18:01:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/"},"wordCount":721,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg","keywords":["ad-divi","wordpress editors"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/","url":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/","name":"How to Use and Customize the TinyMCE Editor in WordPress - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg","datePublished":"2015-01-05T13:01:05+00:00","dateModified":"2025-04-03T18:01:55+00:00","description":"Many WordPress users are familiar with the TinyMCE editor, even if they don't know it by name. It's the editor you use to create or edit content,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tinymce-editor\/image01.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use and Customize the TinyMCE Editor in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc","name":"Daniel Pataki","description":"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.","sameAs":["http:\/\/danielpataki.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/danielpataki\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Zh","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/143"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23019"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23019\/revisions"}],"predecessor-version":[{"id":73721,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23019\/revisions\/73721"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23019"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you prefer to use an icon, you can select one from the Dashicons set included with WordPress. The Developer Reference<\/a> has a tool to find icons and their corresponding CSS\/HTML code. For example, the code symbol\u2019s unicode is f475<\/strong>.<\/p>\n