I kept getting an “Assertion Error: Task never defined” in my terminal:

It turns out I updated to Gulp 4 and needed to update my gulpfile.js tasks to use the latest Gulp markup. Didn’t take long to figured out that I needed to start using gulp.series() and gulp.parellel() to fix my terminal errors.

Below is my latest gulpfile.js for Gulp 4 and my WordPress development.

You can compare it to my old Gulp 3 file here: https://github.com/braginteractive/StrapPress/blob/7c28a362bf9986f210a0c6f4ba3d7c17c7608a34/gulpfile.js

I also took the opportunity to merge, delete, and clean up some of the tasks. Feel free to grab the code and use it in your projects.

If you have further optimizations for the file, comment below or on the Gist.

Enjoy!

Local WordPress Development with Gulp 4

See the Dashboard in action:

Some of the topics in this post can get a bit technical. If you are not familiar with the WordPress REST API or Vue.js, this might be hard to get up and going on your end. With that said, all the code is up on GitHub so feel free to make any changes to fit your needs.

Why was this Lead Dashboard Built?

1. I wanted to check out Vue.js
2. I needed a better solution to track and manage leads for clients

To expand on the second point, I do digital marketing for a handful of clients. This entails driving traffic to client websites to increase their customers and sales.

A popular way to capture leads online is for a potential customer to fill out a web form on a website. Once the form is submitted the contact details are sent out so they can be contacted. Unless the business has some type of CRM that captures these leads, they normally just get sent out to an email address. The staff will then reach out to the leads as they receive new emails.

Here is the workflow I normally see:

1. Potential customer goes to the business website
2. The potential customer fills out a form on the website to get a free quote or consultation
3. Once submitted, the form information is sent to business owner/staff via email
4. Business owner/staff contact leads
5. Business owner/staff figure out a solution to track leads and determine who they have contacted, which leads need follow-ups, which leads are good/bad, etc.

The Problem

This works, but can quickly get out of hand. Especially if your digital marketing campaign is driving a ton of leads. =)

If the leads are getting sent out via email, they can get lost in the day-to-day email conversations. The leads started getting missed and unanswered which is just wasting the marketing budget.

This can be managed in all kinds of different ways, but what I did was create a Lead Dashboard for my clients.

The Solution

Now the workflow looks like the following:

1. Potential customer goes to the business website
2. The potential customer fills out a form on the website to get a free quote or consultation
3. Once submitted, the form information is sent to business owner/staff via email and to the Lead Dashboard
4. Business owner/staff contact leads
5. Business owner/staff use Lead Dashboard to track leads, add notes to each lead, edit leads, edit lead status, etc.

Instead of trying to figure out a solution to manage the leads, the business now has a Dashboard dedicated to their business leads.

How does this Lead Dashboard Work?

It uses a few WordPress plugins, the WordPress REST API, and Vue.js.

First, the Contact 7 WordPress plugin is used to create and add forms to the website. I then use the Flamingo plugin to capture and store any Contact 7 form submission. From here, I created a simple plugin that adds custom REST endpoints to access the stored Flamingo submissions. Finally, I use Vue.js and Vuetify to call the WP REST endpoints and display the submissions in a Material Design Lead Dashboard.

I would also like to mention here that I use the JWT Authentication plugin so only people with login details can see the leads.

That’s it…

How to Setup the Lead Dashboard

The following is for a local development environment.

You need WordPress installed with the Contact 7, Flamingo, JWT Authentication, and FlamingoREST plugins installed and activated.

Follow the setup for the JWT Authentication that is listed on the plugin page. You don’t need to install the WP API plugin; the REST API has been merged into WordPress core.

For this, you will just need to add a couple of lines to your wp-config.php and .htaccess file.

Make sure the lines of code you add in the .htaccess file are directly under

RewriteEngine on

Next, you will want to create a directory where the Lead Dashboard will live.

For example, I normally create a directory called /leads/ in the root of my WordPress install. So the Lead Dashboard can be accessed at https://localhost:8888/leads

Grab the Lead Dashboard files at https://github.com/braginteractive/VueWPLeads and put them in this directory.

Use your terminal to cd into this directory and run npm install.

FYI, this project started with the Vue Webpack template.

Once your dependencies are installed, go into /leads/config/index.js and change line 16 to your dev URL.

Now just run npm run dev in your terminal. You should be given a URL in the terminal to access the Lead Dashboard.

