Here is What I Have Learned with My Recent WordPress Project
Hi there! It’s been a long time, couldn’t update the blog for almost two months as I was working on a WordPress Woocommerce project. This article will explain my WordPress WooCommerce experience which I was working on. Here I have shared all the new things that I have learned with the project.
Also read:
- 6 Most Useful Resources for Web Developers to Get Free HTML CSS Snippets
- How to Load Older Articles Dynamically Using AJAX in WordPress
What was The Project?
First, let me share some details about the project along with the teammates. Well, it was a custom WordPress development project where we had to create a custom WordPress theme and integrate WooCommerce with the theme, it was a membership website allowing users to become a member of the website for annual or quarterly basis.
The Team
We were 3 members in the development team, Shirish, Veeresh, and me (Shrinivas Naik). Shirish who is the founder of Shirish Productions directed the team, Veeresh looked after the design and CSS segment while I was working on building custom WordPress theme and custom WooCommerce templates.
Our Experience
It was a great experience to work on this project, we have learned a lot of new things in WordPress as well as WooCommerce. personally, I have good experience working on custom WordPress themes and WooCommerce projects but this one was a challenging project, we had to match the design provided with pixel perfection on HTML and CSS. Well, let me share what all the stuff we have implemented with the custom WordPress theme we built for this project.
What We Implemented in the Custom WordPress Theme?
We had to develop a custom WordPress theme according to the PSD design and we followed the design which was uploaded on Zeplin. So, here are the components/options we have implemented with our custom WordPress theme.
Theme Settings Panel
We used Redux Framework to integrate the theme setting panel for our theme. Redux is an open-source option framework for WordPress to create user-friendly options panel for WordPress theme.
Loading Next Posts with AJAX
As per client’s requirement, we had to load next two posts on scrolling to the end of the first article. We achieved it using AJAX.
AJAX based Archive Page
We have created AJAX based archive page for our custom WordPress theme where users can select the category, month and year from the drop-down to query and load the articles they wish.
Showing Related Posts Based on Tags
We coded the single article page to show the related posts at the end of the article based on post tags.
Choosing Color for Categories
According to the client requirement, we had to change the header portion color for every category. So, we provided an extra input box in the category options to set the category color.
Custom Post Types and Fields
We wanted to create custom posts as well as custom fields for our custom WordPress theme, for this we used Toolset Types WordPress plugin to make our job easy.
Customized WordPress Excerpt
Advanced Excerpt WordPress plugin helped us to customize the post excerpt, with this plugin it is possible to hide the image or any HTML element in the post excerpt and customize the length of the excerpt.
Well, now let’s move to the WooCommerce part, we did the following customizations and used these WooCommerce add-ons in our theme.
Custom WooCommerce Templates
We modified the default WooCommerce templates such as My Account and Checkout pages as per client’s needs, we added the tabs (links) for account dashboard, orders and downloads with the fontawesome icons on the left side and displayed the respective content on the right. We have completely customized the WooCommerce checkout page and made it step by step wizard.
Overriding the Default WooCommerce Styles
We wanted to set our own style for WooCommerce elements such as buttons and input boxes etc. so we used the wp_enqueue_style function to override the WooCommerce general style.
Woocommerce AJAX Login
WooCommerce Login Popup and Shortcodes plugin came useful for adding AJAX based Woocommerce login for our website. This plugin is useful for showing login popup and it also supports shortcode.
WooCommerce Membership
The project we worked was a membership site and we wanted to restrict our premium content for non-members, we used WooCommerce Memberships (paid) plugin to achieve this task.
Well That’s it
Well, this is how we developed the custom WordPress theme with WooCommerce integration. This was not an easy job but the teamwork, passion towards the work and urge of learning something new made it easier.
It was great experience working with you as well as learning and exploring so many possibilities WordPress brings.
Going further let’s build something cool using the new knowledge we have earned with this project.
Thank you for dropping by Shirish and ya, of course it is going to help us to come up with some new stuff.
Curios, have you ran into any WordPress themes that use the Java Framework “Modernizer?” Its a great lightweight framework for media heavy websites.
Ya, it’s useful for detecting browser capabilities.
Redux Framework is cool. Thanks for the tip. Everbody, please use that!
Thank you for dropping by Steffen.
Thanks a bunch for sharing this! I’m just in the process of creating a custom WP theme myself, too, so reading about the components you guys used was really helpful!
We are glad our article helped you, cheers!
Superb Article .. Yes Redux is one of the best option when it comes to user friendly framework. Thank you for sharing this.