WordPress

Template Hierarchy

Modern WordPress themes consist of templates, stylesheets, JavaScript and images. Together theses files control how your site look to the users.
WordPress has a standard template hierarchy, which means that templates with certain filename affect specific areas on your website.
When WordPress needs to finds template it is looking though the template hierarchy undtil it finds a matching template file.

Home page

By default WordPress display your blog posts on the home page of your website. But you can change that under Settings > Reading

WP
Image from www.wpbeginner.com

WordPress looks for these files to display the homepage.
1. front-page.php which will be showed if you are using a static front page. WordPress will first look for this template file and use it to display the blog posts or a static page.
2. home.php which will be showed if WordPress can't find front-page.php and you have your latest post in the front page.
3. page.php which will be showed if you have set the front page to static (a frontpage without the blog posts).
4. index.php will be showed if you do not have the other templates. Then WordPress falls back to the index.php template. This is de default fallback template in WordPress to display any page.

Single post

Single post template file is used to render a single post.

WP
Image from www.wpbeginner.com

WordPress looks for these files to display a single post.
1. single-{post-type}-{slug}.php are the first template. It will look for a specific indvicual post in any post type (Here post types are post used in blogs) and a slug (slug is the last part of the URL, when making a post).
2. single-{post-type}.php are used, so WordPress can check if there is a template to display this specific post type.
3. single.php will be used if the first two template isn't there.
4. singular.php Then it falls back to singular.php
5. index.php will be showed if you do not have the other templates.

Single page

The template file used to render a static page (page post type)

WP
Image from www.wpbeginner.com

WordPress looks for these files to display a single post.
1. custom template file.php are the first thing WordPress will look for

function get_page_templates( $post = null, $post_type = 'page' ) {
return array_flip( wp_get_theme()->get_page_templates( $post, $post_type ) );
}
$templates = get_page_templates();
foreach ( $templates as $template_name => $template_filename ) {
echo "$template_name ($template_filename)";
}

2. page-{slug}.php are the next thing WordPress will look for. If the page slug is contact-us (www.dominoeffekten.dk/contact-us) will WordPress use the page-contact-us.php
3. page-{id}.php will be used to find the site based on the page ID. If the page ID is 4, will WordPress look for a template file named page-4.php
4. page.php will display all static pages.
5. singular.php This template is deafult fallback to all single post type items.
6. index.php will be showed if you do not have the other templates.

Widgets

WordPress Widgets can add content and features to your sidebars.
They where orginally designed to provide a simple and easy-to-use way of giving design and structure control over the WordPress theme to the user.
You can added, remove and rearrangewidgets in Theme customizer or Apperarance > Widgets

Displaying Widgets

Before you can add a Widget you must verify that the theme does supports it.
You can see if the theme supports widgets under Appearance > Widgets
If your site does not have it can you make your own widget area

WP

Font awesome

If you want icons on your site can you use Font Awesome

Installing Font Awesome plugin

Go to Plugin > Add new or download the plugin here

Use the plugin

When you have installed an activated it, can you now use a shortcode as well as the HTML snippet.
To use it you can add <i class=”fab fa-wordpress”> </i> or the shortcode [icon name="wordpress"] where you want an icon to appear

WP
Make your site faster by doing manually

Change the menu

There are many ways to change the menu

Dropdown menu

In WordPress can you make a dropdown menu. Not all themes supports dropdown menu. But Hestia themes does.

Menu

To go Apprearance > Menus and create a menu (if needed).
Add the sites you want in the menu

WP

Make it dropdown

When you have added the pages or post can you use drag and drop on them, so you can make a dropdown function (remember to save it).

WP

Frontpage

Go to the frontpage to see your menu

WP

Add image icons to links naviagation menu

If you have a menu and wants menu icons in it, can you use a plugin. But you can also do it manually.

Add a class to the menu

Go to Appearance > Menus page and click on the Screen Option button at the top right corner of the screen.
This will bring down a menu where you need to check the box next to CSS classes option.
Scroll down to your navigation menu and click on a item to expand it. Here you will see an option to add CSS classes.

WP

Find the icon name in Font Awesome

Add the plugin Font Awesome, go to their site and find the icons you want on the site and add the class in the menu

WP

To go the frontpage

Go to the front page and see the icon

WP

To go the stylesheet

If the icon doesn't fit. Go to Appearance > Theme Editor > stylesheet.css and change the code so the icon are align with the menu text

WP

Categories

You can sort the pages in WordPress based on categories. It is often used if you have a blog on the site, or if you have news on the site.
Categories help visitors quickly know what topics your website is about and allows them to navigate your site faster.
The default category in a new WordPress installation is “Uncategorized“. If you don’t pick a category for a post, then the post is automatically placed into the default category.

How to add categories

When editing a blog post, you can add it to a category by checking the box next to the category name.

WP
Image from www.wpbeginner.com

You can add a new category under Add new category below the list of your existing categories.
You can also add a category directly from the posts > categories, if you already know which categories you want.

WP
Image from www.wpbeginner.com

Here you need to add a name and a slug (refers to the part of a web page’s address that appears after the domain name). Slugs create a link to your category page that lists all posts that you have created in that category. Categories are hierarchical, meaning that each one can have child categories. A child category is used for a sub-topic under a broader topic. For example, a news website may have a category News with child categories for Local, National, and Global news.

How to edit the categories

Categories can be edited from the posts > categories screen. Below the heading will there be a text Edit. Click on that and you can now edit the category.
On the site can you also delete the categories, which you do by pressing the delete button.

WP
Image from www.wpbeginner.com

Displaying categories

You can add the overview page of categories in the sitebar. By doing that you need to use widgets under Appearance > Widgets.
You can also add categories in your menu, by editing the menu under Appearance > Menus and adding the category page.

WP
Image from www.wpbeginner.com

Tags

WordPress tags is one of the tools you can use to group your posts, based on similar details.
Usually, tags are located under a post or in the sidebar. When a visitor clicks a particular tag, WordPress will open an archive page (tag page) – indexing all the posts and custom post types that have the same tags. Tags play a vital role in organizing your content. They have a direct impact on your user experience and SEO

How to add tags

When editing a blog post, you can add it to a tag by writing a tag name inside the form below the heading tag and click add.

WP
Image from www.kinsta.com

But you can also go under posts > tags and add a new tag there. It is also here you manage the existing tags used on your site. YOu can add, delete and editing tags, so they fit your website.

Displaying tags

Most WordPress themes will display the tags assigned to the post as a part of the post’s metadata. You can also display the tags on a page with the use of widgets.

WP
Image from www.kinsta.com

Categories vs tags

Category and tag archives are essential for SEO, specially for eCommerce sites, because they can be more imprtant than indvidual pages and posts.
If your site is a shop and your products change, your categories are more important. If your site is a job listing site where jobs expire, your categories are more important. Otherwise, you’d be optimizing pages that are going to be gone a few weeks/months later.

The differences between categories and tags

Categories in WordPress cover broader sections of your website, while tags help to identify all the posts you have created that have been tagged with a specific word.
Categories are like a table of contents in the front of a book. That separate the content on your site in topics.

WP

Where tags are like the index in the back of a book

WP

One of the biggest differences between tags and categories is that you’re required to choose a category for your posts, and if you don’t then they’re listed under “uncategorized”. On the other hand, you’re not required to add tags.

Helpful SEO sites