There are a lot of great frameworks for Oxygen out there such as Automatic.css, OxyNinja, and OxyMade. In this article, we're going to go over Tailwind CSS, which is a framework that is a utility-first CSS framework that only loads the necessary CSS from its framework onto your site. This is slightly different from the other frameworks above that load all their classes and stylesheets into Oxygen, which means their entire framework is loaded onto your site.

Now, there are at least two quick-start ways to get Tailwind CSS working with Oxygen. The first is through a plugin called Oxywind, which has a yearly cost and is designed specifically for Oxygen. The second is through a plugin called TailPress, which is free (at least at the time of this writing).

We're going to use TailPress in this example.

Basic Setup:

To get started with Tailwind CSS, you'll need to do the following:

1. Go to Plugins > Add New in /wp-admin and search for "TailPress". Once you've found the plugin, install it and activate it.
2. Next, go to https://tailwindcss.com, and keep that tab open as you'll want to reference it for class names.

That's it for the basic setup, we can now get started designing with Tailwind CSS.

Designing a Site in Oxygen:

Now that Tailwind CSS is all set, we can get started on designing. You can do this by opening a page or template in Oxygen.

Once you have a page or template open, go ahead and start adding some classes to an element. For example, to make a Section black, you can add the class "bg-black" to the Section.

You can use other colors with different shades as well, such as "bg-indigo-700" or "bg-indigo-400".

Or, you can use "text-center" to center-align the text within a section, and you can use "text-white" to make the font color white. And you can change the font size by using something such as "text-2xl" or "text-4xl".

As long as the class is available in Tailwind CSS, you'll see the changes take place immediately in Oxygen and on the front end.

The one caveat to the TailPress integration with Oxygen is that each class will be added twice to the stylesheet. The first time, the class is added by Oxygen and will contain a blank CSS declaration. The second time, the class is added by TailPress with the necessary rules for the declaration. So, this does create a small amount of bloat on your site. I don't know how/if Oxywind handles this in their plugin.

Modifying your Tailwind Config

TailPress does allow you to modify your Tailwind Config via Settings > TailPress in /wp-admin. So, for example, you can add custom colors using something such as the following:

{
	corePlugins: {
		preflight: false,
	},
	theme: {
		colors: {
			'primary':'#223543',
			'secondary':'#ca9d76',
			'accent':'#dcd9c1',
			'base':'#5d5d52',
			'shade':'#73724a',
		}
	}
}

You can then call those colors in Oxygen using classes such as "text-primary" or "bg-color-primary". This is great when you want to keep your colors subjective to their use and allow for easy color updating based on holidays or dark themes.

There are more options you can add to your configuration that you can read about here: https://tailwindcss.com/docs/theme.

That's it for this tutorial, happy sailing!

As a WooCommerce store owner, you may find yourself wanting to change something in a WooCommerce template from time to time. This might be changing the wording of an email template on the checkout page or something else altogether.

Traditionally, you would add the WooCommerce template to the appropriate directory in a theme. However, since Oxygen disables the WordPress theme system, you’ll need to do this using a custom plugin.

We’ve created the WooCommerce Templates for Oxygen plugin that includes the necessary functions to tell WooCommerce to use its templates first instead of the default templates. 

How to use the WooCommerce Templates for Oxygen. 

• Download the plugin and unzip it to your computer:
• Copy the WooCommerce template you'd like to override to the appropriate directory within this plugin. You may find a list of WooCommerce templates for your version of WooCommerce here: https://docs.woocommerce.com/document/template-structure/.
• Make the desired changes to the overridden template and save. 
• Zip the plugin.
• Upload your zipped version of this plugin to your WordPress install.

A Step-By-Step Example:

Let’s assume you'd like to change the “Proceed to checkout” text on the product page to “Proceed to Shipping Dock”. 

To do this, download the plugin from the link provided above and unzip it on your computer. Next, open the entire folder (woocommerce-templates-oxygen-main) in a code editor, such as Visual Studio Code.

Now, you're ready to get the desired WooCommerce template file. Use the WooCommerce Template Structure link above to be directed to WooCommerce's GitHub and find the appropriate template for the version of WooCommerce you are using.

For this example, the template may be found under Templates > Cart: https://github.com/woocommerce/woocommerce/blob/trunk/templates/cart/proceed-to-checkout-button.php.

The easiest way to get this template into the plugin is to click the Raw button on GitHub and copy the code on that page. 

Go back into your code editor, create a new file under the WooCommerce > Cart directory called proceed-to-checkout-button.php.

It’s crucial that the filenames and locations in your plugin directly match the location in WooCommerce. Otherwise, the override may not work correctly. 

