{"id":14099,"date":"2012-06-28T21:01:10","date_gmt":"2012-06-28T13:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14099"},"modified":"2025-04-04T01:10:02","modified_gmt":"2025-04-03T17:10:02","slug":"css-grid-wordpress","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/","title":{"rendered":"How to Integrate Simple CSS Grid Layouts into WordPress"},"content":{"rendered":"

Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you\u2019ll learn step-by-step how to quickly set up a lightweight and easy-to-modify grid system in WordPress. We\u2019ll keep the design simple so we can focus on the tools needed to set up your grid, but remember, you can style the grid yourself if needed.<\/p>\n

We\u2019ll be using the default Pool theme in WordPress for this tutorial to demonstrate a \u201cstart from scratch\u201d approach to getting the grids just right.<\/p>\n

Step 1: Determine Your Grid Width<\/h2>\n

Before starting, you need to determine how wide your grid needs to be. For my WordPress site, I found that the width of my main column is 450px by using Google Chrome\u2019s \u201cInspect Element\u201d feature, which you can access by right-clicking on an object. This is the fastest way I\u2019ve found to quickly determine the width and height of an object on a web page.<\/p>\n

\"Inspecting<\/figure>\n

Step 2: Use a Grid Designer<\/h2>\n

Instead of building a grid by hand, which is possible if you prefer, I recommend using one of the many available grid generator tools. For this tutorial, I\u2019ll be using the grid generator by MindPlay<\/a>. It\u2019s a very simple and lightweight grid generator.<\/p>\n

\"MindPlay<\/figure>\n

I want a three-column display, and I need to ensure my grid width is set to 450 pixels. Adjust the settings accordingly, then skip to the \u201cExport\u201d tab. We won\u2019t cover the typography<\/strong> features in this tutorial, but they\u2019re worth exploring on your own.<\/p>\n

\"Adjusting<\/figure>\n

In the Export tab, use the top-most \u201cStyle Sheet\u201d frame and scroll down until you see the \u201cGrid\u201d comment. Copy everything from this comment to the bottom of the frame. It should only be about 30 lines of code.<\/p>\n

\"Copying<\/figure>\n

Step 3: Update Your WordPress Stylesheet<\/h2>\n

Log in to your WordPress site and navigate to Appearance > Editor.<\/p>\n

\"WordPress<\/figure>\n

At the bottom-right of the Editor panel, you\u2019ll see a Styles.css<\/em> file (or something similar, depending on your theme). Click it to open.<\/p>\n

\"Opening<\/figure>\n

Scroll to the bottom of the stylesheet and paste the code you copied from MindPlay.dk:<\/p>\n

\"Pasting<\/figure>\n

Step 4: Implement the Grid<\/h2>\n

To use the grid, create a <div><\/code> with the class \u201cgrid\u201d. Each area of the grid is defined in the CSS. Open up a new page or post in WordPress. Switch to the HTML tab to start building your grid.<\/p>\n

\"Creating<\/figure>\n

Here is some sample code to get you started:<\/p>\n

\r\n<div class=\"grid\">\r\n  <p class=\"grid-m1\"> <\/p>\r\n  <p class=\"grid-c1\">Left Column<\/p>\r\n  <p class=\"grid-m2\"> <\/p>\r\n  <p class=\"grid-c2\">Middle Column<\/p>\r\n  <p class=\"grid-m3\"> <\/p>\r\n  <p class=\"grid-c3\">Right Column<\/p>\r\n  <p class=\"grid-m4\"> <\/p>\r\n<\/div>\r\n<\/pre>\n
Here\u2019s what it looks like in WordPress:<\/p>\n
\"Grid<\/figure>\n
Save or update the page and check the results. In my case, this is the home page for the site:<\/p>\n
\"Three<\/figure>\n
As you can see, we have our three columns, and everything is right where we expect it to be. You can add as many rows as you\u2019d like by starting with the following code:<\/p>\n
\r\n<div class=\"grid\">\r\n\r\n  <!-- Row #1 -->\r\n  <p class=\"grid-m1\"><\/p>\r\n  <p class=\"grid-c1\">Left Column<\/p>\r\n  <p class=\"grid-m2\"><\/p>\r\n  <p class=\"grid-c2\">Middle Column<\/p>\r\n  <p class=\"grid-m3\"><\/p>\r\n  <p class=\"grid-c3\">Right Column<\/p>\r\n  <p class=\"grid-m4\"><\/p>\r\n\r\n  <!-- Row #2 -->\r\n  <p class=\"grid-m1\"><\/p>\r\n  <p class=\"grid-c1\">Left Row #2<\/p>\r\n  <p class=\"grid-m2\"><\/p>\r\n  <p class=\"grid-c2\">Middle Row #2<\/p>\r\n  <p class=\"grid-m3\"><\/p>\r\n  <p class=\"grid-c3\">Right Row #2<\/p>\r\n  <p class=\"grid-m4\"> <\/p>\r\n\r\n<\/div>\r\n<\/pre>\n
Here\u2019s how it looks so far:<\/p>\n
\"Grid<\/figure>\n
Now you can add images or text and style each row exactly as you\u2019d like.<\/p>\n
Tips for Tweaking<\/h2>\n
You may encounter issues in some browsers when you have more than one row. To address this, you need to set the margin on the far-right element (.grid-m4<\/code> in our case) to the height you want each row to be. For example, if you are using images that are 250px by 250px, set the row height in .grid-m4<\/code> to 250px:<\/p>\n
\r\n.grid-m4 {\r\n  float: left;\r\n  width: 20px;\r\n  height: 250px;\r\n}\r\n<\/pre>\n
This ensures your .grid-m1<\/code> on the left side of the next row doesn\u2019t float up to the row above it.<\/p>\n
If you want to style the background of the entire grid, adjust the height of the .grid<\/code> class. For instance, if you have four rows, each 250px high, set the height of the .grid<\/code> class to 1000px so any styling elements cover the entire grid design:<\/p>\n
\r\n.grid {\r\n  width: 450px;\r\n  height: 1000px;\r\n  margin: auto;\r\n}\r\n<\/pre>\n
Depending on the version of the MindPlay.dk grid generator you use, the site may not generate the \u201c.grid-m4\u201d class. In this case, you can use .grid-m1<\/code> after .grid-c3<\/code> to ensure your grid extends properly:<\/p>\n
\r\n<div class=\"grid\">\r\n  <p class=\"grid-m1\"> <\/p>\r\n  <p class=\"grid-c1\">Left Column<\/p>\r\n  <p class=\"grid-m2\"> <\/p>\r\n  <p class=\"grid-c2\">Middle Column<\/p>\r\n  <p class=\"grid-m3\"> <\/p>\r\n  <p class=\"grid-c3\">Right Column<\/p>\r\n  <p class=\"grid-m1\"> <\/p>\r\n<\/div>\r\n<\/pre>\n
Final Results<\/h2>\n
Here are my final results with two rows and some simple graphics:<\/p>\n
\"Final<\/figure>\n
Have fun designing, and remember that you can style your grid in any way you desire.<\/p>","protected":false},"excerpt":{"rendered":"
Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you\u2019ll learn step-by-step how to quickly set up a lightweight and easy-to-modify grid system in WordPress. We\u2019ll keep the design simple so we can focus on the tools needed to set up your grid, but…<\/p>\n","protected":false},"author":208,"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,507,4319],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Integrate Simple CSS Grid Layouts into WordPress - Hongkiat<\/title>\n<meta name=\"description\" content=\"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how\" \/>\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\/css-grid-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate Simple CSS Grid Layouts into WordPress\" \/>\n<meta property=\"og:description\" content=\"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/\" \/>\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=\"2012-06-28T13:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:10:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg\" \/>\n<meta name=\"author\" content=\"Tara Hornor\" \/>\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=\"Tara Hornor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/\"},\"author\":{\"name\":\"Tara Hornor\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/134d6b1c89cc6437ed430cf097bdcc96\"},\"headline\":\"How to Integrate Simple CSS Grid Layouts into WordPress\",\"datePublished\":\"2012-06-28T13:01:10+00:00\",\"dateModified\":\"2025-04-03T17:10:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/\"},\"wordCount\":675,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-in-wordpress\\\/01a-width.jpg\",\"keywords\":[\"ad-divi\",\"CSS\",\"CSS Grid Layout\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/\",\"name\":\"How to Integrate Simple CSS Grid Layouts into WordPress - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-in-wordpress\\\/01a-width.jpg\",\"datePublished\":\"2012-06-28T13:01:10+00:00\",\"dateModified\":\"2025-04-03T17:10:02+00:00\",\"description\":\"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-in-wordpress\\\/01a-width.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-in-wordpress\\\/01a-width.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate Simple CSS Grid Layouts into 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\\\/134d6b1c89cc6437ed430cf097bdcc96\",\"name\":\"Tara Hornor\",\"description\":\"Tara has a degree in English and writes about marketing, advertising, branding, graphic design, and desktop publishing. In addition to her writing career, Tara also enjoys spending time with her husband and two children.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/tarahornor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Integrate Simple CSS Grid Layouts into WordPress - Hongkiat","description":"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how","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\/css-grid-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Integrate Simple CSS Grid Layouts into WordPress","og_description":"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how","og_url":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-28T13:01:10+00:00","article_modified_time":"2025-04-03T17:10:02+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg","type":"","width":"","height":""}],"author":"Tara Hornor","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Tara Hornor","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/"},"author":{"name":"Tara Hornor","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/134d6b1c89cc6437ed430cf097bdcc96"},"headline":"How to Integrate Simple CSS Grid Layouts into WordPress","datePublished":"2012-06-28T13:01:10+00:00","dateModified":"2025-04-03T17:10:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/"},"wordCount":675,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg","keywords":["ad-divi","CSS","CSS Grid Layout"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/","url":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/","name":"How to Integrate Simple CSS Grid Layouts into WordPress - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg","datePublished":"2012-06-28T13:01:10+00:00","dateModified":"2025-04-03T17:10:02+00:00","description":"Creating a consistent, solid grid layout in WordPress can be straightforward if you use the right tools. In this tutorial, you'll learn step-by-step how","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-in-wordpress\/01a-width.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Integrate Simple CSS Grid Layouts into 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\/134d6b1c89cc6437ed430cf097bdcc96","name":"Tara Hornor","description":"Tara has a degree in English and writes about marketing, advertising, branding, graphic design, and desktop publishing. In addition to her writing career, Tara also enjoys spending time with her husband and two children.","sameAs":["https:\/\/www.hongkiat.com\/blog\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/tarahornor\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Fp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14099","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\/208"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14099"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14099\/revisions"}],"predecessor-version":[{"id":73528,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14099\/revisions\/73528"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14099"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}