If you set up the JWT Authentication plugin correctly, you should be able to login with your WordPress login details.

Sweet!

All you need to do now is set up a page on your WordPress site with a Contact 7 form.

Use the following Contact 7 form markup:

 First Name (required)
    [text* first-name] 

 Last Name (required)
    [text* last-name] 

 Your Email (required)
    [email* your-email] 

 Phone
    [tel* tel-879] 

 Your Message
    [textarea your-message] 

[submit "Send"]

Start submitting dummy data into the form and check the Lead Dashboard. It should be populated with data!

Customization

Feel free to make any customization you would like! You need some HTML, PHP, and Vue.js knowledge. This was my first Vue.js project so I am sure there are some best practice and optimizations that can be made to the code base.

Submit some PRs!

Going to Production

Once you have made all your customizations and you are ready to your code on your production site, simply run npm run build. This will create a /dist/ directory with all files minified. Upload the files in the /dist/ directory to your /leads/ directory on your production server. You will also need all the plugins and settings from your local development enviroment.

Have Fun!

The clients I have introduced this Lead Dashboard to love it! The Dashboard saves them time and easily integrates into their current workflow.

Hope this helps you and your clients.

WordPress Lead Dashboard with Vue.js and Contact 7

I normally just see brochure type sites with general information about the business products/services with a contact page.

This doesn’t really do much for the business. They always wonder why their website isn’t generating any new business…

After looking over the website and analytics it is easy to see why.

Here are some problems I normally see with local business websites:

• old website with poor design choices
• thin content
• not optimized for Google or search engines in general
• no clear call to action
• slow to load
• not mobile-friendly

After a website audit, it is clear the business needs a new web presence. We repurpose some of the content/imagery and implement a new design and toolslike the paraphrase tool – seotoolscentre, to increase your business in no time.

The all-in-one themes that you find in the theme marketplaces are great. They have hundreds of layouts, all kinds of plugins, functionality and sometimes even lock you in with shortcodes..

After years of using these types of multi-purpose themes, I stay AWAY.

Why?

Bloated

They are bloated. Cool, the theme has 500 million layouts and every piece of functionality I have ever seen on the web.

I am sure my client will use everything included!

NO.

A majority of the time, a businesses uses about 3-5 different layouts. One for the homepage, one for the services, a general page layout and a contact page.

I am not even going to get into all the sliders, carousels and elements flying in from every angle as you scroll down the page.

Updates?

Hopefully those custom changes you made survive a theme or plugin update. Fingers crossed.

Drag and Drop Page Builders

I don’t like them.

If I have a long term relationship with a client, I am normally doing paid search campaigns (PPC) with search engine optimization to drive leads. This means I am the one edited and adding content to the website. A business owner wants to work on his/her business not a website, that’s why they look for easy website solutions like wordpress and hosting as web hosting Canada which is a great solution for this.

The times I have used drag and drop builders for clients a few things happen:

• There is a learning curve where they are destroying and messing up page designs. Even after training and documentation videos for their website. This means regular phone calls or emails asking to fix something.
• A client doesn’t normally know about SEO best-practices. Even after explaining why they shouldn’t have five h1 tags on a page, they don’t understand why the page builder keeps adding them.  Again, learning curve.
• Some page builders output everything in shortcodes. This means they are locked in.

I get it! Page builders are AMAZING for people that don’t know HTML/CSS.

I still don’t recommend them for any of my clients.

Page Speed and Load Times

With all the amazing page templates, features, plugin and page builders you run into optimization issues.

To fix these issues you have to install more plugins to minimize and move scripts. Disable features and rethink those 15 image sliders throughout the website.

It turns into a mess.

You start hacking one thing here to fix an issue there.

What is the Solution?

For me, it was using wordpress hosting plans to build my own theme.

If you look around Brag Interactive you will notice I have been building WordPress related projects for awhile.

A lot of these projects serve one purpose and it is no different with LeadGenerationWP.com.

LeadGenerationWP

I have always used a base theme for my personal and client projects. This gives me complete control of the design and how it should be optimized.

When the goal of a website is lead generation, the theme design always includes the same elements:

• A clear call to action
• Social proof and testimonials
• Features, benefits, and FAQs
• Visual simplicity with a clear goal

