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.
