Back To Posts August 12, 2017

WP Beirut Second Meetup Part 1 – Best Practices For Developing WordPress Themes From Scratch

WP Beirut Second Meetup Part 1 – Best Practices For Developing WordPress Themes From Scratch

Further the last WordPress Beirut meetup we had in the 1st of August 2017 at BDD (details here), this article covers all points we discussed in the presentation titled “When you should develop a WordPress theme from scratch?“.

Ideally, I was planning to cover all below 14 topics in my presentation:

    1. When you shouldn’t develop a WordPress theme from scratch? What alternatives do you have?
    2. Basic template files execution
    3. Basic template files structure
    4. WordPress files structure
    5. Template Dos and Don’ts
    6. A look to WordPress database structure
    7. Securing WordPress files (naming and files permissions)
    8. Customizing WordPress CMS
    9. Additional WordPress features you can use
    10. WordPress plugins we use

    Michel:

    1. Setting up test environments
    2. How to create custom post types, pages, and taxonomies

    Bonus: How we made WordPress easier for our VOD websites

However, due to continuous interactions and discussions we only managed to go through:

  1. When you should develop a WordPress theme from scratch?
  2. When you shouldn’t develop a WordPress theme from scratch? What alternatives do you have?
  3. Basic template files execution

I’ll try to cover all the above points throughout this post, thus I’ll make sure to update new posts regularly whenever we have the chance to continue the presentation in the upcoming meetups. (Presentations posts can be accessed through here).

When you should develop a WordPress theme from scratch?

WordPress themes are categorized into 2 main types, pre-developed and custom.

Pre-developed themes are themes you can get free from wordpress.org/themes or themes you can buy from a large variety of resources (such as themeforest), it’s also known as premium themes.

Custom themes are themes developed from scratch including all theme aspects, functionality and pages. Hence, it has several benefits:

  • Offers more customization
  • Is more valuable since the written code is unique
  • The options are endless and the developer doesn’t have to stick to options offered by the chosen theme
  • Has cleaner code
  • WAY easier to modify/update/debug
  • Allows multiple developers to work together
  • Developing specific options from scratch can sometimes be easier than finding turnarounds for pre-developed themes

When you shouldn’t develop a WordPress theme from scratch? What alternatives do you have?

Custom themes required a lot more efforts than pre-developed themes including:

  • Frontend design
  • UI/UX design
  • Frontend development
  • Backend development
  • In some cases, database structure design

These tasks requires more resources and usually costs a lot more money.

Alternatives can be:

  • Working with WordPress free themes (https://wordpress.org/themes/)
  • Buying premium WordPress themes (http://themeforest.com)
  • Not using CMS based solutions (HTML templates, writing flat php, using alternative php frameworks such as laravel, codeigniter… )

Basic template files execution

Home Page

This is the first and most important page of any website. So WordPress has provided the scope to customize the page. Let’s have a look at the file hierarchy for the home page.

  1. front-page.php
  2. home.php
  3. index.php

While serving the home page, WordPress will search for front-page.php. If that is not found, it will use home.php. If home.php exists, it’ll use that. If not, it will simply default to using index.php.

WordPress Post Detail

  1. single-[post-type].php
  2. single.php
  3. index.php

WordPress can have as many post types as we need. So this will be easier to get different design for all/some post types. By default ‘post’ is the main and default post type of the WordPress.

So for example, if your custom post type is product then it will be single-product.php

To know more how to add new post types in WordPress you can refer to this link.

WordPress Page Detail

  1. [custom-template].php
  2. page-[slug].php
  3. page-[id].php
  4. page.php
  5. index.php

Just the same as with post types, we can have a different page layout using the custom page template. So WordPress first searches for the files of the selected Page template (if it exists).

If none are found, it will search for the file with the slug of the current page. Basically, if the slug is aboutus, then it will search for the file page-aboutus.php in active theme folder.

WordPress will search for the files with the ID just like searching for the files with slug.

Category Page

  1. category-[slug].php
  2. category-[id].php
  3. category.php
  4. archive.php
  5. index.php

From the above flow, you can understand that how you can have different templates used for the category page. For instance, you could have a custom page based on slug and id, and then use a default “category.php” file for the rest of your categories..

Tag Page

  1. tag-[slug].php
  2. tag-[id].php
  3. tag.php
  4. archive.php
  5. index.php

This will be same case as the category. You can have different pages for tag slug and tag id also.

Taxonomy Page

  1. taxonomy-[tax]-[term].php
  2. taxonomy-[tax].php
  3. taxonomy.php
  4. archive.php
  5. index.php

Here goes the different file hierarchy for the taxonomy Pages.

Author Page

  1. author-[author-nicname].php
  2. author-[author-id].php
  3. author.php
  4. archive.php
  5. index.php

Here you come to know that you can have different designs based on users also. Same as category and tags we can have different files based on slug and ID of the user.

Attachment Page

  1. [mime-type].php
  2. attachment.php
  3. single.php
  4. index.php

Here you can see that you can have different page layout for different types of attachment. These can be differentiate from the mime type of the attached file.

Date Page

  1. date.php
  2. archive.php
  3. index.php

For the date specific layout we can create date.php in theme folder. Then the flow goes to archive.php and then at last index.php.

Archive Page

  1. archive.php
  2. index.php

As we come downwards to the type of files, number of files are reduced in the hierarchy. So this are the basic or we can say most used files in any WordPress themes.

Search Page

  1. search.php
  2. index.php

You can customize your search result with the search.php first. If search.php is not available then index.php will be served.

404 Page

  1. 404.php
  2. index.php

In the case of page or post not found, WordPress will search for 404.php then if not found then it will serve index.php.

Resource: Code.tutplus.com post

Stay tuned for more updates in upcoming presentations,

Happy coding!

 

Maroun Melhem

I’m a coding fan, open source contributor, occasional writer at blog.maroun.me