{"id":22733,"date":"2014-12-11T18:01:06","date_gmt":"2014-12-11T10:01:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22733"},"modified":"2025-04-04T02:01:43","modified_gmt":"2025-04-03T18:01:43","slug":"create-wordpress-shortcodes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/","title":{"rendered":"How To Create Your Own WordPress Shortcodes"},"content":{"rendered":"

Shortcodes<\/a> are a very powerful feature of WordPress. In essence a shortcode is a placeholder<\/strong> for some other content. A well-known shortcode is the built-in gallery shortcode. Just type <\/code> into the WordPress editor and it will be replaced by a gallery of images taken from media uploaded to the post.<\/p>\n

Although the media uploader gives you a nice interface to create a gallery, behind the scenes however, a shortcode is built, something like this: <\/code>. Depending on your theme this may look different on your installation but one possible output would be something like this:<\/p>\n

<\/p>\n

The HTML you would need to write to make this happen is pretty hefty; using the shortcode makes it considerably faster. If you need to do any repetitive tasks in the post editor or you need a specific HTML format which takes a while to mark up, you may find that your own shortcode can help.<\/p>\n

In this article I\u2019ll show you how shortcodes work <\/strong>and how you can create your own<\/strong> through some easy examples.<\/p>\n

The Basics Of Shortcodes<\/h2>\n

As I mentioned, shortcodes essentially get replaced by some other content you define. Let\u2019s take a look at the basics through an example. Let\u2019s assume that throughout your post you want to reference the owner of the website.<\/p>\n

\"According to our company\u2019s owner \u2013 Daniel Pataki \u2013 the main goal of the website is to generate lots of money. Daniel Pataki thinks that sharing is also important.\"<\/p>\n

Instead of writing \"Daniel Pataki\" we could use a shortcode.<\/p>\n

\"According to our company\u2019s owner \u2013 [owner] \u2013 the main goal of the website is to generate lots of money. [owner] thinks that sharing is also important.\"<\/p>\n

This would allow us to change the name of the owner in one location, so in the event that the owner changes, all instances of our shortcode would use the new name.<\/p>\n

Coding this is actually pretty simple. We\u2019ll need to use the add_shortcode()<\/code> function to tell WordPress about our shortcode, and then create our function to handle the output:<\/p>\n

\r\nadd_shortcode( 'owner', \u2018owner_output' );\r\n    function owner_output() {\r\n    return \u2018Daniel Pataki';\r\n}<\/pre>\n
Note that this code should be added to your theme\u2019s functions.php file or your plugin\u2019s files<\/strong>. If you are using a third party theme I recommend using a child theme<\/a>.<\/p>\n
The add_shortcode function requires 2 parameters: the first parameter is the shortcode WordPress tries to match \u2014 this is what you write between the square brackets \u2014 the second parameter is the name of the function which handles the output, which is completely up to us.<\/p>\n
Inside our output handling function we need to return the output that we want to replace our shortcode.<\/p>\n
Shortcode Attributes<\/h2>\n
It is important to be aware that our shortcodes can use attributes as well. For instance, if you want to make sure that the owner of the website is shown in bold, you can make this happen by creating a attribute named \"bold\" and when that is set to true, the appropriate HTML tags will be added.<\/p>\n
\r\nadd_shortcode( 'owner', \u2018owner_output' );\r\nfunction owner_output( $atts ) {\r\n    $atts = shortcode_atts( array(\r\n        \u2018bold' => false\r\n    ), $atts );\r\n    if( $atts[\u2018bold'] == true  ) {\r\n        return \u2018<strong>Daniel Pataki<\/strong>';\r\n    }\r\n    else {\r\n        return \u2018Daniel Pataki';\r\n    }\r\n}<\/pre>\n
This looks a lot more intimidating, but in reality it\u2019s fairly straightforward. First of all, start out with visualizing how your shortcode would be used. When typing your shortcode you would do this:<\/p>\n
[owner bold='true']<\/code><\/p>\n
We now know that we\u2019re going to have an attribute named \"bold\".<\/p>\n
In our output handling function we use the shortcode_atts()<\/code> function to parse out all the attributes and give some of them default values. We are making sure that if you don\u2019t specify what the value of \"bold\" is, then it is set to false.<\/p>\n
Next we just take a look at the value of the bold attribute. If it is true we return the name of the owner in a strong tag, otherwise we just return it as is.<\/p>\n
Shortcode Content<\/h2>\n
Shortcode content is usually used when a bit of content needs to receive special HTML formatting. Let\u2019s assume that your website uses fancy titles like this:<\/p>\n
<h1><span class=\"fa fa-check\"><\/span>My Title<\/h1><\/pre>\n
This is a special title which is a level one heading and contains an icon as well. We could create this as a shortcode using the following formatting:<\/p>\n
[title icon='check']My Title[\/title]<\/code><\/p>\n
Note that we\u2019re using an opening shortcode tag which has some parameters and a closing shortcode tag. The content within (My Title) is passed to our output generating function as the second parameter.<\/p>\n
\r\nadd_shortcode( \u2018title', \u2018title_output' );\r\nfunction title_output( $atts, $content ) {\r\n    $atts = shortcode_atts( array(\r\n        \u2018icon' => \u2018pencil'\r\n    ), $atts );\r\n    return \u2018<h1><span class=\"fa fa-' . $atts[\u2018icon'] . '\">' . $content . \u2018<\/h1>';\r\n}\r\n<\/pre>\n
As you can see, the default icon is \"pencil\", unless it is defined in the shortcode. The content is passed as the second parameter and is used as the content inside the level one heading.<\/p>\n
Practical Uses<\/h2>\n
There are a great number of uses for shortcodes from placing sliders and galleries into posts, to countdown timers and other dynamic content. These usually require some Javascript and CSS to work well. In these cases it is up to your imagination and your coding chops.<\/p>\n
There are a number of things you can do to make your life easier (even as a non coder), such as to simplify the editing and writing process. Let\u2019s say you write game reviews and in each one you need to enter a table like this:<\/p>\n
\r\n<table>\r\n<tr>\r\n    <th>Title<\/th>\r\n    <th>Developer<\/th>\r\n    <th>Genre<\/th>\r\n    <th>Price<\/th>\r\n    <th>Our Verdict<\/th>\r\n<\/tr>\r\n<tr>\r\n    <td>Never Alone<\/td>\r\n    <td>Upper One Games<\/td>\r\n    <td>Indie Casual Adventure<\/td>\r\n    <td>$14.99<\/td>\r\n    <td>5\/5<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/pre>\n
Even if you copy-paste this from article to article, it\u2019s a fair amount of mucking about compared to the amount of content you are adding. You could use a simple shortcode to get the job done:<\/p>\n
[final_table title=\"Never Alone\" dev=\"Upper One Games\" genre=\"Upper One Games\" price=\"14.99\" rating=\"5\"]<\/code><\/p>\n
Your shortcode output function would be responsible for adding the whole table and other bits of content around this information, something like this:<\/p>\n
\r\nadd_shortcode( \u2018final_table', \u2018final_table_output');\r\nfunction final_table_output( $atts ) {\r\nreturn \u2018\r\n<table>\r\n<tr>\r\n    <th>Title<\/th>\r\n    <th>Developer<\/th>\r\n    <th>Genre<\/th>\r\n    <th>Price<\/th>\r\n    <th>Our Verdict<\/th>\r\n<\/tr>\r\n<tr>\r\n    <td>' . $atts[\u2018title'] . '<\/td>\r\n    <td>' . $atts[\u2018dev'] . '<\/td>\r\n    <td>' . $atts[\u2018genre'] . '<\/td>\r\n    <td>$' . $atts[\u2018price'] . '<\/td>\r\n    <td>5\/' . $atts[\u2018rating'] . '<\/td>\r\n<\/tr>\r\n<\/table>\r\n';\r\n}<\/pre>\n
The Christmas Easter Egg<\/h2>\n
So you got this far and it\u2019s nearing Christmas time so I thought I\u2019d include a little easter egg. The Christmas Countdown Widget<\/a> is a plugin which gives you the opportunity to add a Santa-themed Christmas countdown to your website as a sidebar widget or as a shortcode.<\/p>\n
<\/p>\n
Install, activate and use [countdown]<\/code> anywhere in your post content to add Mr. Clause to your post.<\/p>\n
Conclusion<\/h2>\n
I think shortcodes are great because they allow non-coders to simplify their workflows and can increase in complexity as you expand your coding knowledge. I suggest trying to create a shortcode here and there as you have more complex needs.<\/p>\n
For a list of all default shortcodes take a look at the Shortcode<\/a> section in the WordPress codex. For more information take a look at the Codex<\/a>, and you may also want to bookmark the Shortcode Generator<\/a> which can save you a few keystrokes when creating your generator functions.<\/p>","protected":false},"excerpt":{"rendered":"
Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the built-in gallery shortcode. Just type into the WordPress editor and it will be replaced by a gallery of images taken from media uploaded to the post. Although the media uploader gives…<\/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,252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow To Create Your Own WordPress Shortcodes - Hongkiat<\/title>\n<meta name=\"description\" content=\"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the\" \/>\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\/create-wordpress-shortcodes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Your Own WordPress Shortcodes\" \/>\n<meta property=\"og:description\" content=\"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/\" \/>\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=\"2014-12-11T10:01:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:01:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/\"},\"author\":{\"name\":\"Daniel Pataki\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\"},\"headline\":\"How To Create Your Own WordPress Shortcodes\",\"datePublished\":\"2014-12-11T10:01:06+00:00\",\"dateModified\":\"2025-04-03T18:01:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/\"},\"wordCount\":1070,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-wordpress-shortcodes\\\/wordpress-gallery.jpg\",\"keywords\":[\"ad-divi\",\"WordPress Tips\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/\",\"name\":\"How To Create Your Own WordPress Shortcodes - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-wordpress-shortcodes\\\/wordpress-gallery.jpg\",\"datePublished\":\"2014-12-11T10:01:06+00:00\",\"dateModified\":\"2025-04-03T18:01:43+00:00\",\"description\":\"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-wordpress-shortcodes\\\/wordpress-gallery.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-wordpress-shortcodes\\\/wordpress-gallery.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-wordpress-shortcodes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create Your Own WordPress Shortcodes\"}]},{\"@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 Create Your Own WordPress Shortcodes - Hongkiat","description":"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the","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\/create-wordpress-shortcodes\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Your Own WordPress Shortcodes","og_description":"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the","og_url":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-12-11T10:01:06+00:00","article_modified_time":"2025-04-03T18:01:43+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/"},"author":{"name":"Daniel Pataki","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc"},"headline":"How To Create Your Own WordPress Shortcodes","datePublished":"2014-12-11T10:01:06+00:00","dateModified":"2025-04-03T18:01:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/"},"wordCount":1070,"commentCount":12,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.jpg","keywords":["ad-divi","WordPress Tips"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/","url":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/","name":"How To Create Your Own WordPress Shortcodes - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.jpg","datePublished":"2014-12-11T10:01:06+00:00","dateModified":"2025-04-03T18:01:43+00:00","description":"Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-wordpress-shortcodes\/wordpress-gallery.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-wordpress-shortcodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create Your Own WordPress Shortcodes"}]},{"@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-5UF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22733","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=22733"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22733\/revisions"}],"predecessor-version":[{"id":73719,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22733\/revisions\/73719"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22733"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}