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.
Adding a plugin in WordPress to make sure that there is an "Under Construction" page there for visitors to see.
Using the plugin from the last lecture to set up a custom "Under Construction" page with an image.
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.
Click here to get the Genesis theme framework.
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.
Introduction to editing the main Setting in WordPress, this time the site title and the 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 top navigation menu with Genesis
Click the Add Media button on a WordPress Page or Post. Further tutorials on this later in the course.
Further tutorials on this later in the course.
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!
Showing how the site responds to different device widths
How to edit what goes in the footer of each page using the Genesis theme.
Using a widget to add links to Twitter, Facebook, etc
Mailchimp is an email marketing company. You can create a list of up to 2000 people on Mailchimp for free.
There is a simple tool that exists on most computers that will help you understand web design. It’s called 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.
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”.
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 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 RobCubbon.com. 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.
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.
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 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.
Adding a bespoke logo to our Genesis Child Theme.
Some CSS editing to change colors
More CSS editing to change the links style in the top nav menu
A different way to create a MailChimp form, this time by adding HTML from the Mailchimp site to a text widget in the sidebar.
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.
styling the 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.
Create a new user in WordPress and a discussion on WordPress user roles
More styling on the email signup form's button
This uses the CSS property "line-height" to add more space between the lines of the headings
Showing how the media queries in the CSS file control the way the website responds to different sized devices
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.
Adding a logo especially for retina screen devices like the new MacBook Pro's.
Training the client to use WordPress. This is a live training session where we get to grips with the WordPress Page editor.
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.
Changing the color of all the text links in the posts and pages of the WordPress website
The favicons are available as supplementary material.
This is what you paste in the head:
<link rel="shortcut icon" href="http://nurahnash.com/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="http://nurahnash.com/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://nurahnash.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://nurahnash.com/apple-touch-icon-114x114.png" />
How to change the background of the dropdown menus.
More info here: The Ultimate Guide To WordPress Blog Post Formatting
Going live means deactivating the Under Construction plug-in
How to add subheading to your WordPress Posts (and Pages)
Everything you'll need to know about adding images to a WordPress Page or Post
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.