10 fundamental rules for WordPress layout

upqode | Jan 9th, 2018

Not each layout can be developed on WordPress, even if the code was perfectly written, it is clear and easy to understand. But each layout written in accordance with WordPress requirements can function independently without WordPress. If you come to the decision to create a theme for the WordPress platform, the following instructive tips can be useful:

1. Use Classes, not identifiers

Quite often tweaking the layout on WordPress page builders are used, which make it possible to apply one block several times on the same page (for example, a slider).

If you are using an identifier in the layout of this item, and there have already been two such elements on the page, then this identifier will no longer be unique, and therefore its` main purpose will be lost and may break your code. Therefore, try to use the classes, not IDs, in your layout.

2. Wrapper element

When trying to optimize styles, HTML developers often create group styles for a particular class. For instance, when styling button you can use one class to add a border, background, font, padding, margins, etc.

But, if the design on one of the block was changed, where the same button was used as on the other blocks, then you should use the wrapper to change the style of this particular button, without influencing the rest of buttons in other blocks. It is recommended to use prefixes for all classes. A prefix may be a short title for the topic. For example – “theme-banner-wrap”.

3. Inheritance from wrapper block

If you use the BEM methodology, then you know all the advantages of this layout. if not, it is worth to master this methodology or similar, as it will be impossible to avoid these necessary skills while tweaking the layout on WordPress.

In short, the element styles must be inherited from the wrapper element, but not from, for example, body.

4. Use the standard HTML template for the menu

When styling the menu, you definitely need to use classes which WordPress generates for this menu, this way the process of tweaking the layout on WordPress will not be complicated.

5. The menu should always include two levels nesting

Even if you do not have the second and third level menu in the design, they should always be foreseen in the layout, because WordPress gives such a possibility to its users.

6. Similar styles, different wrap class

Try not to change the structure for different menu or other items, but only change the wrap class.

7. Scripts Initialization – universal

Using different JS-libraries in the layout, for example, a slider, you need to make a universal initialization, since there may be a few of them on the page and you need each of them does not break each other’s code.

8. Better not to use hardcode for height and width elements

If in your layout text takes up three lines, the client can add ten and more lines of the text. Therefore, you can not hardcode for this type of element height or width.

9. Background-image only in HTML

It is recommended to use CSS background-image option only in case you know for sure user will not change the image. In all the other cases, use background image features through HTML.

10.Comment your code

Commented code is half the time saved. Do not forget about this.

Filed under: WordPress Development

Related posts


What They Say

This is a team that pays great attention to detail and does great work. I had a design done for my website by a separate designer, and Nick implemented the design perfectly for both mobile and desktop. His team uses project management software to track tasks and break up the work for his team into sprints. You aren’t just getting a developer when you hire Nick, you’re also getting great project management and organization. I 100% recommended it.

Erik DiMarco

Manager, NimbleDesk

UPQODE delivers high-quality web work quickly, thanks to their expertise in PHP and WordPress. Regular communication and reasonable prices further smooth the workflow. We've been very pleased with the results. UPQODE responds far more quickly to development changes than our core team would be able to. They are highly knowledgeable about best practices in WordPress, and their ability to rapidly scale up whenever we need a project completed makes them a valuable asset for us in our development needs.

Jim Kreyenhagen

VP Marketing and Consumer Services, doxo

The engagement resulted in an aesthetically pleasing website that satisfied internal stakeholders. They dedicated capable resources that ensured effective collaboration. UPQODE’s attentiveness and flexibility support a successful partnership. They created a beautiful website that we love. The site functions to advertise a certain medical procedure, so I can’t speak to any traffic metrics. UPQODE's responsiveness was their most impressive quality.

Jessica Echevarria

Administrator, University Division

UPQODE delivered a functioning and accessible website. Their adaptable approach to customer service allowed for a smooth development process and set the foundation for possible future collaborations. The delivered website met all of my requirements and explains everything I need it to. UPQODE was very understanding and accommodating of my changing needs throughout the project. The communication was excellent. I plan to work with them again for future needs.

Darren Devost

Owner, Devost's Dynamic Marketing

The vendor succeeded in creating innovative WordPress solutions. Their availability enabled the client to deliver products more quickly. UPQODE's project management was good—their staff met weekly with the client and was always very punctual. UPQODE brought troubleshooting, recommendations, and ideas that our previous partner was unable to provide. They deliver work on-time and within budget. The design they’ve inserted into the product has enabled us to deliver products more quickly. They have always been very helpful in recommending better solutions.

David Bill

President & Founder, Liquid Knowledge Group
Request a Design