WordPress Development Standards

primarily build the site on an HTMLPanda dev server.

use the latest version of WordPress available when the project is started.

create well-commented, clearly broken into sections and logically ordered CSS files following the page display order (body, header, navigation, content, row, sidebar, footer and more).

develop a custom WordPress theme based on the clients' PSD file in case the client hasn't provided any WordPress theme.

enable the availability of the Theme Customize Screen for a user role, use the "edit_theme_options" user capability instead of the "switch_themes" capability unless the user role actually should also be able to switch themes. See more at Roles and Capabilities and Adding Administration Menus.

set all externally pointing links to target=”_blank”.

disable the post commenting unless specified.

make author comments highlighted differently, support threaded comments.

discourage to crawl the site until moved to the staging server.

use the fonts of PSD files we receive. Moreover, the client needs to purchase the premium fonts in case of use otherwise similar fonts Google fonts will be used).

use Open Sans from Google Fonts in case fonts are not provided.

QA test the sites for browsers such as IE9+, Firefox 31+, Chrome 40+, Safari 7+, Microsoft Edge, etc.

QA test the sites on devices such as iPhone, iPad, Android phone, Android tablet, etc.

create an individual WordPress user admin record for each project we build for clients.

move the site at the completion of development to the customer’s final hosting location.

work on a child theme for a new section in case of use in the premium theme.

structure a stylesheet by using tabs to indent each property, add two blank lines between sections and one blank line between blocks in a section.

make sure that each selector should be on its own line, ending in either a comma or an opening curly brace.

create selectors that find the right balance between contributing to overall style and layout by using lowercase and separating words with hyphens when naming selectors.

use human-readable selectors that describe what element(s) they style and use double quotes around values for the attribute selectors, refrain from using overqualified selectors, div.container can be stated as a container.

always follow properties by a colon and space, make sure that all the properties and values are in lowercase except for font names and vendor-specific properties.

use hex code for colors, or rgba() if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: #fff instead of #FFFFFF.

use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible.

use a baseline for ordering such as display, positioning, box model, colors and typography and others.

follow the guidelines to retain a high degree of consistency such as spacing before the value and after the colon, use double quotes rather than single quotes.

make sure that the line height is also unit-less unless necessary to be defined as a specific pixel value.

comment liberally if there are concerns about file size, utilize minified files and SCRIP_DEBUG constant.

use a table of contents utilizes for longer stylesheets, especially those that are highly sectioned.

write smart code from the outset to retain the overview while remaining flexible throughout the change.

target the element that needs to be used as quick fixes on a one-off basis, e.g box{margin-top: 37px}.

verify validation against the W3C validator to ensure that the markup is well-formed.

make sure all tags must be properly closed under self-closing elements.

write all tags and attributes in lowercase. Besides, make sure that the attribute values are in lowercase when the purpose of the text is only to be interpreted by the machine.

use double or single quotes as per the W3C specifications.

use tabs and not spaces to make sure that the indentation is reflecting a logical structure.

use single quotation marks for string declarations.

make use of case statements indent within switch blocks.

function contents consistently indent, including full-file closure wrappers.

encourage jQuery’s 100-character hard-line limit, do indentation with tabs.

make sure lines should usually be no longer than 80 characters, and should not exceed 100 (counting tabs as 4 spaces).

always use braces for if/else/for/while/try blocks and always go on multiple lines.

make sure unary special-character operators (e.g., ++, –) must not have space next to their operand.

make sure that any ‘,’ and ‘;’ must not have preceding space.

ensure any ‘;’ used as a statement terminator must be at the end of the line.

assure that the ‘?’ and ‘:’ in a ternary conditional must have space on both sides.

ensure that there is a new line at the end of each file.

ensure that any ‘!’ the negation operator should have the following space.

make all function bodies indent by one tab, even if the entire file is wrapped in a closure.

assure spaces may align code within documentation blocks or within a line, but only tabs should be used at the start of a line.

JavaScript code should be placed in external files whenever possible.

Use wp_enqueue_script() to load the scripts.

JavaScript loaded directly into HTML documents (template files) should be CDATA encoded to prevent errors in older browsers.

use well-structured, error-free PHP and valid HTML WordPress coding standards.

use clean and valid CSS Coding Standards.

follow design guidelines in site design and layout.

use a stylesheet called style.css to control the visual design and layout of the web page.

use WordPress template files that control the way the site pages generate the information from the WordPress database to be displayed on the site.

use the optional functions file (functions.php) as part of the WordPress theme files.

write a custom library to work alongside a theme or application to encounter class names, write an OOP-based plugin to encounter class names.

make sure that class names should use capitalized words separated by underscores.

make sure all the acronyms used under the class names should be all uppercase.

use lowercase letters in variable, action, and function names.

follow the lowercase (versus camelCase) under variable names.

separate spaces with underscores while following the conventions for variable names.

name file names descriptively using lowercase letters. Hyphens should separate words.

prefer string values to just true and false when calling functions.

use Dashboard » Appearance » Header so that the header logo file can be added as an image.

link the logo to the home page.

use Dashboard » Appearance » Background to set background color and/or background image with scrolling.

use Advanced Custom Fields » Options Page to create global options for header content, footer content, etc. resulting in a Dashboard menu item called “Theme Settings” or “My Options”.

