- Copy your site from your production server to your development server (the development server is where you will be working)
- Download the new theme onto your Desktop
- Determine what bespoke changes you have made to the Theme. You will need to parse these changes and put them into a WordPress Child Theme. Keeping them in the parent Berkeley Brand theme will result in them being erased when the theme (and plugins) are updated.
- Create a Child Theme https://developer.wordpress.org/themes/advanced-topics/child-themes/
- Determine what to transfer to your Child Theme
- You can use the diff command or https://www.diffchecker.com/ to compare your files. If you have made changes, they are likely in style.css and functions.php. See here for more detailed instructions
- Determine what to transfer to your Child Theme
- SSH into your development server, and rename the wp-content/themes/berkeley_brand theme folder
- Rename all UCBBrand Component plugin folders
-
- wp-content/plugins/ucbbrand-component_events_list
- wp-content/plugins/ucbbrand-component_events_rss
- wp-content/plugins/ucbbrand-component_list
- wp-content/plugins/ucbbrand-component_photo
- wp-content/plugins/ucbbrand-component_promo
- wp-content/plugins/ucbbrand-component_quote
- wp-content/plugins/ucbbrand-component_thumblist
- wp-content/plugins/ucbbrand-component_twitterfeed
- wp-content/plugins/ucbbrand-component_video
- wp-content/plugins/ucbbrand-component_infographic
-
- On the Admin Panel > APPEARANCE > THEMES activate a default WordPress theme (such as TwentyNineteen)
- On your development server, in Admin Panel > APPEARANCE > THEMES click on “Add New Theme”
- then click on Upload Theme
- Choose the berkeley_brand.zip file
- Click on Upload
- Return to THEMES page
- Click on “Add New Theme”
- Click on Upload Theme
- Choose your Child Theme
- Click on Upload
- Activate the Child Theme
- Test your site
- You may need to update some theme settings, located in the WP Admin panel under APPEARANCE > BRAND THEME OPTIONS. If a setting is unset, but showing on the site as activated, un/check the setting in the theme options, save, then un/check and re-save the setting.
- You will also need to reset any widget visibility settings you had under APPEARANCE > WIDGETS
- Delete the renamed theme and plugin folders (from step 2 & 3)
- Back up your production site
- Deploy your changes to your production server
How to do a File Diff to Create a WP Child Theme
- Create a folder on your Desktop called “wp-theme-folders”
- From your site’s server, download a copy of your site’s current berkeley_brand theme folder located in wp-content/themes/
- Save this folder on your computer at Desktop/wp-theme-folders as berkeley_brand-fromOldSite
- Aquire an un-modified/vanilla copy of the brand_theme in the version you are using. Please feel free to email ucbweb@berkeley.edu and we can send you a version if you don’t have it
- Unzip this folder on your Desktop/wp-theme-folders
- On your desktop your “wp-theme-folders” directory will have two child directories: berkeley_brand-fromOldSite and berkeley_brand
- Open Terminal (on Mac) or Command Prompt (on PC)
- Type the command CD Desktop/wp-them-folders and hit ENTER. This will move you into the Desktop of your computer, where the files are saved
- Type in one of two commands to see differences in the directories (Note: these commands do not make any changes to your computer/files on your computer. They just compare directories)
- To see file names only. Going this route means you can c/p both files (fromOldSite version and Vanilla version) into a website like https://www.diffchecker.com/ to highlight differences in the code
- diff -qr berkeley_brand-fromOldSite berkeley_brand
- diff -qr berkeley_brand-fromOldSite berkeley_brand
- To see files names with differences. Going this route will show the differences in terminal/command prompt. Recommended only if you have a few changes or are used to using terminal
- diff -r berkeley_brand-fromOldSite berkeley_brand
- diff -r berkeley_brand-fromOldSite berkeley_brand
- To see file names only. Going this route means you can c/p both files (fromOldSite version and Vanilla version) into a website like https://www.diffchecker.com/ to highlight differences in the code
In general you can save the differences you find in the same file in your child theme.
For instance, if you have changes in functions.php, copy them and save them in the functions.php file in your child theme.
If you have changes in /templates/parts/menu-main.php, in your child theme they will also go in /templates/parts/menu-main.php
