Created a website on CMS WordPress for the QA-tester’s blog.

Site: https://webenergy.mrpl.info/

My role in the project

  • selection of a design template and its adaptation in Figme to the theme of the site
  • layout on the Figma template
  • creating a valid WordPress theme
  • installing and configuring a theme on a hosting
  • adding demo content

Layout

Layouts were created using the Gulp.js compiler. Styles are written in SASS preprocessor (SCSS syntax), html-code is in PUG preprocessor (Jade). Project files are divided into logical modules according to their role on the site, which makes the layout easy to expand.

The HTML code is completely valid and has no errors or warnings.

Styles are written in “vanilla-css”, that is, without using frameworks like Bootstrap or FlexboxGrid.

Results of site analysis using the W3C validator

The layout of the site is responsive, well displayed on mobile devices and desktops. The main page of the site is designed as a landing page.

Based on the design of the main page, templates were created for permanent pages and posts, for displaying search results and a 404 error page.

Libraries and js plugins I have used:

  • Superembed.js – detects embedded videos of popular video services and makes it responsive;
  • Fancybox.js – jQuery plugin for creating modals and galleries;
  • jQuery – popular JavaScript framework.

WordPress theme

I have integrated the finished layout on WordPress. The created theme follows the rules and standards of the WordPress codex.

The integration did not use builders or third-party plugins, which can slow down the loading of the site or load the hosting. All theme customization is done through the WordPress Customizer API. Live preview works, i.e. when you change the settings, the page preview area is automatically refreshed.

For some blocks of the main page, non-standard controls are written, these are

  • multiple choice of terms (tags) by analogy with the choice of categories on the post edit page
  • image gallery
  • a list with an arbitrary number of elements in the form of a form in a modal window

The theme is multilingual with the Polylang plugin. All Customizer API settings are translated by the standard tools of this plugin.

After the integration of the layout, the theme has loading speed indicators in the “yellow zone” (70-80%).

Home page

Theme settings

Screenshots of page templates

51vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x