All of these elements are included in the themes on LeadGenerationWP. If you are looking to setup a PPL site or have a client that wants to generation more lead online, check out the themes on LeadGenerationWP.com.

Update:

People are really defensive over their all-in-one themes and plugins. Yes, I am sure you have achieved page 1 rankings and have a X% conversion rate with your solution.

Great! You do you.

Lead Generation WordPress Themes

In this series, the user learns how to build one of my most popular WordPress themes called StanleyWP.

We start by customizing the header and footer of the WordPress theme by changing the values of some of the Bootstrap 4 Sass variables. We then get into creating custom page templates, custom post types, adding metaboxes, and how to use the WordPress Customizer to edit settings within the theme.

Enhance your Development Workflow

While creating the theme I also go over how to use tools to help enhance and speed up your development workflow.

These tools include:

• npm
• Gulp
• git and GitHub
• terminal

A lot of people think that working with the terminal is hard, but once you learn a few commands it is actually really fun to work with. You get to a point where you would rather work within the terminal rather than using another GUI. You can just do so much in it!

For example, with just running the gulp command in our WordPress development project we get:

• a new browser tab that launches our WordPress theme with Browsersync.io
• a task to watch our Sass code for changes and automatically compiles, minifies, and refreshes our browser window
• a task that watches for any JS changes and then runs the code through JSHint, alerts us of any errors, compiles, and minifies
• a task to zip all our production ready files

While learning how to use these tools, you are also building a WordPress theme with a custom design, portfolio custom post type, custom page templates, and much more. This will give you the skill set to take a PSD file or a HTML/CSS template and convert it into a WordPress theme.

These are all great skills to have that can and will be used in any projects that you work on online.

If this is something that sounds interesting, check out BootstrapWP and sign up today.

New tutorials on Building a WordPress theme with Bootstrap 4

I have had the domain helpwp.com for a while now and have always wanted to put it to use. So… I decided to create a website with video and written WordPress tutorials.

I already have a premium course that goes over how to build WordPress themes with the Bootstrap framework, so I am going to use HelpWP.com to cover all kinds of other WordPress related questions.

As of now, I have a backlog of tutorial topics that I would like to cover. These are mostly questions that I receive from customers and current theme users. After my backlog of WordPress tutorials have been completed and posted on HelpWP, I will move to other topics.

If you are having an issue with your WordPress theme or have a questions, feel free to submit a tutorial suggestion on HelpWP.com.

The end goal would be to create tutorials on how to successfully use WordPress for lead generation. Freelancers, agencies, small business owners, and just about anyone are putting up WordPress websites on a daily basis hoping to find an audience or new customers. The problem is a lot of these sites are terrible.

These sites are just being put up without any testing or research on what the target audience wants and needs. With the tutorials on HelpWP I hope to share what I have learned to create and publish WordPress sites that convert.

That is why you have your business website right?

WordPress Tutorials – HelpWP

I took the HTML/CSS files and turned in it a free WordPress theme called MaterialKitWP. If you are looking for a WordPress theme with Material Design elements based off the Bootstrap framework then I think you will really enjoy MaterialKitWP. You can download the theme over at MVPWP.com as use it on your next project.

Keep an eye out for the premium version that will include even more functionality, page layouts, and features.

MaterialKitWP – Material Design and Bootstrap WordPress Theme

If you haven’t already checked out MaterialWP or MDLWP, you should. MaterialWP is actually a theme created with a Bootstrap based framework that has Material Design inspired elements and components.

MDLWP is a WordPress theme based off the Material Design Lite library that Google recently released.

I have even created a website that collects and lists different Material Design based themes and templates over at MaterialDesignThemes.com. With all that said, you can see that I have a lot of projects that integrate Material Design into WordPress.

When people download the Material Design WordPress themes I offer, I frequently get questions about how to add or change certain features.

Because of this, I thought it would be a good idea to create some tutorials on how to create a Material Design WordPress theme from scratch. The tutorials are 100% free and you can sign up and watch them over at WPThemeCourse.com.

The tutorials start with a starter theme over at Underscores.me and takes you through the steps of adding Material Design to your WordPress theme files. The tutorials also cover how I use tools like Gulp, Bower, and Sass to speed up and optimize the theme development process.

If this is something you might be interested in, go check out WPThemeCourse.com and let me know what you think.

How to build a Material Design WordPress Theme

TL;DR – I have been playing with Angular and created an app that uses the WP REST API. You can download it from GitHub here. You can also see a demo here.

