Converting An Established Site To Thrive Theme Builder. Here’s How It Went…
As a big test to the brand new Thrive Theme Builder, I decided to try re-creating the Blog Marketing Academy itself with it. Here’s what happened…
This article was originally written when Thrive Theme Builder was originally released. As you will see, it is me testing the new product on this very website. Since then, Theme Builder has matured further. Not only that, the Blog Marketing Academy continues to be run on the Theme Builder platform. I really like it. 🙂
I recently did a full hands-on, first-look review of Thrive Theme Builder that you can read here. But…
What would it be like to convert an already established site to the new Theme Builder?
To test it out and dive deeper into this new platform, I decided to re-create this very website – the Blog Marketing Academy – and re-build the theme entirely in Theme Builder.
Could I do it?
What problems would I run into?
Well, I’ll show you. 🙂
First Things First…
As I covered in my initial post, there are some things you must know before converting an existing site to Theme Builder. Namely…
- Upon installation of the product via Thrive Product Manager, it will automatically activate. This means your existing theme is disabled immediately.
- Once it activates, it will be a completely default version of ShapeShift.
Since I do not want to do all this out in the open, the first thing I do is create a staging site copy of the Blog Marketing Academy.
On your host, you will want to install and test Theme Builder on a staging copy of your live site. If your web host doesn’t support staging sites, check out Cloudways or Siteground. You can also check out my guide on how to choose the right web host.
I then installed ShapeShift (and along with it Theme Builder) using the Thrive Product Manager.
ShapeShift was now live.
Going Through The Theme Builder Site Wizard
The next step was to go through the wizard and make some initial choices to kick things off. I knew I couldn’t make the site look like Blog Marketing Academy using the wizard, but I chose templates that got as close as possible.
I select my existing logo. For the header and footer, I chose designs that looked relatively close to my actual headers and footers from this theme.
For the homepage, I selected my pre-existing homepage. In my case, I had already built my homepage with Thrive Architect so nothing needed to do there.
I continued through the wizard like so… choosing the templates that most resembled the basic layout of my existing theme. When I was done, some parts of the site looked “normal” because I had built them with Architect previously. Other sections were perfectly functional but did not look enough like my existing theme.
My blog page after going through the Site Wizard.
So, we now move into the next phase: EDITING.
Making ShapeShift Look Like My Own Theme
First, I edited the Branding. There isn’t much to do here. You set your primary accent color, the light/dark versions of your logo, and your favicon.
Then I went into Typography to select my default fonts and colors for the site.
One by one, you just set up the fonts you want to use for each header type and your regular text. By default, it uses a font called Literata. It actually looks fine as is, however for the sake of making it look like my existing BMA site, I edited the fonts accordingly.
BMA makes heavy use of a font called Lato and I keep text a straight black color. So, that’s what I chose across the board. You also set the styles for bulleted lists, hyperlinks, quotes, etc.
Next, I head into the Templates. This is where the rubber really hits the road with Thrive Theme Builder.
Working With Templates
The first template I wanted to make right was the one for my blog posts. The first thing I did was rename the template from their default name to something that makes sense to me:
I renamed it to “Standard Blog Post”. Then, I proceeded to edit the template.
My plan is to use this one template to edit several of the site elements at once, including the header and footer. To edit the header, you use the page layout under “Main Options” to select the header.
I got started editing the header to see how easily I could make it look like my existing header using only the Architect interface. I got it looking good, but there were a few changes I would be forced to accept. For instance:
- Putting the login and “Become A Member” buttons next to each other requires the use of columns. Getting the buttons side-by-side was tricky because the columns resize by percentage. Depending on different screen widths, I’d have this weird gap between the buttons. When I manually code it, I can easily put two buttons next to each other. But, since Architect forces me to use columns to do that it makes it hard. So, I had to move “Login” to the main menu and only have the one button.
- I accepted some minor changes to the fonts and sizes. Actually, it looks good that way. But, it is a little different.
Once I was done working on the header, here’s how it turned out…
It took a little trial and error and playing around with it, but the end result looked pretty decent. In fact, I kind of like the fonts better. 🙂
Next, I move down to the content section. The Top section is disabled for now only because my current, original theme does not have a big optin call to action across the top. I probably should, but my goal right now is to see how close I can get to my original theme using Theme Builder. So, for now, I keep the top section disabled and move down to content.
Positioning my feature image to the correct spot and changing the look of the headline was easy. Where I did run into an issue was with the post meta area. The top of my current theme is broken down like this:
That’s all easy to do with you’re hand-coding your theme. But, when you need to re-create it within the Theme Builder environment, things got a little trickier.
First off, as of this writing at least, they don’t have a post excerpt tool available. So, I simply have no way to include the excerpt on a post template. This seems like a weird oversight on their part – and one that would be very easy to fix. They could either include a draggable tool for the excerpt or include the option as dynamic text.
There is one work-around that I could do here. This new Dynamic Text capability they’ve built is actually very powerful despite the fact they forgot the post excerpt field. It has the ability to dynamically put text on screen from post/content data, custom fields, global fields (for site-wide constants), requests (like passing data by URL or a cookie), date/time data, etc. I mean, truthfully, this Dynamic Text capability is sort of hidden there on the toolbar, but it gives you SO MANY OPTIONS. Very cool.
One workaround is that I could create a custom field (perhaps with Advanced Custom Fields) for all blog posts. Use that field for the post excerpt instead of the built-in one. Then, print that custom field to the screen using dynamic text.
It would work. It is easy to do. But, I shouldn’t have to. All they need to do is include post excerpt as an option.
Showing the post author and the last modified date was very easy using dynamic text. The Social Warfare buttons were more difficult due to the default styling that comes in when using the shortcode to show the buttons. When I inserted it, I had this weird padding around the buttons:
Now, I could inject a little bit of custom CSS in there to remove those margins. But, 2 things come up here:
- I feel like I shouldn’t have to, considering the whole idea of this is that I don’t need to know any CSS. But, an even bigger deal is…
- As of this project, there is simply no way to include my own custom CSS into the theme.
That seems like another big oversight to me. I believe Thrive Theme Builder should definitely have a way to include custom CSS. But, as much as I hunt around for the option, I just don’t see it right now. This is something that definitely needs to be included in a future update.
So, given that I can’t make those share buttons look right AND I cannot show an excerpt the same way I usually do, I take the liberty of re-designing that area a bit to accommodate.
As I play around with the Social Warfare plugin settings, I come across another issue…
Apparently, Theme Builder is not totally respecting the usual Wordpress hooks. When I set Social Warfare to automatically insert the share buttons at the top and bottom of the content, neither one shows up. This could only be the case if the hook that a lot of themes use is missing.
So, as of now, I have two options:
- Only use the floating buttons from Social Warfare or the shortcode. Or…
- Use the built-in social share options of Thrive Theme Builder and stop using Social Warfare.
Toward the bottom of the post, I have an author box. So, I went ahead and created an author box in Theme Builder. I chose a pre-designed one that was close enough and then modified to suit my tastes. It looks just a little bit different than the original because I happen to like those social media buttons in there. 🙂
As we move further down, I get the bottom call to action area. I really like how it looks and now that this is so easy to do with Theme Builder, I would probably keep it and modify accordingly. However, since our purpose here is to re-create BMA and I don’t currently use the bottom call to action, I will simply turn it off.
Looks great, but I’ll turn it off for now.
Which brings us to the footer. And again, I ran into some odd limitations that I had to find a way around.
My existing footer is very simple. I simply list out some links. Each list is a bulleted list and I use CSS in order to hide the bullet icon and all padding, making it appear very simplistic.
However, as already mentioned, Theme Builder does not have any obvious way to insert my own CSS. But, that’s not all…
The new Dynamic Styled List included with Theme Builder looks great and has the ability to hide the icon, BUT there is no ability to hand-select my own links. I can only do dynamic and that defeats the point. It also lacks the ability to use a Wordpress menu as the source data.
You could create a Widget area and then put that widget into the footer. And one of the available widgets is a nav menu. However, the resulting style looks like crap and, again, there is no way to override the CSS.
If I use a regular Styled List tool and list the links manually, I have no ability to hide the icon. If you resize the icon to 0, it simply rewrites back to 8. So, it is too limited.
So, my only option is to do it manually using a text field. And all in all, the result came out pretty good:
At this point, I have completed the design changes for all of my blog posts. There are a few minor changes I had to accept as trade-offs, but overall I got pretty darn close to duplicating my design on top of Thrive Theme Builder.
Running Into A Snag With Pages
At this point, things speed up. The header and footer were done. So, now it was just about going through the remaining default templates and making a few changes that needed to be done.
But, then I ran into a little snag…
This is not something most others would deal with, but I did because of some previous choices I made as I designed pages with Thrive Architect.
The issue came up after I had completed the template design for my standard pages. When I went to preview something like my About Page within the new template, I realized I couldn’t. In fact, I had no ability to couple my about page content with any template built with Thrive Theme Builder.
This sucks. What’s happening?
It is because when I initially designed those particular pages using only Architect, I had used one of their landing page templates as a starting point. When you import a template using Thrive Architect, it overrides the theme and apparently locks that page into a particular template. Even if the resulting page I built looks nothing like the original template, the fact that I started that way locked it in and now I have no ability to tie it back into the theme.
Unfortunately, if I choose to “Revert To Theme Template”, I get a big fat warning from Architect saying I would lose ALL of my content on that page.
That’s a major party foul. And honestly, I see no technical reason why I would need to have my content deleted in order to tell Architect to once again output the contents of the page into the theme.
I went directly into the database to see if I could reverse engineer this and find some switch to flip to revert this without losing content. I found that there were too many custom post meta fields in place and it would be a very tedious process. So, I gave up and I hit the button to REVERT.
You don’t actually lose content, but you definitely do lose all your formatting. So, the short story is… I would need to re-build several pages around my site almost from the ground up.
Again, this is not something most would deal with. This is a situation that came from the fact that I had started building several pages of this site by first starting with a built-in landing page template. And Thrive Architect truly does enforce an either/or scenario between a landing page and a page that works with your theme. And there is no way to easily flip back and forth.
In the end, it isn’t too long of an affair to fix the issue. Here’s how I did it, using my About Page:
- Revert the page back to the theme.
- The reverted version will put the original content, minus the formatting, into a “Wordpress Content” section. That’s fairly useless, so…
- I delete “Wordpress Content” and go about re-building the page within the new page template I built with Theme Builder. It doesn’t take too long because I can easily copy/paste content from the original About Page (on the live site). So, I don’t literally need to build the page again from scratch.
The result for my About Page works out OK…
So, while the solution is there and I can do it, it will legthen the process of being able to 100% switch to Theme Builder.
UPDATE: As I completed the transition of this site to Theme Builder, I found that I did have the ability to insert the ShapeShift header onto previously built landing pages. That proved to be a major time-saver in completing the switch.
Overall Impressions After (Much) Deeper Usage
After now trying to re-create an established site like this one with Thrive Theme Builder, I now have a much better feel for how it works. And overall…
This is really awesome.
In fact, I may actually convert the LIVE site over to Theme Builder once I have a chance to re-build those old landing pages.
UPDATE: As of this post being written, I have indeed completed the transition and this site is now officially running on Thrive Theme Builder. See my final comments about it (plus a video showing the inside).
From the perspective of somebody who doesn’t know how to build a theme, this platform is really awesome. The fact that I could pretty much duplicate the Blog Marketing Academy without even touching the underlying code is really amazing.
It is also a testament to how this really works. ShapeShift might be called a theme… but clearly it can be turned into anything you want.
In some cases, I couldn’t exactly duplicate my original site. In a few cases, I ran into some technical constraints that honestly shouldn’t have been there. In other cases, the differences were actually preferable as I thought the Theme Builder version actually looked better.
I didn’t complete the entire site transition before publishing this post. The ONLY reason for that is the hiccup I ran into regarding converting my pages from a landing page template to the theme yet again. Correcting that issue will require re-building some of my pages. (UPDATE: I did finish. Read the story here.)
This brings me to some of the constraints I ran into in this process…
Problems I Came Across As I Built The Site
Here is a summary of the issues and shortcomings I came across as I tried to re-build the Blog Marketing Academy with Thrive Theme Builder:
#1 – Columns For Side-By-Side ButtonsPutting buttons side by side requires columns and this complicates things when it comes to use in your header. I got around it, but this is just an example of the difference in workflow when you’re using a visual editor versus hand-coding.
#2 – No Post Excerpt Available.There is no ability to include a post excerpt anywhere in the template – at least that I could find. It isn’t a draggable tool and it isn’t available as a dynamic text option. This would be very easy for them to include in a future update.
#3 – No Obvious Ability To Include Custom CSSI know that the idea here is not to have to use CSS at all and do everything using the visual editor. But, in the real world, there are places where you need to override something with your own custom CSS. And I could not find anyplace to do it as an end user. I think each template in Theme Builder should have the option to include custom CSS.
#4 – Seems To Be Some Missing HooksI didn’t explore this deeply, but my issues getting Social Warfare to work based on the usual hooks at the top and bottom of the content leads me to think that those hooks simply aren’t there. If so, this needs to be fixed so that there is better integration with other plug-ins.
#5 – The Dynamic Styled List Should Be Able To Include A Menu As SourceJust a little thing, but would have solved a problem for me. Also…
#6 – Styled Lists Should Have Ability To Hide The IconThere are times when you want to use a list, but NOT have bullets. This is easy when using your own CSS, but the option to do this using the visual editor is missing.
#7 – Big Transition Issue Between Previously Created Thrive Landing Pages And Reverting To ThemeIf you’ve been using Architect for awhile and used any of their landing page templates – and now want to use them with Thrive Theme Builder – you’re in for an issue. You can’t revert back to the theme without losing all your formatting. You will need to re-build the page, essentially. And that sucks.
Keep This In Mind (And How They Could Fix It)
If you are transitioning an existing site to Thrive Theme Builder, you may need to accept a few compromises along the way.
When you use a visual builder like this, it does mean you’re going to sacrifice a little flexibility. If you’re able to code your own theme hacks, it can feel like you have your hands tied behind your back.
Some of the compromises are easy to deal with. I found myself often liking the NEW look better than the old one. Plus, even though I know how to do it by hand, it is much, MUCH faster to design the theme you want with Thrive Theme Builder. It isn’t even close.
Other compromises were a bit annoying. And depending on the level of customization you might have with whatever theme you are coming from, the amount of compromise you will need to accept could be larger.
Overall, it is a great experience. I think that these issues could easily be handled for the more advanced users of Thrive Theme Builder with 2 main things:
- The ability to incorporate your own CSS when necessary.
- Documentation and inclusion of the hooks so that an advanced user could incorporate custom elements using PHP code and insert the output into a theme designed with Theme Builder.
This would provide a LOT of flexibility. And if I had to guess, these are things that will be addressed by Thrive Themes. If they want a truly universal platform, there needs to be some ability for more advanced users to tap into the platform with custom elements.
My Final Thoughts
Overall, I’m really thrilled with how easy Thrive Theme Builder is to use. It is very flexible.
Even as a guy who knows how to code a theme by hand, this platform really speeds things up and makes it very easy to take FULL control of over your entire Wordpress site.
For a first version, this thing is very polished. However, there are a few improvements I think could be done to make it even better. Plus, the two items listed above to cater to the more advanced users (like me) would make this thing even more awesome.
Oh, and if they could come up with some way to migrate Architect landing pages back to your theme without losing everything, that’d be a nice bonus, too. 😉
Thrive Themes Bonus Training
Look over my shoulder while I show you some of the in’s and out’s of Thrive Themes tools, best practices, and some nifty tricks. You will also have a direct line to me to ask any question you want about Thrive so that I can be an additional line of support for you as you use these tools.
Access to this course is FREE as a bonus if you purchase Thrive Themes via our affiliate link. Click here to learn more.
I ran into the same problems converting Architect landing pages to the theme templates. Before reverting to the theme template, I saved the entire contents of the page as “Templates & Symbols” Template (if you understand what I mean) in Architect.
Then after reverting to the theme template, I could “Insert -> Templates & Symbols” and bring back all the content.
This saved a lot of time.
Yep, I did the same in several instances. Great tip!
I found this post by visiting your YouTube channel where I’m a subscriber and consumer of your content. Unfortunately, I already have Thrive Themes complete suite before I ran into your video and blog posts. I would have used your affiliate link as a way to show appreciation for your work.
I also have ConvertBox, so I couldn’t support you by way of buying that software as well.
I’m also using ThriveCart as well, so I couldn’t buy it from you either.
However, I’m looking for a secondary hosting account for some of my auxiliary websites that I don’t want to host on my primary hosting account because of SEO reasons. I thought of acquiring this secondary hosting through you, but I see that you’re using WPXHosting.com one of my old hosting providers, going back a couple of years ago. They’re good, but pricey and only allow a few addon-domains per account.
I have no problem going back to WPXHosting using a new email account but didn’t explain why you chose WPX over say SiteGround.com which my current provider and I like their service a lot.
Anyway, you write well and I learned a lot from your posts. I equally said so on your YouTube post.
I won’t use Hostgator or TMDHosting ever again, even for free.
You can check this out about my switch to WPX:
But, you don’t need to switch if you don’t want to. Siteground is also a company I recommend. They’re good.
I worked last night on my conversion from Genesis/Dynamik theme to Thrive Theme Builder. I echo your comments, AND I did find a solution that Hanne I think mentioned in a comment in her tutorial:
CSS can go in Appearance > Custom > Additional CSS
I couldn’t have gotten as far as I did without that! I have some plugins that require some custom CSS to make this all hold together.
Thanks for being a leader in this work. I have to say, as I look back at what “customization” looked like in Genesis/Dynamik vs. Thrive Theme Builder, I am giddy with excitement for the conversion.
Ah, interesting. I didn’t think of dropping custom CSS in the Customizer like that. Good to know there is an option. 🙂
I still think they should put something directly into Theme Builder for that, though. Once you’re using theme builder, it just doesn’t dawn on you to use the old-school theme customizer.