will set up Dashboard » Theme Settings/My Options » Contact Info as custom fields so that users can edit contact related details.

will set up Dashboard » Theme Settings/My Options » Social Media as custom fields so that users can choose icons and links for social media sites.

will set up Dashboard » Theme Settings/My Options » Copyright Statement as custom fields where user can add/edit the site’s copyright statement.

use the wp_footer() call, to appear just before closing the body tag.

use the proper DOCTYPE.

ensure the opening tag should include language_attributes().

make sure the charset element should be placed before everything else, including the element.

use bloginfo() to set the charset and description elements.

use wp_title() to set the element. See why.

use get_stylesheet_uri() to get the URL of the current theme stylesheet.

use Automatic Feed Links to add feed links.

add a call to wp_head() before the closing tag. Plugins use this action hook to add their own scripts, stylesheets, and other functionality.

create all menus using Dashboard » Appearance » Menus drag-and-drop editing tool.

clearly identify Menu Locations with names such as “Top Nav”, “Primary Nav” and “Footer Nav”.

build the responsive navigation using the defaults for Bootstrap or Foundation by default unless specified by clients or quoted specifically in the proposal.

assure that the Theme's main navigation should support a custom menu with wp_nav_menu().

ensure that Menus are supporting long link titles and a large number of list items. These items should not break the design or layout.

make submenu items display correctly. If possible, support drop-down menu styles for submenu items. Drop-downs allow showing menu depth instead of just showing the top level.

include wp_link_pages() to support navigation links within posts and pages.

display an "Edit" link for logged-in users with edit permissions.

create custom sliders using custom post types and advanced custom fields.

add slider options to the My Options area where transition type (e.g. Fade) can be selected from a list and transition speed can be set with a numeric variable.

make images in the responsive versions of the slider proportional.

put all text that overlays the slider in the full-screen view underneath the slider image in the responsive views.

work with premium slider plugins (e.g. Revolution) if provided by clients prior to development beginning.

list pages on Dashboard » Pages to closely follow the same order as the navigation.

use only one tag per page or post around the ‘Page Title’ or ‘Post Title’ unless stated in the client’s project requirements.

setup custom fields used in the ‘Page Editor’ or ‘Post Editor’ in a logical tab order and using the obvious naming syntax so that non-technical users can add/edit information.

set permalinks to default /%postname%/ under Dashboard » Settings » Permalinks.

name the theme as well as the theme’s template folder based on the project name. The name can be changed as per the clients’ need.

The first letter of the site or site logo is added as favicon.

create a template’s folder under the themes directory and create the requested template files there (example: templates/template-home.php.

create the following templates and provide custom CSS for home.php, full-width.php, single.php, and archive.php.

use the default responsiveness provided by Bootstrap or Foundation.

follow the CIA (confidentiality, integrity, and availability) rule for security purposes that limits the information accessible to the right parties.

use Open Web Application Security Project (OWASP) for web security that identifies the most serious application security risks.

use the custom URL link so as to hackers will hack/misuse any personal data of any user.

make sure that the set of functions and APIs available to assist to assure unauthorized code cannot be injected and help them to validate and sanitize data.

assure that cross-site scripting (XSS) is incorporated that helps to ensure that user-supplied data is safe.

use the best WordPress security plugins such as WordFence, BulletProof Security, Sucuri Security, iThemes Security (formerly better WP Security) and many others to keep the website safe and away from hackers.

only collect and use the personal data for the purpose it was intended for, and for which the user was clearly informed of in advance. Only collect the user data which is needed and will not make extra copies of data from other plugins.

Incorporate the best plugins available for privacy such as MonsterInsights, WPForms, Cookie Notice, Delete Me and many others.

ensure that the data collected and used is correct, relevant, and up-to-date.

inform users how their data is being collected, used, and shared, as well as any rights they have over those uses.

assure that the work meets the privacy regulations of the location where it will be used to collect and process clients’ data.

make sure that all the collected information/data is handled in accordance with the General Data Protection Regulation (GDPR) legislation.

install and activate the ‘Theme Check’ plugin. Upon activation, visit Appearance » ‘Theme Check’ to see it in action.

turn on the debug mode for theme testing by simply putting this line in wp-config.php file to enable WP_Debug.

enable track formatting in ‘Theme Check’ needs to define a couple of variables where wp-config.php - TC_PRE and TC_POST are used as a ticket header and footer.

review using “define(\’WP_DEBUG\’, true);” in wp-config.php and also use the test data from the Theme Checklists (TC).

reduce bugs/regressions with our optimal testing process that meets the latest development standards.

do the testing that includes different types such as unit, functional, performance, acceptance/end-to-end, integration, etc.

use the testing tools such as WordPress PHPUnit Test Suite, WP Mock, etc.

work on speed optimization for desktop as well as mobile by following things such as compressing and scaling all images, combining images into CSS sprites, minify HTML, etc.

Check template files against Template File Checklist, do a run-through using the Theme Unit Test.

Validate HTML and CSS and see validating a website.

Check for JavaScript errors.

Test in the target browsers. For example, IE7, IE8, IE9, Safari, Chrome, Opera, and Firefox.

Clean up any extraneous comments, debug settings or TODO items.