Brugbarviden

Category: Wordpress

  • WordPress Template Hierarchy

    WordPress Template Hierarchy

    WordPress Template Hierarchy

    Every Template in wordpress has a corresponding php file. I have added the php files that each template uses. Below is a table with further explanations for each template.

    WP Template NameCorresponding php fileDescription of php file.
    All archives archive.phpIIf you do not have a category–specific template (category.php) or tag-specific template (tag.php), WordPress will fall back to the general archive template: archive.php.
    Example You have a navigation menu with 3 categories:ProteinsDietFats
    When a user clicks on any of these, WordPress loads the corresponding category archive page. If there is:No category-{slug}.phpNo category.php Then WordPress will use:archive.php
    Author archivesauthor.php
    Category archivesCategory.php

    The hierarchy for Categories:

    .1) category-{slug}.php e.g., category-news.php

    2)category-{id}.php e.g., category7.php

    3)Category.php
    4) Archive.php
    5) index.php
    Date archivesdate.php
    Tag Archivestag.php
    Blog home1. If your homepage display is set to Static page as homepage + post page is set as homepage + post 

    1)Home.php 
    2) index.php 

    2. If your homepage displays is set to “A static page”:Homepage (the page set as “Homepage”):

    1) front-page.php → if it exists
    2) else
    page-{slug}.php or page-{id}.php
    3) else page.php
    4) else index.php
    		Home.php is used for the homepage if front-page.php and if your reading-settings are set to  latest posts 
    Or if your reading settings are set to “A static page” + “posts page” 
    Front Pagefront-page.phpfront-page.php is only used if a static homepage is selected. It is never used when “Your latest posts” is selected.It’s never used for normal pages that are not a static homepage. 
    Pages For a normal page that is not set to static homepage: this is the hierarchy 
    1)Page-{slug}.php
    2) Page-{id}.php
    3)Page.php
    4)index.php

    Template hierarchy: if a page is set to a static page + home page. This is the hierarchy

    1)Front-page.php
    2)page-{slug}.php
    (e.g., page-home.php)
    3) Page-{id}.php
    4) page.php
    5) Index.php

    If a homepage is set to show your latest posts wordpress does not treat it as a page and this will be the hierarchy   
    1) Home.php
    2) index.php    		Used for all wordpress pages.
    If the Page is set as a static Homepage, then front-page.php gets top priority.
    If it’s just a normal Page (not the homepage), front-page.php is ignored.
    If the Page is set as a static Homepage but no front-page.php exists then the homepage is likely rendered by page.php 
     
    Pages no titlepage.php
    index.phpindex.phpIf no php files exist for all the other templates (page.php, home.php , archive.php etc) they all default to index.php and the wordpress post, page, archive page etc will all display content based on what index.php tells it to do. 
    searchsearch.php
    Single PostSingle.php


    Single post hierarchy

    1)  Single-post-{slug}.php e.g.,
    single-post-how-to-code.php
    (❗Rarely used — must be created manually)

    2) Single-post.php Template for all single post entries (not pages or CPTs)

    3) Single.php
    General fallback for any single post or custom post type

    4) Singular.php
    General fallback for all singular content (posts, pages, CPTs)

    5) index.php Final fallback    		This is used for each of your posts. When you click a post it uses the Single posts template.
    Single item: postSingle-post.php Single.php 
    Page: 404404.php 
  • WordPress Gutenberg Block editor – Query loop – Mobile Friendly queries.

    WordPress Gutenberg Block editor – Query loop – Mobile Friendly queries.

    WordPress Gutenberg Block editor – Query loop – Mobile Friendly queries.

    How to use the query loop: You can display a query loop either as Vertical List or as a Grid.

    Query loop as a Grid

    1. Select the Post Template and choose “grid”
    2. Select the Grid in list view > style > choose minimum Height 100%: Now every grid-box that contains a post entry will span the full height of its container (if you set a background color to the grid, you will see that the background fills the whole grid)
      • Set Grid item Position to Auto. If you set it to manual choose Columns 1.
    3. Optional: Add a stack inside the Grid (so grid is parent): Then place Title, Featured image and Date inside stack.
      • Now set stack Justification to “Stretch items ” It makes all child blocks inside the Stack stretch to the full available width of the container. Optionally you could also choose “center”
      • Set orientation: Vertical
      • Stack Layout : Justification Grid item position
    4. Below I’ve created a border around the Grid (outer border) and the Stack (inner border): Here is the list view Structure
    5. Center the text
    query loop

    This is how the Query loop result will look on your page

  • WordPress Gutenberg Block editor – Columns, Stacks and Groups

    How to build a 3 column layout with gutenberg Block editor that is mobile-friendly.

    When you build a 3-column layout you have 3 columns within a parent column container. Notice that I gave each column a border. Columns don’t give you the option to stretch the column to take up 100% height of its parent container, so if you look at the image below you can see that column 1 is not taking up the full space of its parent container. Only stacks allow this, option, not columns. Also If you place the blocks (Header, image, paragraph, button) within each Column. You cannot push the button to the bottom if

    Solution Add a stack

    1. You have 3 columns winin a parent column container. 
      • Set outermost parent column to “Stack on mobile” This way each column will stack on top of the other on a mobile device instead of having each column side by side.
    2. within each column you have 1 stack.  
      1. Stack settings:
        1. set minimum height to 100% so it fills the parent column height 100%
        2.  Change vertical alignment to “space between” 
    3. Within the stack you have 2 groups
      1. Button group
        1. Justify Center: 
        2. The button group: Set bottom margin which lifts it up from the bottom.

    Col1 GroupA

    Paragraph text col 1 groupA

    Group B

    Col2 GroupC

    Paragraph text col 2 Group C . Contains an extra line.

    Group D

    Col3 Group E

    Paragraph text col 3 stack E.. This has two or three extra lines taking up more space.

    Group F

    That’s how you use Columns and Stacks to create evenly spaced buttons / other block elements inside a column container.