Echo Cabins

Wordpress developer test project from On The Map Marketing - On The Map

Project Requirements

The main objective is to create a simple Wordpress theme to see your overall knowledge of front-end and Wordpress. The task shouldn't take longer than 5 hours.

Theme Design Url Here

Technical requirements

1. ✗ - Create Wordpress theme, if you prefer you can use any of boilerplates, for example underscores.me, sage etc.
2. ✓ - Use Bootstrap 5
3. ✓ - Use SASS
4. ✓ - Use webpack or grunt
5. ✓ - Create responsive version
6. ✓ - Extra - create animations
7. ✓ - All elements can be hardcoded except the menu
8. ✓ - Theme should work on Google Chrome, Safari, Mozilla Firefox browser.
9. ✓ - Deliver the code (theme) in Github.
10. ✓ - Make sure to document your project in a simple README.md file
11. ✓ - Write README.MD file for how to set up theme

All the Tick [✓] marks requirement item has been completed, and the Cross [✗] marks are indicating not completed.

Project Work Submissions

Overview

The project is based on a WordPress theme development with the use of SASS for frontend design. The application is designed as per the required design from figma layout. All the images and icons and contents being used from that. The design is fully responsive for both desktop and mobile view. The design already tested into the different browsers like Google Chrome, Microsoft Edge, Safari and Mozila Firefox. As per the extra work about the animation of the website, the bootstrap slider has been used for slide show and for page contents transition 3rd party library AOS has used on the project. The navigation menu is also responsive in any view. Not only the menu comes if it's saved to the header position, but also the default design of the menu is also handled responsive. The logo is dynamic on the theme and the website is made from scratch without any boilerplate template.

Previews

Desktop Version

Mobile Version

Libraries and Frameworks Used

1. Bootstrap 5
2. Laravel Mix - Supports the SASS compilations through WebPack library
3. AOS - Animate on Scroll
4. WordPress CMS

Installation Process

1. Download the theme as zip from git repository
2. Logging into the WP admin dashboard
3. Go to Appearance > Themes from admin menu
4. Now click add new button
5. Choose the theme and upload
6. After successfully install, now activate the theme
7. Now all done

Theme Configuring Process

1. After successful installation, go to Appearance > Customize from admin menu
2. Now in customize go to Site Identity, there will be logo option
3. Click on the logo and upload the logo. By default site title will be shown as logo.
4. Now go to Appearance > Menu and create a menu
5. Now add menu item to the created menu
6. Now Choose menu Display Location and Save
7. All is done now.

Note: If need to create make a menu item as button shape, then please activate the CSS Classes from Screen Options at the top right corner of WP admin panel. Than click to the added menu item and there will be a field called CSS Classes (Optional). Now you Bootstrap 5 button classes and save the menu again, all will be working perfectly. Example: btn btn-sm btn-light text-dark

Live Demo Credentials

Here us live demo url of the theme: Live Demo

Author Info

Monirul Islam Sujon

Full Stack Web Application Developer

monirul.islam.sujon@gmail.com
www.misujon.com
+8801676707067

Thank you