# Karan NA Gupta > Tech Blog ## Posts - [Deep Ocean Amber – A VS Code Theme with Deep Blue Backgrounds and Amber Accents](https://karannagupta.com/deep-ocean-amber-a-vs-code-theme-with-deep-blue-backgrounds-and-amber-accents/): Install My Deep Ocean Amber Them from the Visual Studio Marketplace here. I’ve been switching between dark themes for years and kept landing on the same two for different reasons — Cobalt2 by Wes Bos for the deep blue workbench, and One Dark Pro by Binaryify for the syntax colors. Eventually I stopped switching and […] - [Using Custom Workbox Service Workers with Create-React-App (without ejecting, no third-party libraries)](https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/): Currently, there’s no way to add a custom service worker with the Workbox InjectManifest plugin in create-react-app (2.x). There are a few solutions floating around, but if you don’t want to eject, here’s a simple way to add Workbox to your Create-React-App (2.x) workflow. The Issue: This PR would allow adding custom configurations to the […] - [Integrating a Vue SPA with WordPress](https://premium.wpmudev.org/blog/creating-a-hybrid-single-page-app-wordpress-with-vuejs/): Integrate a Single Page Search App within your existing WordPress application with Vue.js - [Write Your Own Advanced Search WordPress Plugin with Autosuggest](https://premium.wpmudev.org/blog/code-your-own-autosuggest-enabled-advanced-search-wordpress-plugin/): In this article, I’ll show you how you can build your own advanced WordPress Search Plugin with support for autosuggest, custom post types, taxonomies, custom fields, and caching from the ground up. - [Create WordPress Admin Tables Using the WP_List_Table Class](https://premium.wpmudev.org/blog/wordpress-admin-tables/): Check out my article on the WPMU DEV blog on creating Admin Tables in WordPress using the WP_List_Table Class. - [Testing WordPress Plugins with PHPUnit](https://premium.wpmudev.org/blog/unit-testing-wordpress-plugins-phpunit/): Check out my article on  the WPMU DEV blog about unit testing WordPress plugins with PHPUnit, WP-CLI and VVV. - [How to Process Custom Forms with the WordPress API](https://premium.wpmudev.org/blog/handling-form-submissions/): Check out my article on the WPMU DEV blog where I’ll walk you through the process of submitting custom forms in WordPress via an HTML as well as an AJAX request, and handling the form in PHP to validate, sanitize and process the form input. - [WordPress Plugin Boilerplate with Support for Autoloading and Namespaces](https://karannagupta.com/wordpress-plugin-boilerplate-support-autoloading-namespaces/): Plugin Boilerplates are a great way to start developing without having to rewrite standard code. They also ensure that all your plugins are consistent with respect to layout and coding practices. The WordPress Plugin Handbook lists best practices to develop WordPress plugins. Among these are a few Boilerplate Starting Points that you can use instead of writing your […] - [How to save or update WooCommerce custom checkout fields from the admin dashboard or the user's profile](https://karannagupta.com/how-to-save-or-update-woocommerce-custom-checkout-fields-in-the-admin-dashboard-or-user-profile/): Overview In a recent tutorial I explained how one can add custom fields to the WooCommerce checkout. However, adding custom fields to the checkout don’t fully enable them in the admin user profile area or the user’s profile page. The custom fields will probably show up in the user’s profile pages but any modifications to […] - [How to change the Background Image using Featured Image in WordPress with the Genesis Framework](https://karannagupta.com/change-background-image-using-featured-image-wordpress-genesis-framework/): Overview In this article I’ll explain how you can set the background image for any page or post using its own Featured Image in WordPress. This will allow you to have different background images for different pages or for posts using a custom post type. The default background image set using Customizer or CSS will load when […] - [Vagrant VVV + Windows 10 + WSL - Bash on Ubuntu on Windows - Part 2](https://karannagupta.com/vagrant-vvv-windows-10-wsl-bash-ubuntu-windows-part-2/): Overview: Part 1 of this article explains the setup for Vagrant in WSL – Bash on Ubuntu on Windows If you’ve got Vagrant up and running, then setting up VVV is the same as in Linux. However, I had a lot of issues with SSH. And vagrant ssh would just hang in my case. I […] - [Vagrant VVV + Windows 10 + WSL - Bash on Ubuntu on Windows - Part 1](https://karannagupta.com/vagrant-vvv-windows-10-wsl-bash-on-ubuntu-on-windows-part1/): Overview I’ve never really been a huge fan of the Windows shell. They’ve come up with quite a few solutions, and there were also third party tools like Cygwin. Yet, Linux has been the default development environment for me (and most developers around the world. MAC is linux based too 😉 ) Recently Microsoft did […] - [List Posts in a Category on a WordPress Page with the same name as the Category](https://karannagupta.com/list-posts-category-wordpress-page-name-category/): Overview: In this tutorial I’ll explain how you can list posts under a category on a WordPress page with the same name as that of the category. We will use Custom Page Templates to achieve this. There may be times when you do not want to display a blog or have the post based layout, and only use Pages. […] - [How to save WooCommerce custom checkout fields with the wordpress user meta](https://karannagupta.com/save-woocommerce-custom-checkout-fields-wordpress-user-meta/): Overview: In a previous post – How to reconfigure and rearrange WooCommerce checkout fields – Part 1, I explained the process of creating custom fields that can be used on the WooCommerce checkout page. In this tutorial I’ll explain how you can associate the custom fields to the user meta. By default simply saving the […] - [How to reconfigure and rearrange WooCommerce checkout fields - Part 2](https://karannagupta.com/reconfigure-rearrange-woocommerce-checkout-fields-part-2/): Rearranging WooCommerce Checkout Fields To rearrange the woocommerce checkout fields which include any custom fields we will need to override form-billing.php by copying it out from the from the WooCommerce plugins directory – wp-content/plugins/woocommerce/templates/checkout to a directory under our theme wp-content/themes/yourtheme/woocommerce/checkout/. I have already explained this bit in Part 1 of this tutorial. The following snippet worked for my setup […] - [How to reconfigure and rearrange WooCommerce checkout fields - Part 1](https://karannagupta.com/reconfigure-rearrange-woocommerce-checkout-fields-part-1/): In this tutorial I’ll talk about reordering WooCommerce checkout fields using php which also include custom WooComerce fields. The solution had worked for me for WooCommerce 2.x and works on the current version 3.0 as well  Overview One of my projects required memberships and concert seats to be sold online using WooCoomerce. But I won’t be […] - [Using ACF - Bidirectional Relationships to show linked Custom Post Type in Posts - Part 2](https://karannagupta.com/using-acf-bidirectional-relationships-show-linked-custom-post-type-posts-part-2/): Overview In Part 1 we created a bidirectional relationship between a Custom Post Type – Videos and a Post and also between Videos and another Custom Post Type -Events. So eventually a post about a press conference can have video(s) or Events can have Video(s). Let’s get started Below an event or post that has a linked […] - [Using ACF - Bidirectional Relationships to show linked Custom Post Type in Posts - Part 1](https://karannagupta.com/using-acf-bidirectional-relationships-to-show-linked-custom-post-type-in-posts-part-1/): Overview This tutorial will cover the concept of bidirectional relationships using ACF to link a Custom Post Type and a Post in WordPress. We will then display additional information under a post (or a CPT) if it has a link to a CPT. Currently bidirectional relationships are not created by default in the ACF plugin […] ## Pages - [Home](https://karannagupta.com/) - [Blog](https://karannagupta.com/blog/) - [About](https://karannagupta.com/about/) ## Optional - [Agent (MCP protocol)](websites-agents.hostinger.com/karannagupta.com/mcp) [comment]: # (Generated by Hostinger Tools Plugin)