Building Themes

This is the basic process that we usually follow when we’re building a ketchup theme.

Pre Naming

It’s important all of Ketchup Themes to have consistency in their html, css, js and php scripts.

All of the themes must have pre named classes and ids, so that they’ll be compatible with other technologies.

Here are the basic classes/ids pre names that a theme could have

kt-wrapper = The Wrapper of the Theme
kt-wrapper-inner = An intermediate container between the kt-wrapper and the container class of bootstrap.
kt-header = The Theme Header
kt-logo = The logo element or the logo area
kt-bloginfo-name = The name of the blog (usually inside kt-logo)
kt-bloginfo-desc = The description of the blog (usually inside kt-logo)
kt-slider = the container of the slider
kt-top-nav = The Top Navigation Of The Theme
kt-main-nav = The Main Navigation Of The Theme
kt-divider = A general divider that usually is a class and can be placed on various areas of a theme
kt-header-divider = A single (id) or a number of dividers (class) that is specifically placed in the header of the theme
kt-main = The main content area of the theme. Usually it’s an id and doesn’t include kt-sidebar in it
kt-article = A class or id for a single article
kt-articles= A class for a group of articles.
kt-categories = The category container class/id of the article
kt-tags = The tag container of id/class of the article
kt-pagination = The pagination id
kt-sidebar = The sidebar id of the theme
kt-footer = The id of the footer
kt-footer-divider = A single (id) or a number of dividers (class) that is specifically placed in the footer of the theme
kt-copyright = Usually it will be an id of the copyright notice at the end of the theme
kt-btn = Custom buttons classes or ids. Usually they are implemented along with the other botstrap btn classes and hack the colors and hover effects of those buttons.

De Facto classes of theme (outside of bootstrap)

Body must have a break-word;

body {
word-wrap:break-word;
}

All images must have by default a max-width of 100% and height auto;


img {
max-width: 100%;
height: auto;
}

This class centers elements of a theme. It might be used on containers or elements such as img.

.kt-centered {
margin-left: auto;
margin-right: auto;
display: block;
}

All (get_header_image() conditionals must include the default bootstrap class=”img-responsive” in order to be responsive.

All images must include the default bootstrap class=”img-responsive” in order to be responsive.

style.css segmentation

Here we place the general css classes, ids and elements such as body, img, .kt-centered, kt-btn etc


/***
*
GENERAL
*
***/

Here we place all the css classes/ids of the header

/***
*
HEADER
*
***/

Here we place all the css classes/ids of the article – content. It includes the classes of the latest posts, single.php, archive.php, tags.php, page.php etc

/***
*
MAIN
*
***/

Here we place all the css classes/ids of the comments

/****
*
COMMENTS
*
***/

Here we place all the css classes/ids of the sidebar widgets

/***
*
SIDEBAR & WIDGETS
*
***/

Here we place all the css classes/ids of the footer widgets

/***
*
FOOTER & WIDGETS
*
***/

Here we place all the bootstrap overrides

/***
*
BOOTSTRAP OVERRIDES
*
***/

Here we place all the default wordpresss classes such as alignleft, align right etc

/***
*
DEFAULT WORDPRESS CLASSES
*
***/

Functions

All themes must have their functions prenamed with the theme name.