{"id":25518,"date":"2016-01-21T23:09:03","date_gmt":"2016-01-21T15:09:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25518"},"modified":"2022-10-18T20:12:30","modified_gmt":"2022-10-18T12:12:30","slug":"brand-wordpress-admin","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/","title":{"rendered":"10 Steps to Creating a Professional-Looking WordPress Admin"},"content":{"rendered":"

Whether you build WordPress sites for clients, have your own multi-authored blog<\/a>, or just want a more personalized look<\/a> for your site, there are many cases when you may want to change the design of the WordPress admin panel and the login page<\/strong>. You can install a pre-prepared admin theme plugin<\/a> for sure, but what if you want more freedom?<\/p>\n

Branding the WordPress admin is not just about design, it can be a smart way of self-promotion<\/strong> as well. In this post we will take a look at how you can customize the WordPress dashboard and the login page, add your own logo, remove or change menu items, remove links pointing to WordPress.org, and fine-tune many other admin settings with the help of the AG Custom Admin Panel<\/a> plugin.<\/p>\n

\"AG<\/a><\/figure>\n

1. Install the AG Custom Admin Plugin<\/h2>\n

First of all, navigate to the Plugins > Add New<\/code> admin menu item in your WordPress dashboard, search for the AG Custom Admin<\/strong> plugin, install and activate it. The plugin places a new submenu called AG Custom Admin<\/code> inside the Tools<\/code> menu, and a button onto the top Admin Bar to help you quickly reach the settings.<\/p>\n

\"Main<\/figure>\n

2. General Settings<\/h2>\n

In the first tab you can configure the General Settings. One of the great things about this plugin is that if you move the cursor over the option labels, a small tooltip pops up in which you can read more about that specific option.<\/p>\n

The first option in General Settings is the \u201cExclude AGCA admin from customizations\u201d where you can quickly switch on and off the customizations for admin users<\/strong>. This can be useful if you want users with the admin role to see the default WordPress dashboard<\/strong>.<\/p>\n

\"General<\/figure>\n

The next two settings hide or reveal the \u201cScreen Options\u201d and the \u201cHelp\u201d menu<\/strong> located on the top right corner of each admin page (see below). Too many choices can confuse less tech-savvy users, so it can be a good idea to get rid of these two options.<\/p>\n

\"Hide<\/figure>\n

General Settings also allow you to choose the WordPress capability<\/a> that gives users access to the settings of the plugin.<\/p>\n

3. Hide or Customize the Admin Bar<\/h2>\n

The Admin Bar Settings<\/strong> tab helps you hide or customize the admin bar, the horizontal menu on the top. You can completely hide it from the admin panel, and show only a stylish Log Out button<\/strong> on the top right corner.<\/p>\n

\"Admin<\/figure>\n

In other cases you may just want to simplify the admin bar by removing some of its less important items. The Admin Bar Settings have many options that allow you to hide each part one by one<\/strong>, customize the blog heading<\/strong>, add your own logo<\/strong> instead of the default WordPress logo, or completely remove it<\/strong>.<\/p>\n

On the screenshot below I modified the blog heading to \u201cChange View\u201d to indicate that this is the place where they can switch between the frontend and the backend.<\/p>\n

I also removed the WordPress logo altogether, but didn\u2019t replace it with the Hongkiat logo, as I\u2019ll rather add this to the vertical admin menu (Step 7). From the next step I\u2019ll go on with the completely removed admin bar.<\/p>\n

\"Modified<\/figure>\n

4. Brand The Footer<\/h2>\n

In the Admin Footer<\/strong> tab you can either completely remove the footer from the bottom of the admin panel, or change its text to whatever you want. It can be a good idea to place a link to the home page of your business<\/strong>, so your clients can quickly contact you if they need some support.<\/p>\n

\"Branded<\/figure>\n

5. Clean Up the Dashboard<\/h2>\n

The Dashboard Page Settings<\/strong> allow you to modify the home page of your admin panel. This is the screen with the dashboard widgets such as \u201cAt a Glance\u201d and \u201cWordPress News\u201d you see at first when you log in as an admin.<\/p>\n

In the first setting you can change the text of the heading<\/strong> from the word \u201cDashboard\u201d to your own brand name, and you can also add your custom content below it.<\/p>\n

It can definitely help users if you place a \u201cMore info\u201d link below the headline<\/strong> (as I did it on the screenshot below). This way they can easily reach you. A quick \u201cWelcome in our admin area\u201d intro can be useful as well.<\/p>\n

\"Dashboard<\/figure>\n

The AG Custom Admin plugin also makes it possible to hide the dashboard widgets<\/strong> one by one. I only leave two, to make my branded admin less cluttered. If you hide the widgets here they won\u2019t be available for users from the \u201cScreen Options\u201d menu<\/strong>.<\/p>\n

\"Dashboard<\/figure>\n

My customized WordPress dashboard looks like this right now, every reference to WordPress.org has disappeared, and it looks cleaner and more straightforward.<\/p>\n

\"Branded<\/figure>\n

6. Add Your Logo to the Login Page<\/h2>\n

The Login Page Settings<\/strong> allow you to customize the login page<\/strong> of your site, replace the WordPress logo with your own graphics, and hide or reveal the \u201cBack to blog\u201d, \u201cRegister\u201d, and \u201cLost Password\u201d links.<\/p>\n

\"Login<\/figure>\n

On the screenshot below you can see that just changing the logo and pointing the link behind it to your own site can give a customized look to the login page, and can definitely help promote your brand.<\/p>\n

\"Login<\/figure>\n

7. Change the Admin Menu on the Left<\/h2>\n

The Admin Menu can be found on the left side of the admin panel. It has many items, and even more subitems, many of which don\u2019t really have the most self-explanatory label. That can make the learning curve steep for non-tech people.<\/p>\n

The Admin Menu Settings<\/strong> help you quickly clean up the admin menu. You can remove the whole admin menu if you want, but it\u2019s probably better to just hide the items that your users won\u2019t need.<\/p>\n

\"Admin<\/figure>\n

You not only can make the top menu items invisible, but the submenus as well; just click on the top-level menu, and a handy dropdown list will appear. Moreover, you can rename the labels to something that is easier to understand<\/strong> for laypeople, just like I did it with the \u201cDashboard\u201d, \u201cMedia\u201d, and \u201cAppearance\u201d labels below.<\/p>\n

\"Admin<\/figure>\n

You can also change the basic design of the admin menu<\/strong> if you want. You can hide the icons, the menu item separators, the submenu arrow, and the \u201cCollapse menu\u201d button, add round the border of the submenus, and insert your own logo on top of the admin menu.<\/p>\n

\"Admin<\/figure>\n

For myself, I added a Hongkiat logo to the admin menu with a link behind it pointing to the homepage of hongkiat.com, which clearly brands the whole admin panel, but not in an intrusive way.<\/p>\n

I renamed 3 menu items (the new ones are \u201cAdmin Home\u201d, \u201cImages\u201d, and \u201cDesign\u201d), removed the \u201cPlugin\u201d menu altogether, and added a 10px radius to the corners of the submenu popups.<\/p>\n

Here is how it looks like:<\/p>\n

\"Branded<\/figure>\n

8. Colorize the Admin<\/h2>\n

The Colorizer<\/strong> tab allows you to spice up your WordPress admin by changing the text and background colours of the main elements<\/strong>. The colorizer function is real-time, so as you pick up a new colour you can see the change at once without saving the settings.<\/p>\n

Here I only modified the default background colour to light blue, so now it matches the royal blue of the Hongkiat logo, but you can alter other things if you want. It\u2019s probably a good idea to play around with the colours a bit to see what looks best where.<\/p>\n

\"Colorizer<\/figure>\n

You can not only change the colours of the admin panel, but also the background colour of the login page, too.<\/p>\n

\"Colorized<\/figure>\n

9. Add Your Custom Code<\/h2>\n

If you are an experienced front-end developer, you can add your custom CSS and JavaScript code to the admin area <\/strong>as well. With the help of your browser\u2019s developer tools you can easily grab the CSS selector of the element you want to modify.<\/p>\n

In this step, I make the panel on the login page a little bit wider with the help of the following code snippet:<\/p>\n

\r\n#login {\r\n\twidth: 480px;\r\n\tmax-width: 90%;\r\n\tmargin: 0 auto;\r\n}<\/pre>\n
\"Advanced<\/figure>\n
As you can see, the login panel has become wider but is still responsive thanks to the max-width<\/code> rule. Most likely this change will provide a better experience for most users. You can even save your custom code by exporting it into an .agca<\/code> file, and later importing it to other WordPress sites.<\/p>\n
\"Advanced<\/figure>\n
10. Install a Pre-Prepared Admin Theme<\/h2>\n
The last tab called Admin Themes<\/strong> allows you to install a pre-prepared admin theme on top of your settings. If you do so, you will lose the custom colours you set in the Colorizer tab, but still can keep other settings.<\/p>\n
Most of the admin themes here are not free (here are 10 WordPress admin themes<\/a> that are), but buying one can be a great way to support the authors of this awesome plugin<\/a>.<\/p>\n
\"Available<\/figure>","protected":false},"excerpt":{"rendered":"
Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many cases when you may want to change the design of the WordPress admin panel and the login page. You can install a pre-prepared admin theme plugin for sure, but what…<\/p>\n","protected":false},"author":146,"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,2873,252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Steps to Creating a Professional-Looking WordPress Admin - Hongkiat<\/title>\n<meta name=\"description\" content=\"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many\" \/>\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\/brand-wordpress-admin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Steps to Creating a Professional-Looking WordPress Admin\" \/>\n<meta property=\"og:description\" content=\"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/\" \/>\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=\"2016-01-21T15:09:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-18T12:12:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\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=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 Steps to Creating a Professional-Looking WordPress Admin\",\"datePublished\":\"2016-01-21T15:09:03+00:00\",\"dateModified\":\"2022-10-18T12:12:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/\"},\"wordCount\":1438,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brand-wordpress-admin\\\/ag-custom-admin.jpg\",\"keywords\":[\"ad-divi\",\"wordpress admin\",\"WordPress Tips\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/\",\"name\":\"10 Steps to Creating a Professional-Looking WordPress Admin - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brand-wordpress-admin\\\/ag-custom-admin.jpg\",\"datePublished\":\"2016-01-21T15:09:03+00:00\",\"dateModified\":\"2022-10-18T12:12:30+00:00\",\"description\":\"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brand-wordpress-admin\\\/ag-custom-admin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brand-wordpress-admin\\\/ag-custom-admin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brand-wordpress-admin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Steps to Creating a Professional-Looking WordPress Admin\"}]},{\"@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\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Steps to Creating a Professional-Looking WordPress Admin - Hongkiat","description":"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many","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\/brand-wordpress-admin\/","og_locale":"en_US","og_type":"article","og_title":"10 Steps to Creating a Professional-Looking WordPress Admin","og_description":"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many","og_url":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-01-21T15:09:03+00:00","article_modified_time":"2022-10-18T12:12:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 Steps to Creating a Professional-Looking WordPress Admin","datePublished":"2016-01-21T15:09:03+00:00","dateModified":"2022-10-18T12:12:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/"},"wordCount":1438,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg","keywords":["ad-divi","wordpress admin","WordPress Tips"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/","url":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/","name":"10 Steps to Creating a Professional-Looking WordPress Admin - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg","datePublished":"2016-01-21T15:09:03+00:00","dateModified":"2022-10-18T12:12:30+00:00","description":"Whether you build WordPress sites for clients, have your own multi-authored blog, or just want a more personalized look for your site, there are many","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/brand-wordpress-admin\/ag-custom-admin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/brand-wordpress-admin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Steps to Creating a Professional-Looking WordPress Admin"}]},{"@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\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6DA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25518","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\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25518"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25518\/revisions"}],"predecessor-version":[{"id":63064,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25518\/revisions\/63064"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25518"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}