Many of you know, I run a couple WordPress theme shops and a course that teaches how to build WordPress themes with Bootstrap. Because of this, I am always interested in the future of WordPress and new opportunities.

The WP Rest API is a game changer for WordPress development. You will no longer need to create themes in order to display WordPress content. You can simply use the API to interact with WordPress to create, read, update, and delete any content you want without even touching the WordPress Dashboard.

It’s awesome.

For current WordPress theme/plugin developers and myself, it is time to step up your Javascript game! There are already hundreds of articles online that go over “how Javascript is eating the world” and if it can be built in JS, it will be. So if you haven’t already started to learn JS, now is the time.

Angular

To get started, I wanted to build an app that uses the WP REST API to pull in my posts and display them. Seems pretty easy right.. Simply do a GET request to a certain URL and iterate through each post. Done.

Yeah, it is that easy if you already know a JS framework or have experience working with JSON data in your language of choice. As a theme dev and FED, I never really picked up this skill set so I hit the Google machine with my millions of questions, since making apps is not that easy for everyone and that’s why many people get professional services to help them with this, as a great app development company online which can develop different types of apps.

I had always heard a lot of good things about Angular, so that is where I started. React is also awesome, but I went with Angular since it has been around longer and would in turn have a lot of available information online for beginners like me. Angular 2 is also in beta and is going to be completely different than Angular 1, soooo yeah. As of FED you soon realize you NEVER stop learning. I personally think it is fun.

My learning style kinda sucks… I can’t just read/watch how to code something and retain it. I need to reverse engineer things and build things myself over and over. Repetition is key for me, luckily there is a lot of information and examples online, also getting help from a XAM Consulting – react developer sydney can be very helpful.

This means my Google searches were things like “angular rest example”, “angular example apps”, “angular rest tutorials” etc. These searches turned up a ton of great tutorials and articles.

I started reading, following along, coding, and watching everything I could get my hands on. I even paid for some courses including udemy, codeschool, pluralsight, etc. Again, the key for me is repetition and seeing how something is done over and over.

As I moved through the courses, I started to see how people arranged angular code and how things started to fit together. Once I had the basics, I moved onto trying to find some Angular WordPress examples.

This turns up a lot of WordPress themes built with Angular. Which seems kind of useless to me… I don’t understand why you would want to continue to build PHP based WordPress themes and localize your JS in order to use Angular? For me, the whole purpose to use the REST API is to get away from PHP based themes and start using other powerful frameworks.. Please correct me if you have different feelings about this.

This brings up the front-end of WordPress. If you currently install WordPress you will automatically have a default theme set. As we move forward, what is going to happen to the people that only want to use the API?

For example, I install WordPress on a server and then just use the API to display my content. In this case, a theme isn’t needed. What will we do in this case?

Solutions could be:

1. Create a blank theme. A minimal WordPress theme only needs to include a style.css file and index.php. Maybe we just create a simple theme that has nothing in it?
2. Maybe WordPress adds some sort of flag in the Dashboard to turn on/off the front-end?
3. Any ideas?

Anyway, the reason I want to use the API is to build JS applications and front-ends. Not more traditional PHP based WordPress themes.

Starting the Build

After all the courses and tutorials I feel I have enough Angular knowledge and am ready to start building something WordPress related.

Just like with theme development, I like to start off with some bare bones. I normally start with underscores.me as the starter theme when creating new WordPress themes. I started searching for some Angular starter projects.

With anything else, there are hundreds of Angular seed projects that will get you started. The problem I had with some of these is how they included hundreds of script calls to the different Angular files. Once you start creating a few services, directives, and other Angular related files you start to get a pretty bloated looking index file.

I fell in love and have been using Gulp for theme development for some time now, so I thought there has to be a better way that people are setting up Angular apps. After hitting the Google machine again, I stumbled across an article on Medium titled Best Practices for Building AngularJS Apps by Jeff Dickey (CLI Engineer at Heroku).

This article was exactly what I was looking for in an Angular starter app. In the article he goes over how he sets up a sample Angular app and uses Gulp to concatenate everything into one file.

Great starting point!

Adding Features

Once I had the starter app running, it was time to integrate the REST API and starting playing around with different Angular features.

