{"__v":18,"_id":"573dd2651ad1a30e00a84e08","category":{"__v":1,"_id":"569d55acec29360d00f6679c","pages":["569d55adec29360d00f6679e"],"project":"569d55abec29360d00f66798","version":"569d55acec29360d00f6679b","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-18T21:14:20.939Z","from_sync":false,"order":0,"slug":"documentation","title":"Converter Functionality"},"parentDoc":null,"project":"569d55abec29360d00f66798","user":"569d557c0306a10d00ce996e","version":{"__v":17,"_id":"569d55acec29360d00f6679b","project":"569d55abec29360d00f66798","createdAt":"2016-01-18T21:14:20.374Z","releaseDate":"2016-01-18T21:14:20.374Z","categories":["569d55acec29360d00f6679c","569d58cc0306a10d00ce9971","569d5c37ec29360d00f667a7","569ec89aebbadc0d0079bf71","569eccaa4a5c8b0d00744b3c","569eccbeffccd10d00a05cac","569ecd0f2d320817003b80d3","569ed216fbee990d0072d990","56b35bfb53da320d00c29716","56c1dc3d47394f0d00e227e8","570b98171e91d4220012acd8","570b9fa85f7a88340019f9f7","570e1ac1132c6d2b0000ab0b","570f5f72d6c6f00e00b98782","570f701ad6c6f00e00b98795","570f80fbb85a841900aa9505","5734a9642a48a90e0078e5ed"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2016-05-19T14:49:09.299Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"## Listing blog posts\n\nA WordPress blog consists of blog posts, that can be listed in your theme. To display a list of WordPress posts you'll need to create a \"wp-posts-#\" wrapper element and tell it to be repeated e.g. five times to show the five latest WordPress posts by replacing the \"#\" with the number five as in \"wp-posts-5\". Inside the \"wp-posts-x\" wrapper element add the elements that will display the content that you choose to display for your posts.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<article class=\\\"wp-posts-5\\\">\\n  \\t<h1><a href=\\\"#\\\" class=\\\"wp-title\\\">Title of the post will appear here with a link to the post</a></h1>\\n\\t\\t<img src=\\\"\\\" class=\\\"wp-image\\\" />\\n\\t\\t<p class=\\\"wp-excerpt\\\">First 55 characters of the post will appear here</p>\\n  \\t<a href=\\\"#\\\" class=\\\"wp-link\\\">Read more</a>\\n\\t\\t<p>\\n\\t\\t\\t\\tBy <span class=\\\"wp-author\\\">Authors name will appear here</span>\\n      \\ton <span class=\\\"wp-date\\\">Date of the post will appear here</span>\\n  \\t</p>\\n  \\t<a href=\\\"#\\\" class=\\\"wp-categories\\\">Link to category</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"wp-pagination\\\"></a>\\n</article>\",\n      \"language\": \"html\",\n      \"name\": \"Example of listing 5 latest blog posts\"\n    }\n  ]\n}\n[/block]\n### The wrapper\nTo create a list of WordPress posts you'll need to create a \"wp-posts-#\" wrapper element that will be used as a wrapper for a single WordPress post in the post listing. After the conversion this element and it's contents will be automatically repeated to show # number of WordPress posts. \n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-posts-#\",\n    \"0-1\": \"**Blog post wrapper**\\n\\nDefines an element that will be used as a wrapper for a single WordPress post.\\n\\nThe \\\"#\\\" in the class \\\"wp-posts-#\\\" needs to replaced with a number which represents the number of times the element and it's contents is repeated to list \\\"#\\\" number of WordPress posts. # can be 0 to list unlimited posts\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\",\n    \"1-0\": \"wp-{CUSTOM-POST-TYPE}-#\",\n    \"2-0\": \"wp-posts-#-{CATEGORY}\",\n    \"3-0\": \"wp-{CUSTOM-POST-TYPE}-#-{CATEGORY}\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n### Post content\nThese classes can be used inside the wp-posts-# element to display different content related to the post.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-title\",\n    \"0-1\": \"**Display the post title**\\n\\nFills the element's content with the title of the WordPress post. If used on an anchor tag, will also create a link to the post.\",\n    \"1-0\": \"wp-link\",\n    \"1-1\": \"**Create a link to the post**\\n\\nFills in the the url of the WordPress post to the element's href attribute. Needs to be used on an anchor tag.\",\n    \"2-0\": \"wp-image\",\n    \"2-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image to the element's src attribute. Needs to be used on an image element.\",\n    \"5-0\": \"wp-excerpt\",\n    \"5-1\": \"**Display the post excerpt**\\n\\nFills the element's content with the first 55 characters of the WordPress post or with a custom excerpt defined for the post.\",\n    \"6-0\": \"wp-author\",\n    \"6-1\": \"**Display the post author**\\n\\nFills the element's content with the name of the author of the WordPress post. If used on an anchor tag, will also create a link to the author's posts.\",\n    \"7-0\": \"wp-date\",\n    \"7-1\": \"**Display the posting date**\\n\\nFills the element's content with the posting date of the WordPress post. The format is decided based on the default date format set in WordPress Dashboard.\",\n    \"8-0\": \"wp-categories\",\n    \"8-1\": \"**Display the post categories**\\n\\nThis element is repeated to display each category of the WordPress post. The element's content is filled with the category name. If used on an anchor tag, will also create a link to a listing of all the posts under this category.\",\n    \"9-0\": \"wp-tags\",\n    \"9-1\": \"**Display the post tags**\\n\\nThis element is repeated to display each tag of the WordPress post. The element's content is filled with the tag name. If used on an anchor tag, will also create a link to a listing of all the posts tagged with this tag.\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\",\n    \"3-0\": \"wp-bg-image\",\n    \"3-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image on the element's inline style attribute as a background-image class. Can be used on an any element.\",\n    \"4-0\": \"wp-meta-X\",\n    \"4-1\": \"**Display the post meta value corresponding to key X**\\n\\nFIlls in the post meta value corresponding to key X. This class can be used on any content elements like div, p, li.\",\n    \"10-0\": \"wp-pagination\\n\\n(also available wp-next-page, wp-previous-page)\",\n    \"10-1\": \"**Display the pagination listing**\\n\\nThis class needs to be used on an anchor tag inside one of the wp-posts-* classes. The anchor tag will then be replaced by a page numbered pagination along with the next and previous links. For eg: Previous 1 2 3 …. 8 Next.\"\n  },\n  \"cols\": 2,\n  \"rows\": 11\n}\n[/block]\n<hr>\n## Displaying a single blog post\nTo display the contents of a single WordPress post, you'll need to create a file called **single.html** and inside it add the elements that will display the content you choose to display for your posts. After the conversion this file will become a template (single.php) for displaying a single WordPress post. WordPress will then populate this template dynamically with the contents of the WordPress post that is being viewed.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1 class=\\\"wp-title\\\">Title of the post will appear here</h1>\\n<h4>\\n\\t\\tBy <span class=\\\"wp-author\\\">Authors name will appear here</span>\\n\\t\\ton <span class=\\\"wp-date\\\">Date of the post will appear here</span>\\n</h4>\\n<img src=\\\"\\\" class=\\\"wp-image\\\" />\\n<a href=\\\"#\\\" class=\\\"wp-categories\\\">Link to category</a>\\n<div class=\\\"wp-content\\\">\\n\\t\\tThe content inside the WordPress WYSIWYG editor will appear inside this wrapper.\\n</div>\\n<a href=\\\"#\\\" class=\\\"wp-previous-page\\\">Link to previous post</a>\\n<a href=\\\"#\\\" class=\\\"wp-next-page\\\">Link to next post</a> \",\n      \"language\": \"html\",\n      \"name\": \"Example of single.html contents\"\n    }\n  ]\n}\n[/block]\n### Post content\nThese classes can be used inside the single.html file to display different content related to the post.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-title\",\n    \"0-1\": \"**Display the post title**\\n\\nFills the element's content with the title of the WordPress post.\",\n    \"1-0\": \"wp-content\",\n    \"1-1\": \"**Display the post content**\\n\\nFills the element's content with the content from the WordPress WYSIWYG editor for the post. Everything placed inside the editor will be displayed inside this element.\",\n    \"2-0\": \"wp-image\",\n    \"2-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image to the element's src attribute. Needs to be used on an image element.\",\n    \"5-0\": \"wp-author\",\n    \"5-1\": \"**Display the post author**\\n\\nFills the element's content with the name of the author of the WordPress post. If used on an anchor tag, will also create a link to the author's posts.\",\n    \"6-0\": \"wp-date\",\n    \"6-1\": \"**Display the posting date**\\n\\nFills the element's content with the posting date of the WordPress post. The format is decided based on the default date format set in WordPress Dashboard.\",\n    \"7-0\": \"wp-categories\",\n    \"7-1\": \"**Display the post categories**\\n\\nThis element is repeated to display each category of the WordPress post. The element's content is filled with the category name. If used on an anchor tag, will also create a link to a listing of all the posts under this category.\",\n    \"8-0\": \"wp-tags\",\n    \"8-1\": \"**Display the post tags**\\n\\nThis element is repeated to display each tag of the WordPress post. The element's content is filled with the tag name. If used on an anchor tag, will also create a link to a listing of all the posts tagged with this tag\",\n    \"9-0\": \"wp-previous-page\",\n    \"9-1\": \"**Create a link to the previous post**\\n\\nFills in the the url of the previous post to the element's href attribute. Needs to be used on an anchor tag. When used outside the wp-posts-* loop, the url references to the previous post which exists in chronological order from the current post. When used inside a wp-posts-* loop, the url of the previous page is filled. (such as /page/2)\",\n    \"10-0\": \"wp-next-page\",\n    \"10-1\": \"**Create a link to the next post**\\n\\nFills in the the url of the next post to the element's href attribute. Needs to be used on an anchor tag. When used outside the wp-posts-* loop, the url references the next post which exists in chronological order from the current post. When used inside a wp-posts-* loop, the url of the next page is filled. (such as /page/3)\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\",\n    \"3-0\": \"wp-bg-image\",\n    \"3-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image on the element's inline style attribute as a background-image class. Can be used on an any element.\",\n    \"4-0\": \"wp-meta-X\",\n    \"4-1\": \"**Display the post meta value corresponding to key X**\\n\\nFIlls in the post meta value corresponding to key X. This class can be used on any content elements like div, p, li.\"\n  },\n  \"cols\": 2,\n  \"rows\": 11\n}\n[/block]\n<hr>\n## Listing archived posts\nTo display a list of WordPress posts for a category, tags, authors or dates (e.g. month), you'll first need to create a file called **archive.html**. In your archive.html you'll need to create a \"wp-posts-#\" wrapper element to list #number of posts and inside it add the elements that will display the content that you choose to display for your posts. **archive.html** will be converted to the archive.php template.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1 class=\\\"wp-title\\\">Title of the archive page will appear here</h1>\\n\\n<article class=\\\"wp-posts-5\\\">\\n  \\t<h1><a href=\\\"#\\\" class=\\\"wp-title\\\">Title of the post will appear here with a link to the post</a></h1>\\n\\t\\t<img src=\\\"\\\" class=\\\"wp-image\\\" />\\n\\t\\t<p class=\\\"wp-excerpt\\\">First 55 characters of the post will appear here</p>\\n  \\t<a href=\\\"#\\\" class=\\\"wp-link\\\">Read more</a>\\n\\t\\t<p>\\n\\t\\t\\t\\tBy <span class=\\\"wp-author\\\">Authors name will appear here</span>\\n      \\ton <span class=\\\"wp-date\\\">Date of the post will appear here</span>\\n  \\t</p>  \\n</article>\",\n      \"language\": \"html\",\n      \"name\": \"Example of archive.html listing 5 posts\"\n    }\n  ]\n}\n[/block]\n### Archive title\nThe archive page will have a dynamic title that can be displayed with the following class.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-title\",\n    \"0-1\": \"**Display the archive page title**\\n\\nFills the element's content with the title of the archive page (e.g. \\\"Category: Cats\\\" or \\\"Tags: Featured\\\"\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n### The wrapper\nTo create a list of WordPress posts you'll need to create a \"wp-posts-x\" wrapper element that will be used as a wrapper for a single WordPress post in the post listing. After the conversion this element and it's contents will be automatically repeated to show \"x\" number of WordPress posts. \n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-posts-#\",\n    \"0-1\": \"**Blog post wrapper**\\n\\nDefines an element that will be used as a wrapper for a single WordPress post.\\n\\nThe #in the class \\\"wp-posts-#\\\" needs to replaced with a number which represents the number of times the element and it's contents is repeated to list # number of WordPress posts.\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n### Post content\nThese classes can be used inside the wp-posts-# element to display different content related to the post.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-title\",\n    \"0-1\": \"**Display the post title**\\n\\nFills the element's content with the title of the WordPress post. If used on an anchor tag, will also create a link to the post.\",\n    \"1-0\": \"wp-link\",\n    \"1-1\": \"**Create a link to the post**\\n\\nFills in the the url of the WordPress post to the element's href attribute. Needs to be used on an anchor tag.\",\n    \"2-0\": \"wp-image\",\n    \"2-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image to the element's src attribute. Needs to be used on an image element.\",\n    \"5-0\": \"wp-excerpt\",\n    \"5-1\": \"**Display the post excerpt**\\n\\nFills the element's content with the first 55 characters of the WordPress post or with a custom excerpt defined for the post.\",\n    \"6-0\": \"wp-author\",\n    \"6-1\": \"**Display the post author**\\n\\nFills the element's content with the name of the author of the WordPress post. If used on an anchor tag, will also create a link to the author's posts.\",\n    \"7-0\": \"wp-date\",\n    \"7-1\": \"**Display the posting date**\\n\\nFills the element's content with the posting date of the WordPress post. The format is decided based on the default date format set in WordPress Dashboard.\",\n    \"8-0\": \"wp-categories\",\n    \"8-1\": \"**Display the post categories**\\n\\nThis element is repeated to display each category of the WordPress post. The element's content is filled with the category name. If used on an anchor tag, will also create a link to a listing of all the posts under this category.\",\n    \"9-0\": \"wp-tags\",\n    \"9-1\": \"**Display the post tags**\\n\\nThis element is repeated to display each tag of the WordPress post. The element's content is filled with the tag name. If used on an anchor tag, will also create a link to a listing of all the posts tagged with this tag.\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\",\n    \"3-0\": \"wp-bg-image\",\n    \"3-1\": \"**Display the featured image for the post**\\n\\nFills in the the url of the WordPress post's featured image on the element's inline style attribute as a background-image class. Can be used on an any element.\",\n    \"4-0\": \"wp-meta-X\",\n    \"4-1\": \"**Display the post meta value corresponding to key X**\\n\\nFIlls in the post meta value corresponding to key X. This class can be used on any content elements like div, p, li.\"\n  },\n  \"cols\": 2,\n  \"rows\": 10\n}\n[/block]\n<hr>\n## Dummy content\nIf you need to have elements in your HTML design that are not needed after the conversion, you can add the dummy class to these elements and they will removed during the conversion.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"wp-dummy\",\n    \"0-1\": \"**Remove the element**\\n\\nThe element and it's contents will be removed during the conversion. Used for design purposes.\",\n    \"h-0\": \"Class name\",\n    \"h-1\": \"Functionality\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]","excerpt":"<a href=\"https://html-to-wordpress.readme.io/v1.0/docs/blog#section-listing-blog-posts\">Listing blog posts</a>\n<a href=\"https://html-to-wordpress.readme.io/v1.0/docs/blog#section-displaying-a-single-blog-post\">Displaying a single blog post</a>\n<a href=\"https://html-to-wordpress.readme.io/v1.0/docs/blog#section-listing-archived-posts\">Listing archived posts</a>\n<a href=\"https://html-to-wordpress.readme.io/v1.0/docs/blog#section-dummy-content\">Dummy content</a>","slug":"blog","type":"basic","title":"Blog"}