Tiny Forge to Tiny Framework migration guide

This is a short guide for Tiny Forge users who want to upgrade their websites to Tiny Framework WordPress theme.

First I would just try to activate Tiny Framework on your site and see how it looks, perhaps everything will be in a good shape 🙂 It is pretty safe, because you can always go back to Tiny Forge theme. Please note that Tiny Framework requires at least WordPress 4.1.

The more custom CSS and other custom code you have, the more things you might have to adjust, but in general themes are very similar, so it should not be something too difficult.

These are the areas that you may need to adjust in the migration process:

1. Re-assign top menu as Primary.
2. Re-assign widgets to widget areas.
3. Re-assign main header image if you're using one.
4. If you were using Site Logo, you will have to re-assign it. For that you need to have Jetpack or Site Logo plugin active.
5. Structure of style.css changed. If you were using some kind of custom CSS plugin, your migration should be pretty easy. If you were using a child theme, take new one from Tiny Framework and transfer only your own custom CSS to style.css according to new structure - take a look at Table of Contents.
6. If you had any custom CSS styles with rem values, you will have to replace those with new ones because theme migrated from 14px rem base to 16px, but it's just find-and-replace job in the text editor, see pre value conversion table below.
7. If you had any custom CSS styles, you might need to adjust width and height of certain elements, because theme switched from standard content-box CSS sizing to more natural border-box.
8. If you had any custom CSS styles that involved webfont icons, you will need do replace them with Font Awesome icons - click on each icon to see detailed info.

Please also keep an eye on the Tiny Forge migration topic @WordPress.org

I will revisit this article if I will find more tips to share.

pre value conversion table

 PX  = Tiny Forge rem = Tiny Framework
 -------------------------------------
 1px = 0.071428571rem = 0.0625rem
 2px = 0.142857143rem = 0.125rem
 3px = 0.214285714rem = 0.1875rem
 4px = 0.285714286rem = 0.25rem
 5px = 0.357142857rem = 0.3125rem
 6px = 0.428571429rem = 0.375rem
 7px = 0.5rem         = 0.4375rem
 8px = 0.571428571rem = 0.5rem
 9px = 0.642857143rem = 0.5625rem
10px = 0.714285714rem = 0.625rem
11px = 0.785714286rem = 0.6875rem
12px = 0.857142857rem = 0.75rem
13px = 0.928571429rem = 0.8125rem
14px = 1rem           = 0.875rem
15px = 1.071428571rem = 0.9375rem
16px = 1.142857143rem = 1rem
17px = 1.214285714rem = 1.0625rem
18px = 1.285714286rem = 1.125rem
19px = 1.357142857rem = 1.1875rem
20px = 1.428571429rem = 1.25rem
21px = 1.5rem         = 1.3125rem
22px = 1.571428571rem = 1.375rem
23px = 1.642857143rem = 1.4375rem
24px = 1.714285714rem = 1.5rem
25px = 1.785714286rem = 1.5625rem
26px = 1.857142857rem = 1.625rem
27px = 1.928571429rem = 1.6875rem
28px = 2rem           = 1.75rem
29px = 2.071428571rem = 1.8125rem
30px = 2.142857143rem = 1.875rem
31px = 2.214285714rem = 1.9375rem
32px = 2.285714286rem = 2rem
33px = 2.357142857rem = 2.0625rem
34px = 2.428571429rem = 2.125rem
35px = 2.5rem         = 2.1875rem
36px = 2.571428571rem = 2.25rem
37px = 2.642857143rem = 2.3125rem
38px = 2.714285714rem = 2.375rem
39px = 2.785714286rem = 2.4375rem
40px = 2.857142857rem = 2.5rem
41px = 2.928571429rem = 2.5625rem
42px = 3rem           = 2.625rem
43px = 3.071428571rem = 2.6875rem
44px = 3.142857143rem = 2.75rem
45px = 3.214285714rem = 2.8125rem
46px = 3.285714286rem = 2.875rem
47px = 3.357142857rem = 2.9375rem
48px = 3.428571429rem = 3rem