Here, I started reading about the different ways to use Angular services to GET API data. After more reading and Googling, I found Todd Motto‘s blog and his Angular styleguide. He just so happens to be a Developer Expert at Google and speaks at conferences about Angular. Perfect.

At this point, I started to learn about the best ways to arrange Angular code and best practices. Reading over the styleguide, I started to change my code. One of the biggest changes was cleaning up the controllers and moving the service calls to the ui-router resolve property.

There are a couple ways he explains to arrange Angular code that I couldn’t get to work correctly, but got as close as I could without breaking the app.

After reading over his blog and styleguide, I also updated my Gulp file to wrap my minified code in an IIFE!

Slowly starting to make this Angular app awesome.

Bootstrap

Little did I know, the Angular community has all these awesome modules, directives, and scripts that are available to include in your Angular application. Kind of like plugins in the WordPress community.

Since I have always been a fan of Bootstrap, I decided to include UI Bootstrap. With this included, I started making my app look more like Bootstrap and started playing with the included directives.

Search Typeahead

Once UI Bootstrap was included in my project, I thought it would be neat to include the typeahead directive to autocomplete and search the WP REST API. Pretty neat feature, but boy was it challenging to figure out!

Other Goodies

If you look over the code you will notice some other features. These include:

• pagination
• page transition animation
• loading bar and spinner
• ui router nested views
• page titles

Now What?

I posted all the code for this project on GitHub and called it ngWP. Would love to see/hear how you are using it for your projects. Feel free to submit PRs if you add any features or find any bugs.

Check out the demo.

If you are an Angular dev, please point out things that could be optimized or done a better way!

This is just the start of my Angular adventure. Keep an eye out for more and enjoy.

The adventure of building my first Angular app with the WordPress REST API

I use these small websites to target different keywords and take up more real estate in the search engine results.

Normally, I use existing WordPress themes to quickly get these sites up and running. Since I launched MDLWP with the new Material Design framework from Google, I thought it would be nice to make my own lead generation theme.

This theme is actually just a clone of MDLWP with a new homepage layout. Here is a screenshot of the homepage:

The theme includes all the features and components you would expect in a lead generation landing page. Some of these elements include:

• large phone number in header
• banner with call to action
• simple lead generation form
• content areas to call out different services
• testimonials
• bottom call to action
• footer contact details

Again, this is a pretty standard lead generation landing page that is fully responsive and ready for any type of traffic. It is also important to note that the theme is just a start. It should be A/B tested to increase the conversion rates.

As of now, this WordPress theme is just a personal project that I will use for clients. If there is enough interest, I may package it up for general use.

Let me know in the comments section below your thoughts on the theme. What elements would you add/remove? What changes would you make?

Material Design Lead Generation Theme

Looking over the site you will notice a lot of the Material Design elements used throughout the layout. The drawer menu that is located at top right of the fixed menu along with the form elements provide some fun user interactions.

Keep checking back to see the new pages as I build out the site. Fort Worth SEO Services WILL be the leading SEO company in the Fort Worth area. These SEO services will help local business owners drive more traffic to their website and convert those visitors into new customers. See this page to get all the details!

SEO is Good fоr Buѕіnеѕѕ Visibility and Branding
When реорlе ѕеаrсh for your products аnd ѕеrvісеѕ, уоu оbvіоuѕlу want tо appear as high іn thе ѕеаrсh engine rаnkіngѕ аѕ роѕѕіblе, but the rеаѕоnѕ fоr this аrе mоrе thаn just bесаuѕе уоu want thеm tо сlісk thrоugh to уоur website. In fасt, there іѕ a сеrtаіn аmоunt оf vаluе іn ѕіmрlу арреаrіng in search rеѕultѕ fоr tеrmѕ directly rеlаtеd tо уоur buѕіnеѕѕ. Fоr instance, mоѕt ѕеаrсhеrѕ don’t juѕt simply ѕеаrсh оnсе, click оn ѕоmе wеbѕіtеѕ, аnd bе done wіth it. Inѕtеаd, thеу ѕеаrсh, сlісk on ѕоmе wеbѕіtеѕ, edit thеіr ѕеаrсh tеrmѕ, ѕеаrсh аgаіn, сlісk оn ѕоmе websites, further hone thеіr search tеrmѕ, search аgаіn, аnd ѕо оn. If you want to have network security for your business and avoid cyber attacks visit https://www.fortinet.com/products/fortisoar.

Fort Worth SEO Services Design