Create A Custom Responsive WordPress Website For A Client
4.8 (91 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,526 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create A Custom Responsive WordPress Website For A Client to your Wishlist.

Add to Wishlist

Create A Custom Responsive WordPress Website For A Client

Build a responsive WordPress website that exactly matches client expectations
4.8 (91 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,526 students enrolled
Created by Rob Cubbon
Last updated 6/2015
Curiosity Sale
Current price: $10 Original price: $95 Discount: 89% off
30-Day Money-Back Guarantee
  • 4.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • create a WordPress website
  • create an email list and email capture signup form
  • learn about browser's Developer Tools, HTML and CSS
  • understand how to get WordPress to show any sort of page you like
  • be able to create a website for a client and charge $3000+
  • understand media queries and making a website responsive
View Curriculum
  • Genesis theme framework
  • Computer & internet

Charge your clients much more money by creating a WordPress website exactly to their requirements.

Create a custom responsive WordPress website for a client using the Genesis theme framework on the WordPress platform.

WordPress provides you with a fairly well-optimised web system. However, combining WordPress with the premium Genesis theme ($59.95) ensures an entirely future-proof, perfectly optimized and responsive web design with the latest CSS3 and HTML5 with Schema mark-up.

The course shows you everything – from the basics to fairly advanced HTML and CSS tweaking of the child theme.

After you have finished this course you will have learned how to:

· Set up a WordPress website on a host's server (both the manual and "one-click" methods)

· Create a custom "Under Construction" page to display during online development

· Set up the logo and top navigation menu with drop-downs

· Set up a blog on it's own separate page

· Set up social media profile link widgets and understand widgets in general

· Add content and images to the website's pages and the blog posts

· Create and style up new sidebar widgets

· Two ways of adding and editing an image slider with overlaid text

· Use CSS media queries to ensure the site displays correctly on all browsers and all possible devices (phones, iPods, iPads, tablets, laptops, etc.) – completely understand responsive design

· Create a contact page with a contact form

· Create an email subscription list and sidebar form with incentive to join – the most important tactic of internet marketing

· Display a "favicon" for your site for the browsers's address bars (as well as for iPod Touch, iPads and iPhones)

· Display a higher resolution logo for retina screens

· Plus much more!

I would advise anyone taking this course to have the Genesis theme framework although it isn't 100% necessary.

This course is ideal for anyone wishing to create a website for themselves or other businesses – for which you could charge $3000+. I have gone into everything in great detail so there's no need to worry if you have very little knowledge of WordPress, HTML, CSS and/or PHP.

The course would be particularly useful for people who wish to run their own web design business as you would be able to charge four-figure fees for creating a bespoke website like this.

Who is the target audience?
  • those wanting to produce websites for other people and charge four-figure fees
  • those wanting to be able to set up a WordPress website for themselves
Students Who Viewed This Course Also Viewed
Curriculum For This Course
47 Lectures
1 Lecture 02:18

An introduction to the course.

Background music credit:

Preview 02:18
Installation and Introducing WordPress
5 Lectures 24:24

Using Vidahost as my host, this shows you how to easily install WordPress with one-click.

Preview 06:19

Using Vidahost as the host, this shows you how to easily install WordPress manually.

Setting up WordPress manually on a host using cPanel

Adding a plugin in WordPress to make sure that there is an "Under Construction" page there for visitors to see.

Adding the under construction plug-in

Using the plugin from the last lecture to set up a custom "Under Construction" page with an image.

Setting up a custom "Under Construction" page

In the left hand side of the WordPress backend there are two tabs one called Pages the other called Posts. The pages are for static WordPress pages, for example, the About page or the Contact page. The posts are for the blog articles.

The difference between Pages & Posts and explanation of custom permalinks
Introducing Genesis and beginning customization
12 Lectures 01:06:22

Click here to get the Genesis theme framework.

Installing Genesis

This is how to make your child theme (and therefore the theme that you use) doesn't look like the Genesis Sample Child Theme. So we change the name and the image that you see in the WordPress > Appearance > Themes screen.

Customize and brand your child theme

Introduction to editing the main Setting in WordPress, this time the site title and the tagline

Changing the site title and tagline

A PSD is attached here which is similar to the finished website.

Setting the home page and the blog page in the WordPress > Settings > Reading

Creating a static home page and separate blog page

Creating a top navigation menu with Genesis

Creating the top navigation menu

Click the Add Media button on a WordPress Page or Post. Further tutorials on this later in the course.

Adding an image to the home page

Further tutorials on this later in the course.

Formatting text and adding subheadings in WordPress

Widgetized areas in WordPress are areas of the site (to the right of the header, in the sidebar, in the footer, for example) where you can add widgets. Widgets are easily customised pieces of web code or software that can perform certain functions on your website (latest posts widget, calendar widget, search bar widget, email signup form widget, etc.) They make web development easy!

Introducing widgets

Showing how the site responds to different device widths

Checking mobile responsiveness

How to edit what goes in the footer of each page using the Genesis theme.

Editing the footer

Using a widget to add links to Twitter, Facebook, etc

Adding social media profile icons to the header

Mailchimp is an email marketing company. You can create a list of up to 2000 people on Mailchimp for free.

Creating a MailChimp Email List and Adding an Email Signup Form in a Widget
Tools of the trade
1 Lecture 04:05

There is a simple tool that exists on most computers that will help you understand web design. It’s called Developer Tools.

What are Developer Tools?

Every browser comes with Developer Tools. They allow you to see the nuts and bolts that make up a web page and make changes “on the fly” without having to get your hands dirty editing code files. These changes won’t be seen by anyone – Developer Tools are an environment to test, explore and learn.

Getting Developer Tools to display depends on the browser and system you are using and, sadly, this won’t be possible on tablets or smartphones.

If you’re on a Windows PC, try hitting the F12 key and they’ll pop up at the bottom of your browser window. This may not work on Firefox where you could try Control-Shift-I . If you are on a Mac, Command-Alt-I will bring them up in every browser. To get rid of them, simply hit the same keys.

And, as you can see in the video, you can also right-click on any element on a web page and select “Inspect Element” – the Developer Tools will pop up with the relevant element selected.

Using Developer Tools

It takes a bit of practice to use Developer Tools. But you should try to isolate an element on a web page you’d like to inspect and then see how you can edit it.

Selecting the element, again, depends on the browser and system you are using. You can select a magnifying glass icon in Chrome’s Developer Tools or a cursor tool in Internet Explorer’s Developer Tools. In Firefox, you can select items on the page just after bringing up the Developer Tools, however you have to click on the Style button to inspect the styles on a PC. Again, a simpler way is to right-click on any element and select “Inspect Element”.

Let’s do it now!

Once you have mastered this ability to inspect elements in Developer Tools, you can learn a great deal about HTML and CSS. You can see in the HTML (the larger pane on the left of the Developer Tools) normal body text is wrapped in a <p> tag.

The p stands for paragraph. And you can see in the CSS (the smaller pane to the right of the Developer Tools) the various styles that affect the body text on The first line of the style that affects the <p> tag (or.entry-content p) is “margin: 0 0 25px;” – this adds space (or margin) to the bottom of each paragraph. There is a checkbox next to it, go ahead and uncheck it. You will notice the paragraphs all close up and the space between them disappears. You can even click on that “25px”, change the value and see the paragraphs with greater or lesser space between them. Pretty cool? And, if you get yourself into a pickle, you can simply refresh the page and all the styles will be set back to the way they were.

Editing your theme’s CSS file

So what’s the point of all this? This will help you improve your website design and development skills. But I would encourage you to take baby steps with this if you’re not used to editing your themes files.

Always back up your website before making any changes to the WordPress theme files.

If you’re all backed up and you want to change some style on your website then you may do so by going Appearance > Editor in the WordPress administration area. This will usually take you to the editor for your “styles.css” – the file mostly responsible for the way your website looks. You can make edits to this document but, further down the line, you will prefer to use a good code editor along with an FTP program for uploading.

But, for now, you may like to play around with your basic typographical styling. Is your body text too small? Could your mother read it without her glasses? Maybe it could do with another few pixels on the font-size. After you’ve done that, are the body text lines too close together? If so, you may have to increase the line-height. Is there sufficient space above and below your subheadings? You could add a few pixels to the padding or margin above or below your h2 or h3 tags.

Why CSS?

It stands for Cascading Style Sheets, so called because the style declarations are set generally and specifically and cascade down with the more specific style declarations taking precedence over the general ones.

This can mean if you change one style to affect one element you can find it affecting other elements in your site that you didn’t want to change. The way to avoid this is to set more specific styles – but that will have to be a lesson for another day. In the meantime, just play with it.

Keep copies of your styles every step of the way so, if something goes wrong, you can always revert back. If possible, practice on a test site first. But, it’s fun! You’ll be geeking out on CSS in no time.

You can do it!

You can improve the design of your website. You will be rewarded with a more engaged audience who spend longer times on your site. You could also play around with Developer Tools to gain a greater understanding of HTML and CSS and improve your website’s formatting globally. If you have any questions, I’d be happy to help.

Introduction to Developer Tools
More advanced customization
12 Lectures 01:21:24

Adding a bespoke logo to our Genesis Child Theme.

Changing the logo image

Some CSS editing to change colors

Changing the color of the top navigation menu bar

More CSS editing to change the links style in the top nav menu

Editing the style of the text links in the top navigation menu bar

A different way to create a MailChimp form, this time by adding HTML from the Mailchimp site to a text widget in the sidebar.

Creating a signup form by pasting HTML from MailChimp

Editing the HTML of the form to get rid of the bits we don't want and to move around the order of the form's elements.

Editing the HTML of the MailChimp signup form

styling the signup form with css

Styling the MailChimp signup form with CSS

Making sure the header widget element on the right of the header lines up with the logo on the left in the way that we want it to.

Changing the position of the header widget

Changing the font weight of the subheadings

Create a new user in WordPress and a discussion on WordPress user roles

Creating a new user in WordPress and a discussion about user roles

More styling on the email signup form's button

More styling on the email signup form subscribe button

This uses the CSS property "line-height" to add more space between the lines of the headings

Changing the line height of the page heading

  • Using the WordPress plugin Contact Form 7 to create a contact form that gets sent to the client's email when filled out.
Adding a contact form
Improving the website's responsivity to different devices (phones, tablets, etc)
3 Lectures 20:19

Showing how the media queries in the CSS file control the way the website responds to different sized devices

Introduction to responsivity of the website and media queries

Making sure our large logo is visible on smaller devices by putting in a smaller version of the logo in the narrower widths of media queries.

Changing the logo image for different device widths

Adding a logo especially for retina screen devices like the new MacBook Pro's.

Media queries for retina screens
Training the client in using WordPress
2 Lectures 07:10

Training the client to use WordPress. This is a live training session where we get to grips with the WordPress Page editor.

Editing the home page with the client

Training the client to use WordPress. This is a live training session where we get to grips with adding sub-pages or drop-downs to the main navigation menu.

Adding pages and sub-pages [drop-downs] to the menu with the client
Further improvements
5 Lectures 23:58

Changing the color of all the text links in the posts and pages of the WordPress website

Changing the link color in the style.css

The favicons are available as supplementary material.

This is what you paste in the head:

<link rel="shortcut icon" href="" /> <link rel="apple-touch-icon-precomposed" href="" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="" />

Creating a favicon

How to change the background of the dropdown menus.

Changing the background color of the dropdown menu

WordPress Page and Post text and image formatting

Going live means deactivating the Under Construction plug-in

Making the site go live!
Adding image sliders
3 Lectures 21:25

How to use the Cyclone Slider

Putting a non-responsive image slider on the home page

Adding the responsive Layer Slider from CodeCanyon to the home page

Further editing to the Layer Slider
Further WordPress Page and Post formatting tutorials
2 Lectures 06:45

How to add subheading to your WordPress Posts (and Pages)

How to add subheadings to your WordPress Post (or Page)

Everything you'll need to know about adding images to a WordPress Page or Post

Adding images to a WordPress Page or Post
1 More Section
About the Instructor
Rob Cubbon
4.5 Average rating
1,036 Reviews
28,373 Students
15 Courses
Bestselling author, entrepreneur, web and graphic designer

I have over 15 years experience in graphic design, web design and marketing. I have run my own business since 2005.

I am an Amazon bestselling author of seven books, bestselling Udemy instructor and all-round good guy who wants success for you and your business.

Being your own boss is an incredibly liberating experience but it can be difficult as well. There never seems to be enough time for what we want to do.

I'm driven to help people experience the positive side of entrepreneurship, not the negative.

I also build brands, create websites and run marketing campaigns for my clients.

My mission statement: I want to help and inspire people to build sustainable online businesses, earn passive income and experience greater freedom and happiness in their lives.