How I Built a Kick-Ass WordPress Theme With Upfront Builder (And Why I’m Freaking Out)

FavoriteLoadingAdd to favorites

I am a photographer, a videographer, a designer, a writer, a marketer. I am not a developer… and I’m freaking out because I just finished building a WordPress theme from scratch – without writing a single line of code – with Upfront Builder.

Most people I know have no clue what it is that I actually do. They know it has something to do with websites, so I get asked to “develop” websites for family, friends, small businesses and nonprofit organizations all the time.

After about 15 minutes trying to explain that I am more of a WordPress implementor than a developer, I get nods that say “I have no clue what you’re talking about” followed by “So you can build me a site, right? Great!”

So it goes without saying that I’ve used just about every WordPress page builder and WordPress theme framework out there to create websites for needy entrepreneurs and great organizations looking to spread a message about a worthy cause. For my latest creation, I found myself diving head-first into Upfront with Builder and I can honestly say Upfront Builder needs a whole new WordPress theme category of its own.

add-video
Check out my site! It looks pro, right? Upfront makes it easy to add videos, contact forms and other elements from the drag-and-drop front end visual editor.

Upfront Builder Is One-Of-A-Kind

I know what you’re thinking: every time a WordPress page builder or WordPress theme framework gets an update it’s “revolutionary,” “a game changer” and “WordPress will never be the same again!” In great anticipation, we install whatever new earth shattering innovation we’ve stumbled upon and to our dismay we discover it’s just another take on front-end drag-and-drop customization for WordPress themes. Maybe a pretty new UI. Maybe a more intuitive user experience. But almost every WordPress theme framework lets you do some form of front-end customization now.

We could get into a spitting match over who did it first and best, but WYSIWYG customization is already here to stay and the competitive space is just making visual WordPress theme customizers faster, better and easier to use.

As for Upfront, we are thankful for the role it has played in driving WordPress front-end theming forward, but the truth is Upfront was never meant to be a WordPress theme customizer – it was built to be something completely different.

Front-End Customizers Vs. The Upfront Builder

So what’s the difference? Upfront Builder not only lets you design, style and customize your WordPress theme from the Upfront drag-and-drop live preview visual editor, but when you’re finished you can bundle, export, and share (or even sell!) your Upfront theme – styles, formatting, embeds, images, copy, menus, layouts – the whole shebang.

Start from scratch, package and sell a final product without writing a line of code. Simple.

How I Built My First WordPress Theme Without Writing a Line of Code

Let me paint a picture for you. To start my new WordPress theme I gave it a title and clicked “Start Building.” That’s it!

builder-start-building
Give your WordPress theme a title and click “Start Building”.

Upfront generated everything I needed to get started and took me to the editor so I could start creating using all the Upfront elements available in the visual editor. (Developers, think boilerplate – this is not just individual pages in a page builder.)

I then set my default color palette, fonts, and font sizes. It really helped speed up development when moving between page layouts.

font-selection
Set global styles and regions to save a bunch of time.

I customized the pages I needed and created my own page templates – still no code. As I was laying out my home page template I found that I could make any region a global region that would populate across my entire site. This was another real time saver for things like headers, footers, and menus that needed to remain consistent across the entire site.

Tip: Keeping your regions organized can really speed up development and make later customizations easy.

I had my site pretty well mapped out, so for each new page I created a new layout. All the global elements would populate and then it was just an issue of dragging, positioning and scaling new elements for each page.

When my site was styled I activated the responsive checker and made little adjustments as needed so my site would look its best on any screen size.

Make sure your site looks great on every screen in responsive mode.
Make sure your site looks great on every screen in responsive mode.

I can honestly say the most time-consuming part of building my first site was gathering the content. No way around it. Taking and editing pictures, writing copy, talking with the client and getting a clearer picture of what they wanted was time-consuming.

But with Upfront, I was able to complete a first draft of my entire website in less than a day of development.

And suffice it to say, my client was impressed with the turnaround.

Builder Magic

That’s amazing, but here’s the magic that really puts Upfront in a new category: when all my pages were formatted, all the images were embedded, and all the colors, and fonts, and forms were in place, I clicked “Download” and the theme package downloaded to my computer ready to share live on my client’s site.

I installed the zip file on a new Upfront enabled WordPress installation through the appearance tab (just like any other WordPress theme), clicked activate, and all my links, custom pages, menus, and styles populated perfectly.

Upload your new theme to any WordPress site.
Upload your new theme to any WordPress site.

I could just as easily change the images for stock photos and replace the copy with lorem ipsum and share or even sell my starter theme to other Upfront users. And now that Upfront Builder includes e-commerce integration, the sky’s the limit with Upfront.

It’s seriously a marketplace waiting to happen. Do yourself a favor and give Upfront Builder a spin. It’s included in your membership so you’ve got nothing to lose. Not a member? We’ll let you try it absolutely free. So really, nothing to lose.

visit original source at wpmudev.org



Categories: Tutorials

Subscribe

Subscribe to this Journal

Subscribe to our Saturday morning digest of each week's new content. ITS FREE!

Email address