Now you can edit the template as needed. In this scenario, we are simply updating the “Proceed to checkout” text to “Proceed to Shipping Dock”. Once you're happy with the changes, save the file.

Now, all you'll need to do is zip back up the entire woocommerce-templates-oxygen-main directory and upload it to WordPress. 

Once activated, you should be able to navigate to the Cart page and see the changes. 

That’s all there is to it. 

Happy voyages!

Featured Image by Mudassar Iqbal from Pixabay

Progressive Web Apps, or PWAs are a fairly-new technology that has been emerging in the past years. In my opinion, its a welcoming change for creating apps. Up until the introduction of PWA, apps were traditionally created alongside websites. You could use APIs to fetch website functionality and articles, but it often required you to manage one set of code for your website, and one set of code for your application. With PWA's, you're able to use one set of code to manage both.

Today, we're going to talk about how to set up your WordPress install into a PWA. Luckily, we only need two plugins to make this happen, and a few minutes:

PWA by PWA Plugin Contributors

The first plugin is PWA by PWA Plugin Contributors. This plugin does not actually turn your site into a PWA, but instead provides a lot of the background elements necessary to make your site PWA compatible.

One of the most important features that it adds, is the ability for "Offline browsing" found under Settings > Reading in the /wp-admin panel. Once you have the plugin installed, go ahead and activate that feature.

Super Progressive Web Apps

The second plugin I'm using is called Super Progressive Web Apps by SuperPWA. Once you activate the plugin, you'll be redirected to their Settings page where you will be able to set your Application Name, Description, Logo, App Colors, and a variety of other things.

Once both plugins are set up, clear any caches created by plugins or your server, and you should be able to download your PWA.

Takeways

While it is straightforward to create a PWA with WordPress using the plugins above, it's important to understand when your plugin may or may not be beneficial. For example, if you're looking to use features on the phone such as GPS or a camera, PWA may not be the best option. However, there's a great little site that helps you to see what PWA's can do: https://whatpwacando.today/.

One of the biggest downsides of PWAs is that they don't seem to be the greatest for offline storage. We're looking at turning our Trivia-based app (Triviquest) into a PWA and are hoping to find a way to allow users to access questions offline. While there are some options available, it does not seem like the easiest solution compared to a traditional app.

Finally, a wonderful benefit of PWAs is that as the time of this writing, it does not appear that you need to pay those insane 30% royalty fees on any digital products sold on your app. So, you may find yourself saving some cash to focus on the things you love.

If you're interested in getting a PWA up and running for your site, let us know. We'll be glad to assist!

For years, companies and organizations have relied on services and features of social media websites such as Facebook to be their primary location on the internet, or they may sell their products solely on Amazon. While this may seem efficient and easy at the time, it's much more beneficial to build your own site now, so that you have better control of your content, your brand, and your customers.

1. Your Permanent Address on the Internet.

First and foremost, getting a permanent address is as easy as purchasing a domain name. Domain names have the same effect as having a physical street address on the internet. A domain name costs about $10 per year. That's right, for $10 per year, you can ensure that your company will always have a home on the internet. Even if you don't develop a website on it right away, get your domain name reserved as soon as you can to prepare for future development.

Additionally, by purchasing a domain name, you'll be able to have a custom email address, and you can get rid of that @gmail.com, @outlook.com, or another popular email host that your using for your business.

2. You're in Control of Everything.

By having your own website, you're able to control everything about it. The layout of your site, the way it looks to customers, how you sell your products, all of this can be controlled by you.

Furthermore, having your own website can increase the available avenues users have to buy your products, services, and news about your company.

On top of this, most online marketplaces have fees and charges that can cost you a decent portion of your profits. While these marketplaces may bring you more customers, they also cost you more in expenses. Having multiple ways for users to buy your products increases the potential for selling more goods.

3. You Can Naturally Grow Your Audience.

Through the use of SEO-optimization, you'll be able to increase your visibility when people search for your company and the products and services that you have. This will in-turn increase potential sales, clients, and leads to help your business grow. The best thing is that SEO-optimization doesn't require additional advertisement costs.

4. Expand Your Customer Service.

While a website won't replace your Customer Service, which it shouldn't. It can help to answer some frequent questions or concerns from your customers so your Customer Service team can increase more focus on the requests that come in.

You may use the website to display your contact hours, add a Frequently Asked Questions section, or provide Documentation or Tutorials.

The Final Mast

There are a variety of other reasons that having a website may be beneficial to you. If this is something you're interested in, please contact us today, and we'll be glad to help you get started.