12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on May 14, 2020

Setting up Oxygen on an existing site that uses a theme

Sridhar Katakam

A user asks in the Oxygen Facebook group:

Hi all! Would love your thoughts on this question/scenario:

How might be the best way to go about transition over a very active site (in production) that has a custom theme to utilizing Oxygen? For example, a news agency that posts 30+ articles a day and/or countless other updates throughout the site.

Focusing less on the process of copying the theme to O2 and more on the data side of things…

What are some ideas on how to best merge the two sites back together once the theme has been copied over in O2 and is ready to be deployed?

It’s my current understanding that Oxygen utilizes the wp_posts table with its own post type. Is that correct or do I have that wrong?

If at all possible, I’d like to avoid having to instruct a client to publish/update content in two different places as we go through the build process.

Nothing is too “technical” for me/us.

Many thanks in advance!

I have seen similar questions being asked several times and thought it is a good idea to share what I consider are the best approaches for setting up Oxygen on a live production site that uses a theme.

I do not recommend methods that involve database push and pull using a plugin like WP Migrate DB Pro or even WPMerge as it is going to get messy and confusing.

Whichever method you select, first take a full backup of the site at WordPress level and if possible, also at hosting/server level.

Approach 1 is generally recommended and is safer way to go.

Approach 2 is for advanced users who don’t mind taking a few risks and is provided here only for educational purpose.

Approach 1: Work on a site copies, then export and import

  1. Duplicate the site using a plugin like All-in-One WP Migration or Migrate Guru onto another sub domain/directory in your hosting account or at a different host or to your localhost. Let’s call this Copy A.

    Remember that every time you copy an Oxygen site to another regardless of which method you use to duplicate/migrate, you must re-sign shortcodes and regenerate the CSS cache.
  2. Install and activate Oxygen on Copy A and set up your Templates, build the Pages, do your styling etc. and make it production-ready like how you want it.
  3. Make another copy of the live site. Let’s call this Copy B. This is where you are going to practice exporting individual pieces of your Oxygen site from Copy A to and document the steps you need to follow to do the same on the live site later.

    Install and activate Oxygen.
  4. Export Oxygen’s Templates from Copy A either using the built-in WordPress export or using a tool like Oxy Transfer Pro and import them into Copy B.

    Export and import Oxygen options via Oxygen > Export & Import.

    Bring in anything else that is related to your Oxygen site from Copy A to Copy B.

    Note down all the steps you have taken to do this.
  5. Install and activate Oxygen on the live site. Implement the above steps while copying Oxygen-related entities either Copy A or Copy B to the live site.

Approach 2: Work on the live site one view at a time

  1. Install and activate Oxygen and Oxygen Theme Enabler on the live site.
  2. Go to Theme Enabler plugin’s settings and select active theme to be used for most pages with Oxygen on a specific view like a specific Page or all single posts or all static Pages or category archives – whichever pages have the least amount of traffic.
  3. Set up all the Templates necessary and build the chosen page/view with Oxygen.
  4. Modify the if condition in the plugin to expand its scope so Oxygen controls more of your pages than earlier.
  5. Continue setting up the new expanded views with Oxygen.
  6. Repeat steps 4 and 5 until the entire site is covered.

Do you have experience doing something similar? If so, what has worked for you? Do share in the comments section below.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right