Files structure

Updated: May 15, 2017

This article will help you orientate in the structure of theme and plugins files in case you need to modify them.
Note please, necessary is knowledge of website development to modify theme files and we don’t support problems caused with own modifications in files.

Most of html structure is divided into more files to make the codes better readable and divided into logical sections.

If you face part like {includePart parts/post-content}, it means that there are included codes from file post-content.php in folder parts.
Function includePart using relative path to file, so the path from folder of currently opened file. To change that section you should look for file ./wp-content/themes/ThemeName/parts/post-content.php.

Blocks of codes in files used for more sections are well commented and each section starts with description comment.

Header, Footer and main layout of page

If you want modify something in header or footer of theme, you should look for files header.php and footer.php in the root directory of Theme:

  • ./wp-content/themes/ThemeName/header.php
  • ./wp-content/themes/ThemeName/footer.php

Main skeleton which create the part between header and footer come from file:

  • ./wp-content/themes/ThemeName/@layout.php

How to write own php codes into header

Editing of header.php file require a bit different structure of starting and ending php marks. Php codes usually written between <?php and ?> marks needs to be replaced with marks {? and }.

So instead of writing line:

<?php echo "Hello world!"; ?>

You have to write:

{? echo "Hello world!"; }

It’s because of used Nette framework where php codes are represented with Nette macros inside {} brackets.

Still have problems to insert custom javascript into header file following recommendations above?
It’s probably because of brackets { and } used in javascript. Make sure that in your javascript code is empty space after bracket starting bracket { and also empty space before ending bracket }. Otherwise will be javascript code inside brackets recognized as uknown Nette macro what cause the crash of website.

Content displayed via Element in page builder

All files related to elements you can find in theme folder: ./wp-content/themes/ThemeName/ait-theme/elements
Each element is inside own folder, with files named by element:

  • HTML structure is created in file: ./wp-content/themes/ThemeName/ait-theme/elements/ElementName/ElementName.latte
  • options structure used in element in Page Builder: ./wp-content/themes/ThemeName/ait-theme/elements/ElementName/ElementName.options.neon

Widgets

All widgets provided with theme are created from files in folder ./wp-content/themes/ThemeName/ait-theme/widgets where each file include the name of widget used in WordPress Widgets options.

Standard pages, single pages of Posts, Custom Post Types

Content of posts pages is created from files in theme root directory:

  • content of standard Page created in default WordPress Visual Editor in edit screen:
    ./wp-content/themes/ThemeName/page.php
  • single blog Post page content:
    ./wp-content/themes/ThemeName/post.php
  • single Custom Post Type page content (ie. Events, Items, Job Offers, Portfolios detail pages):
    ./wp-content/themes/ThemeName/single-CustomPostTypeName.php
  • Custom Post Type taxonomy page:
    ./wp-content/themes/ThemeName/taxonomy-TaxonomyName.php
  • blog posts archive page :
    ./wp-content/themes/ThemeName/archives.php
  • page set up as Posts Page (Blog) in Settings > Reading options or Latest Posts front-page:
    ./wp-content/themes/ThemeName/index.php
  • nothing found page (404 page):
    ./wp-content/themes/ThemeName/404.php

Posts archives and Taxonomies pages

Archives pages which display blog posts from specific time or category with pages related to special posts taxonomies come from files:

  • blog posts archive page :
    ./wp-content/themes/ThemeName/archives.php
  • Custom Post Type taxonomy page:
    ./wp-content/themes/ThemeName/taxonomy-TaxonomyName.php

CSS files

All main design files are inside theme folder ./wp-content/themes/ThemeName/design/css
Our themes using Less css pre-processor which allow us use in css variables, functions and other techniques to make css styles extendable.

  • main css styling of theme:
    ./wp-content/themes/ThemeName/design/css/style.less
  • definitions of fonts:
    ./wp-content/themes/ThemeName/design/css/typography.less
  • applied font sizes variables (real sizes are applied to variables in style.less file):
    ./wp-content/themes/ThemeName/design/css/fontsize.less
  • responsive design:
    ./wp-content/themes/ThemeName/design/css/responsive.less
  • additional libraries like FontAwesome:
    ./wp-content/themes/ThemeName/design/css/libs

Javascripts

Javascripts related to general theme functionality are inside folder ./wp-content/themes/ThemeName/design/js
Each element might include own javascript files which provide functionality related to specific element, these javascripts are inside folder of specific Element:
./wp-content/themes/ThemeName/ait-theme/elements/ElementName/design/js

Images

Images which come with theme and are used in design of theme are in folder ./wp-content/themes/ThemeName/design/img

Woocommerce

To provide themes with unique design for Woocommerce eshop, included are files which amend default look and layout of shop parts. Files are in folder:
./wp-content/themes/ThemeName/woocommerce

Translation files

All po and mo translation files are located in AIT Languages plugin, read more here

Custom Posts Types registration files

Files which register Custom Post Types used in theme are inside AIT Toolkit plugin, locate folder:
./wp-content/plugins/ait-toolkit/cpts/CustomPostTypeName/
For example Portfolio custom post type:

  • post type is registered in file:
    ./wp-content/plugins/ait-toolkit/cpts/portfolio-item/@portfolio-item.cpt.php
  • options available on Edit screen of post inside metaboxes:
    ./wp-content/plugins/ait-toolkit/cpts/portfolio-item/portfolio-item.metabox.php

About Ivan Hudak

Works as an IT consultant for over 7 years now. He's a manager of our support team. Knows everything about all our themes, HTML, CSS, PHP and jQuery.