{"id":2509,"date":"2022-04-07T18:37:23","date_gmt":"2022-04-07T10:37:23","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=2509"},"modified":"2022-04-11T14:06:42","modified_gmt":"2022-04-11T06:06:42","slug":"rearrange-astra-post-elements","status":"publish","type":"post","link":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/rearrange-astra-post-elements\/","title":{"rendered":"How To Rearrange Astra Post Elements"},"content":{"rendered":"\n<p>A reader asked how to completely rearrange the post elements in <a href=\"https:\/\/intelliwolf.com\/recommends\/astra\/\" target=\"_blank\" rel=\"noreferrer noopener sponsored nofollow\">WordPress Astra<\/a>.<\/p>\n\n\n\n<p>They wanted to order it as:<\/p>\n\n\n\n<ul><li>Date<\/li><li>Post title<\/li><li>Author<\/li><li>Post content<\/li><li>Categories<\/li><li>Tags<\/li><\/ul>\n\n\n\n<p>They also wanted the same ordering on both the single posts and in the category pages.<\/p>\n\n\n\n<p>Regardless of whether you want to order your layout in this exact order, there will be some useful information to help you customize your order.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Display the date above the post title<\/h2>\n\n\n\n<p>To get the date above the title I used the code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'astra_single_post_title_before', 'date_before_title' );\r\nadd_action( 'astra_archive_post_title_before', 'date_before_title' );\r\n\r\nfunction date_before_title() {\r\n  $date = astra_post_date();\r\n  echo \"&lt;div class='entry-meta'>$date&lt;\/div>\";\r\n}<\/code><\/pre>\n\n\n\n<p>This connects the display of the date into the relevant <em>post_title_before<\/em> sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Display the categories and tags below the content<\/h2>\n\n\n\n<p>To display the categories and tags at the bottom I used this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'astra_entry_content_after', 'category_tag_after_post' );\n\r\nfunction category_tag_after_post() {\r\n  if ( !is_single() AND !is_archive() AND !is_home() ) {\r\n    return false;\r\n  }\n\r\n  $categories = astra_post_categories();\r\n  $tags = astra_post_tags();\r\n  echo \"&lt;div class='entry-meta'>$categories \/ $tags&lt;\/div>\";\r\n}<\/code><\/pre>\n\n\n\n<p>To see a full description of this code and what it does, have a look at the <a href=\"https:\/\/intelliwolf.com\/how-to-display-wordpress-categories-below-astra-post\/\">tutorial on how to display WordPress categories below the content in Astra<\/a>.<\/p>\n\n\n\n<p>Finally, I hid the date, categories and tags from their default positions, using the Customizer. You can see a full explanation under <a href=\"https:\/\/intelliwolf.com\/customize-post-meta-astra\/#astra-meta-visible\">customizing the Astra post meta<\/a>.<\/p>\n\n\n\n<p>The end result looked like this:<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"514\" height=\"318\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\" alt=\"\" class=\"wp-image-2520\" srcset=\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png 514w, https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01-300x186.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure><\/div>\n\n\n\n<p>Ways you could further customize this include putting the category or author above the title, changing the text or HTML wrapping around the code, or doing a different display for the single posts or the category pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A reader asked how to completely rearrange the post elements in WordPress Astra. They wanted to order it as: Date Post title Author Post content Categories Tags They also wanted the same ordering on both the single posts and in the category pages. Regardless of whether you want to order your layout in this exact<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[19],"yoast_head":"\n<title>How To Rearrange Astra Post Elements<\/title>\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.intelliwolf.com\/rearrange-astra-post-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Rearrange Astra Post Elements\" \/>\n<meta property=\"og:description\" content=\"A reader asked how to completely rearrange the post elements in WordPress Astra. They wanted to order it as: Date Post title Author Post content Categories Tags They also wanted the same ordering on both the single posts and in the category pages. Regardless of whether you want to order your layout in this exact\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-07T10:37:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T06:06:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Rearrange Astra Post Elements\",\"datePublished\":\"2022-04-07T10:37:23+00:00\",\"dateModified\":\"2022-04-11T06:06:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\"},\"wordCount\":226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\",\"keywords\":[\"Astra\"],\"articleSection\":[\"General\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\",\"url\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\",\"name\":\"How To Rearrange Astra Post Elements\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\",\"datePublished\":\"2022-04-07T10:37:23+00:00\",\"dateModified\":\"2022-04-11T06:06:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage\",\"url\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\",\"contentUrl\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png\",\"width\":514,\"height\":318},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"General\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/general\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Rearrange Astra Post Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design and Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Rearrange Astra Post Elements","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.intelliwolf.com\/rearrange-astra-post-elements\/","og_locale":"en_US","og_type":"article","og_title":"How To Rearrange Astra Post Elements","og_description":"A reader asked how to completely rearrange the post elements in WordPress Astra. They wanted to order it as: Date Post title Author Post content Categories Tags They also wanted the same ordering on both the single posts and in the category pages. Regardless of whether you want to order your layout in this exact","og_url":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/","og_site_name":"Intelliwolf","article_published_time":"2022-04-07T10:37:23+00:00","article_modified_time":"2022-04-11T06:06:42+00:00","og_image":[{"url":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png"}],"author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Rearrange Astra Post Elements","datePublished":"2022-04-07T10:37:23+00:00","dateModified":"2022-04-11T06:06:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/"},"wordCount":226,"commentCount":0,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"image":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png","keywords":["Astra"],"articleSection":["General"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/","url":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/","name":"How To Rearrange Astra Post Elements","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage"},"image":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png","datePublished":"2022-04-07T10:37:23+00:00","dateModified":"2022-04-11T06:06:42+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#primaryimage","url":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png","contentUrl":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2022\/04\/2022-04-07-astra-meta-order-01.png","width":514,"height":318},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/rearrange-astra-post-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"General","item":"https:\/\/www.intelliwolf.com\/category\/general\/"},{"@type":"ListItem","position":3,"name":"How To Rearrange Astra Post Elements"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design and Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2509"}],"collection":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/comments?post=2509"}],"version-history":[{"count":1,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2509\/revisions"}],"predecessor-version":[{"id":2521,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2509\/revisions\/2521"}],"wp:attachment":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/media?parent=2509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/categories?post=2509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/tags?post=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}