{"id":425,"date":"2014-09-08T20:08:01","date_gmt":"2014-09-08T18:08:01","guid":{"rendered":"http:\/\/servikus.com\/tutorials\/?p=425"},"modified":"2014-10-01T19:45:27","modified_gmt":"2014-10-01T17:45:27","slug":"how-to-organize-wordpress-pages","status":"publish","type":"post","link":"https:\/\/servikus.com\/tutorials\/how-to-organize-wordpress-pages\/","title":{"rendered":"How to organize WordPress pages"},"content":{"rendered":"<p>If you remember from our previous tutorials about posts in WordPress, we organized them with tags and categories. Well, we don&#8217;t have those things when we work with pages. But if you remember we organized our categories with child-parent relations. And that works the same way with pages.<br \/>\nWe can set every page to be a child or parent of a certain page. This helps a lot when we deal with a big number of pages on our blog. All of these relations will also affect the way our pages are displayed in our main menu, and also the URL structure of our pages will be affected by parent-child relations between our pages. Anyhow, WordPress made a lot of things very easy for us, and organizing pages is not an exception to that.<\/p>\n<p><strong>Note<\/strong>: In this tutorial we assume that you are already logged into your WordPress admin area.<\/p>\n<p><strong>Step 1:<\/strong> For our first step we are going to create a new page called: &#8220;<strong>Parent page<\/strong>&#8220;, and then we are going to create another page called: &#8220;<strong>Child Page<\/strong>&#8220;. Just to mention that this tutorial is done on a fresh installation of WordPress, so we are going to have sample post and sample page also. In our last tutorial we learned how to create a new page so I will just skip the how to create part and go right to organizing our page structure.<\/p>\n<p><strong>Step 2:<\/strong> I created 2 pages as I said above. I didn&#8217;t set any relation between them. You can see how that looks on a picture below:<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_17.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-426\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_17-300x147.png\" alt=\"Screenshot_1\" width=\"300\" height=\"147\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_17-300x147.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_17-1024x504.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_17.png 1350w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>As you can see we just have sample page and two newly created pages lined up one next to the other on our main menu. We don&#8217;t like that, and now we want to organize that a little bit.<\/p>\n<p><strong>Step 3:<\/strong> There is more than one way to add parent-child relation between pages, I&#8217;ll show you my favorite way in this tutorial. We need to navigate to &#8220;<strong>Pages<\/strong> &#8211;&gt; <strong>All pages<\/strong>&#8220;. We will see a window like on a picture below:<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_27.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-427\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_27-300x146.png\" alt=\"Screenshot_2\" width=\"300\" height=\"146\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_27-300x146.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_27-1024x500.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_27.png 1365w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 4:<\/strong> Now when we hover over a certain page in this window a couple editing options will appear. We want to edit our &#8220;<strong>Child page<\/strong>&#8221; and make it a child of a &#8220;<strong>Parent page<\/strong>&#8220;. So we hover over &#8220;<strong>Child page<\/strong>&#8221; and click on &#8220;<strong>Quick Edit<\/strong>&#8220;. Once we did that we will new editing options for page we selected, like shown on picture below:<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_36.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-428\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_36-300x152.png\" alt=\"Screenshot_3\" width=\"300\" height=\"152\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_36-300x152.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_36-1024x520.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_36.png 1185w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 5:<\/strong> Now we want to set parent-child relation, as I said above. We want to make &#8220;<strong>Child Page<\/strong>&#8221; to be a child of a &#8220;<strong>Parent Page<\/strong>&#8220;. We can do that by clicking on drop-down &#8220;<strong>Parent<\/strong>&#8221; menu.<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_44.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-429\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_44-300x155.png\" alt=\"Screenshot_4\" width=\"300\" height=\"155\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_44-300x155.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_44-1024x530.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_44.png 1186w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 6:<\/strong> From the drop-down menu we select &#8220;<strong>Parent Page<\/strong>&#8221; (whatever page you want to be a parent of a page you&#8217;re editing at that moment) and click on &#8220;<strong>Update<\/strong>&#8221; button. And that&#8217;s it. We just created a basis structure for our WordPress pages. You can see how our main menu looks on a picture below:<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_52.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-430\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_52-300x128.png\" alt=\"Screenshot_5\" width=\"300\" height=\"128\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_52-300x128.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_52-1024x437.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_52.png 1349w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>As you can see now when we hover over &#8220;<strong>Parent Page<\/strong>&#8221; on our main, we will see a drop-down list with our &#8220;<strong>Child Page<\/strong>&#8221; in it.<\/p>\n<p>Another way to add structure and organize our pages is selecting a parent page when we add a new page. Look at picture below:<\/p>\n<p><a href=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_61.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-431\" src=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_61-300x147.png\" alt=\"Screenshot_6\" width=\"300\" height=\"147\" srcset=\"https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_61-300x147.png 300w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_61-1024x504.png 1024w, https:\/\/servikus.com\/tutorials\/wp-content\/uploads\/2014\/09\/Screenshot_61.png 1349w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>This way might be easier to some of you, I prefer editing this relations from &#8220;<strong>All pages<\/strong>&#8221; window simply because I have an overview of all pages and their relations. Again it is all just a matter of your personal preference.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you remember from our previous tutorials about posts in WordPress, we organized them with tags and categories. Well, we don&#8217;t have those things when we work with pages. But if you remember we organized our categories with child-parent relations. And that works the same way with pages. We can set every page to be&#8230; <a class=\"read-more\" href=\"https:\/\/servikus.com\/tutorials\/how-to-organize-wordpress-pages\/\">Read More<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/posts\/425"}],"collection":[{"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":1,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/posts\/425\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/servikus.com\/tutorials\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}