Create a Responsive Business Website with WordPress

Udemy

Description

Charge your clients more money by being able to create a WordPress website exactly to their requirements.

This Responsive Website Design course will enable you to create a Responsive Website for a business using the Genesis theme framework on the WordPress platform.

WordPress is the most ubiquitous CMS (Content Management System) on the internet today. It provides you with a fairly well-optimised web system. However, combining WordPress with the premium Genesis theme ensures an entirely future-proof, perfectly optimized and responsive web design.

After you have finished the Responsive Website Design course you will have learned how to:

· Layout a website visual in Photoshop and present it to your client

· Install WordPress locally on your computer to ensure faster development

· Set up a website using WordPress on a host's server

· Upload a local site to a remote site

· Create an "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

· Change the website's text, use different fonts and create beautiful web typography

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

· Create and style up new sidebar widgets

· Add social media (Twitter, Facebook, LinkedIn, etc.) profile links and icons

· Create page templates

· Add and style a jQuery slider

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

· Design and layout a blog archive page with featured image thumbnails

· Create a contact page with a contact form

· Create an email subscription list and sidebar form with incentive to join

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

· Plus much more!

I would say that 35-45% of the course is Genesis-specific so I would advise anyone taking this course to have the Genesis theme framework (which is only $59.99).

This Responsive Website Design course is ideal for anyone wishing to create a website. 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. Similarly, if you are already a web designer this course will teach you How to Make a Responsive Website by digging into the theme's code to enable you to get a WordPress site looking and acting exactly how you want it to.

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 business website like this.

Who is the target audience?
  • Web designers
  • Graphic designers
  • People wishing to work on the web
  • People wishing to provide web design and development services

Requirements
  • Photoshop, GIMP or some sort of image editor
  • Dreamweaver, Coda, TextMate, TextEdit, Notepad or some sort of text/code editor
  • IMPORTANT: Genesis theme framework ($59.95)

What Will I Learn?
  • Set up a business website from design to finished product
  • Understand WordPress
  • Understand the Genesis theme framework
  • Continue in your understanding of HTML, CSS and PHP
  • Continue in your understanding of using Photoshop and Illustrator to create web graphics


Curriculum For This Course Expand All Collapse All 38 Lectures 05:19:06 + – Preparation 3 Lectures 24:22

Welcome to my course. By the end of this course you'll be able to design and develop a responsive business website with blog, slider, contact page, etc., all in the highly optimized, expertly coded and awesome Genesis theme framework on WordPress.

You can download the Photoshop documents used in the video!

This first lecture explains about designing the visual of the website in Photoshop or any graphics program.

I also explain about what the different areas of the site are there for.

I also mention a very good logo course you can do here on Udemy. If you follow this link you'll get the course for only $22 - over 50% off

Cd 3.psd (7.73 MB) is the home page

Cd Page 1.psd (3.44 MB) is the about page – and the main template for the site.

It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

Getting started

Create a large Photoshop document. In the video we created one 1352 pixels wide. 1152px with 100px margins either side. The width and height can be increased or decreased later with Canvas Size. Make sure it's RGB at 72 dpi.

I usually center the design within canvas. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can't see the rulers go Cmd(Mac)/Ctrl(PC)-R.

Zoom in [Cmd(Mac)/Ctrl(PC)-plus]. Zoom out [Cmd(Mac)/Ctrl(PC)-minus]. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document's window.

Use vectors, Shapes and Smart Objects

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo's size multiple times without worrying about it's quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven't found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

Designing the Website Visual in Photoshop Part 1 Preview 05:58 This is about how to layout a page in Photoshop.

  • Using Guides
  • Using layers
  • Difference between Vector Smart Object and a normal rastered layer
  • Copying and pasting between documents
  • And much more!
Designing the Website Visual in Photoshop Part 2 10:47


This lecture explains, if you are working for a client, how to best display the website visuals to the client so that he/she passes the design. 

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



Home page visual number 1




You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.


Showing the Website Design to the Client 07:37 + – Local Development 22 Lectures 03:02:21

MAMP (Stands for Mac Apache MySQL PHP) 

This video shows you how to install WordPress locally on your own computer at home. This is used primarily for testing sites and creating themes. It's so useful for amending CSS in themes because the changes are instantaneous and you don't have to wait for the server to update, or even to flush cache which can be a pain in the bum.

So, download MAMP, install, start, create a new database on PHPMyAdmin, download WordPress, put the folder in /Applications/MAMP/htdocs/ find the WordPress folder with your browser by typing "localhost:8888/wordpress" run through the configuration process.

Database name: "wordpress" in the example of the video lecture but it can be called anything

Username: root (MAMP default)
Password: root (MAMP default)

Leave all the rest.

That's it. You're done!

For those of you without Macs and who are using good old Windows PCs:

Desktop Server from ServerPress is really good. As is XAMPP  

Installing WordPress locally using MAMP 04:39

Another way to install WordPress locally – for PCs as well as Macs – is XAMPP

Install XAMPP on a Mac or a PC 07:06

      • You can purchase and download the Genesis theme framework here. Free sample child theme here added as extra lecture material to this lecture.Here I explain the crucial difference between a child theme and a theme framework.Always change or edit the child theme – never edit the theme framework (the "Genesis" folder)!I often ask the visitors at my website what they would like to me write about and the most common subject people mention is making your own WordPress theme.WordPress is a powerful publishing platform which can be made to act and look like just about any kind of website.What are WordPress themes and how do you make them?Themes are a collection of PHP, CSS and image files that change the design or “skin” of your website. But they also do much more than that. They can also change the way the site behaves and the interface, producing different templates for different pages, etc.There are two main ways to create a new theme for WordPress:
        • First you get use an existing simple theme like Starkers and modify it to produce your own theme
        • Secondly, and this is the method I recommend, you can get a theme framework like Genesis or Thesis and create a child theme to run on top of the framework.
        Setting up a child theme on a framework sounds more complicated but it actually simplifies the process of creating a website.Using a theme framework makes your WordPress website future proof as these frameworks will be updated along with the WordPress core updates so there's no way your site will suddenly stop working when you update WordPress.Theme frameworksThe benefit of using a framework is that the core theme coding is already done and done right. When you create your own custom theme, you are responsible for everything – so if anything goes wrong it's up to you to fix.Many of the leading lights in website management advocate Genesis.Matt Mullenweg, WordPress founder developer: “Child themes are the only way you should build your WordPress site on top of a framework, and Genesis has great support for child themes and other WordPress functionality.”I used to create WordPress themes from scratch but when I wanted to add improvements to them, like nested comments for example, I found it would conflict with another element of the theme and fixing it would mean starting again from scratch.Even if you think you know everything, you will always be asked to do something you're not quite sure how to accomplish. When using a WordPress theme framework like Genesis you have the support of thousands of top quality developers – and amongst them there is bound to be someone who knows the exact and best solution to any query.Here are some other advantages of using theme frameworks:
        • Good for SEO. Frameworks such as Genesis and Thesis are much better structured for SEO. WordPress SEO expert Joost de Valk gives Genesis 5 out of 5 for SEO. The SEO controls are so good you don't even need an SEO plug-in, although if you do want one it's fully compatible and transferable with Yoast's WordPress SEO plug-in and others.
        • Quicker to develop with. Because it is all expertly coded and follows best practices it allows you to cherry pick the best elements (drop down menus, post thumbnails, jQuery sliders) and drop them into your design.
        • WYSIWYG controls. Theme frameworks have robust settings sections and widgetized areas, enabling drag-and-drop control over the website's elements, allowing design changes without coding.
        The reasons I use GenesisI've been using Genesis for over two years and I can honestly say that I'll never go back to writing themes on my own again. I can do everything I want with Genesis and I can do it quicker.Yes, I'm using affiliate links in this article so if you make a purchase through one of the links I may get a commission. However, I would never recommend something to you that I don't use myself. And this is why I use Genesis:
        • Support. The documentation and developer support is awesome. You can ask how to do something through their forums and an expert developer will tell you within hours.
        • Future-proof. Studiopress are always looking to the future. The next release, Genesis 1.8, will be responsive and create different device-dependent versions of the site for mobiles, iPads, tablets, etc. This is a big winner for me because the mobile web is going to be huge and so far the WordPress mobile plug-ins are not very customizable.
        • Compatibility. It's totally compatible with all the major WordPress extensions such as Gravity Forms, bbPress, WordPress Multi-Lingual, etc.
        • Price. It is, actually, rediculously cheap. And cheaper than Thesis or Headway. Just $60 for the framework – which is all you need. You can create as many sites as you want and have access to the support. $60 is a small price to pay for total certainty in SEO, security, and website development.
        Darren Rowse – Founder ProBlogger.net:“Genesis lets me sleep easy. Knowing my blog is well optimized, secure and easy to update lets me get on with developing content, community and building a business from my blogging.”Creating a child theme on the Genesis framework for WordPressHere is another video where I create a Genesis child theme for WordPress.
</b> Installing the Genesis theme framework and sample child theme 11:32

You can purchase and download the Genesis theme framework here.

Once you have WordPress up and running you need to install your Genesis theme framework and your child theme. You will get your copy of Genesis as soon as you make the purchase. Un-zip it and put it in the /themes/ folder which, as you know, can be found in /wp-content/ amongst your WordPress files. No need to touch that folder ever again – all your theme changes will go in your child theme.

And then to load your child theme download a sample child theme from the StudioPress website or here:

You may want to re-name the child theme by changing the folder name and editing the style.css and the functions.php, but put the child theme next to the Genesis theme in the /theme/ folder and activate it in the WordPress back-end.

90% of the changes you make to the child theme will be to the CSS file. The other 10% – adding custom page templates, removing certain elements from certain pages, adding widgetized areas, etc., these changes can all be put in the functions.php file. Here is the functions.php file of the above sample child theme.

<?php ;

/** Start the engine */ ;

require_once( get_template_directory() . '/lib/init.php' );

/** Child theme (do not remove) */ ;

define( 'CHILD_THEME_NAME', 'Sample Child Theme' );

define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/genesis' );

If you add any code to the above, make sure it's below the '/lib/init.php' ); line and that there are no spaces after the last character in the file.

Don't worry about getting your hands dirty with PHP. The solution to any requirement you have of Genesis will either be in the documentation or will be sorted out in the forums. There are also a couple of Genesis plug-ins (Simple Hooks and Simple Edits) which further simplify the process. And once you start pasting in PHP you begin to understand the logic behind it.

Renaming and Branding the Child Theme 03:42 What you need for developing websites:

  • Browser: Chrome (recommended), or Firefox
  • Developer Tools for Chrome or Firefox or Firebug addon for Firefox
  • Text Editor: Dreamweaver, Coda (Mac); Aptana (PC and Mac, free); TextWrangler (Mac, free); TextMate (Mac); 10 free editors reviewed
  • FTP program: Filezilla (Mac and PC, free) 
  • Graphic program: Photoshop, GIMP (free)
  • and, for our purposes, WordPress (free) and Genesis theme framework  
Introduction to Developing Websites 07:21 You can purchase and download the Genesis theme framework here. 

Lots to get through here:

  • Genesis theme settings 
  • Default layout
  • Custom header and custom background – setting these in CSS
  • Choose an image logo in the header rather than dynamic text
  • Adding a background image to the theme folder
  • Saving out images from a PSD (Photoshop document)
  • Introduction to style.css
  • Introduction to developer tools for Chrome
  • Setting a background image in CSS
  • Editing code in a text editor
Phew! Important course!
Introduction to Genesis Theme Settings & Header Logo CSS Preview 09:36 Using the WordPress menu system to create the top navigation menu bar on a website. Using Genesis theme in WordPress .

Create the pages in WordPress (pretty easy, just go Pages > Add Pages!), create a primary navigation menu and drag the pages to where I want them to go in the menu.

  • CSS: font-size, font color, and web fonts!
  • Using Google webfonts.
  • Distinction between rems and pixels as size for type.

A lot in here. Important lecture!

Creating the top navigation menu

Top navigation menus (or “navbars”) used to be the bane of my existence but now, with Genesis and WordPress menus, I have developed a really easy system of creating them which takes seconds as opposed to hours.

Genesis already has in place the ability to have a Primary and Secondary Navigation Menu. For this particular example, I got rid of the Primary and Secondary Navigation Menu using the Genesis Theme Settings and added the Menu in the Header widget.

There is also the ability to change the style of the current page links, the hover links, the sub-page links and the sub-sub-page links.

With Genesis, you can easily have drop-down menus for sub-pages (or child pages) and then fly-out links for sub-sub-pages (or grandchild pages). You can have these on both the Primary and Secondary Navigation menus.

Here is my video where I add new pages to the WordPress menu so that they appear in the navigation menu as pages, child pages (as drop-downs) and grandchild pages (as flyouts).

You can choose a page to be a child or grandchild page under Parent in the page editor. And when you look at the pages (under Pages > All Pages) the child and grandchild pages are indented underneath their parent. Doing this will also give them a logical URL (for example,www.site.com/music/jazz/charlie-parker where the page “Charlie Parker” is a child of “Jazz” which is a child of “Music”).

Creating a navigation menu with drop-downs and fly-outs

To get these pages to appear in the navigation menu correctly, you just have to drag and drop them into their respective positions in Appearance > Menus. Again, child pages are indented under their parent. Don't forget to give the menu a name (like “navbar”, for example) and set it to be the primary navigation menu.

So, arranging pages in the WordPress Appearance > Menus area like this…

… will create a drop-down menu with fly-outs like this:

Please see the video above for a demonstration of this.

</p> Creating and Styling the Top Navigation Bar 11:45

This is being created on the Genesis theme framework on WordPress.

I create a static home page and a separate blog page by changing the settings in Settings > Reading in WordPress.

A discussion of the difference between a static page and a blog page for the home page.

Enabling a full width page in Genesis.

Creating a Static Home Page and a Separate Blog Page 03:45

This is being created on the Genesis theme framework on WordPress.

I create a some sub-pages that become drop-downs in the menu. Making sure child pages have the correct directory structure in the URL

NB. You can actually make sub-sub-pages as flyout pages from the drop down pages using exactly this method!

Creating Drop-downs and Styling the Top Navigation Menu 12:08

As we don't have a background on this site we haven't set one. But I explain how to do this anyway!

  • Explaining about hexidecimal colors
  • Explaining about padding and how to set padding on the top, on the right, on the bottom, on the right. 
  • Adding background images in CSS
  • Repeating images vertically and horizontally
Creating Backgrounds & Easier CSS 06:19

Google Webfonts

Lots more CSS and explanation here!

Find and replace to change the links color in CSS

Modifying a menu item

Giving a page a different title to the main heading – usually they are the same.

Headings, Links and Typography 06:23 Lots of really important stuff here about adding the meat of the page – the content. So, not the sidebar, not the header or the footer – the actual content!


  • Difference between paragraphs and line-breaks
  • Editing in Visual and HTML/Text editor in WordPress
  • Save for Web and devices in Photoshop. Very important! How to keep your image sizes as low as possible. 
  • Importing images to WordPress
  • SEO for images, very important as well!
  • Difference between heading tags in HTML H1 and H2
  • Unordered lists – bulleted lists
Adding Text and Images into a WordPress Page 11:16

This is being created on the Genesis theme framework on WordPress.

The first time I saw WordPress widgets I thought “what on earth are these useless pieces of dog's do?” Now I think that widgets are awesome website building devices that should have pride of place in any website designer's toolbox.

What are WordPress widgets?

WordPress widgets are self contained bits of website code that can be applied to a widgetized area via an easy-to-use intuitive interface.

A fresh install of WordPress will give you some bog-standard widgets that you can drag-and-drop into your sidebar. For example:

  • Search widget adds a search box
  • Categories widget lists your blog categories
  • Recent Posts widget lists the x most recent blog posts you've written (you decide how many)

… and many more. As you are no doubt aware, the Recent Posts widget is one of the most widely used WordPress widgets!

But you can also add other amazing widgets in your sidebar by way of certain plugins. For example:

  • Latest Tweets lists your last x tweets (you decide how many)
  • Facebook Like Box shows how many people like a certain Facebook page (the fan page for the site) and which of your friends like it
  • Newsletter Signup Box enables visitors to join a mailing list

The list is endless. I use Genesis theme framework (affiliate link) which adds a lot of useful widgets. One widget can, for example, show featured or recent posts with thumbnail images.

Why should you use WordPress widgets?

Ease of use is the reason you should be using widgets. Not because it's easy for you to use; but because it's easy for your clients to use.

I always try to design websites that the client can edit because constantly updated quality content is the key to a successful website.

Of course, using WordPress as a CMS (Content Management System) is a great way to enable a client to create, edit and delete pages easily. But widgets allow another level of client interaction where they can control other, traditionally static, areas of the website such as the header, sidebar and footer. Here is an article I wrote about adding to a header widget in WordPress.

With widgets, clients can determine how many posts in which category get listed, decide on an article to be featured with thumbnail image and choose the running order in which all these elements appear. And all this is controlled within an intuitive back-end – let's face it, it doesn't get much more easy that the widget area!

How do you use WordPress widgets?

Well, as I've said, WordPress widgets are almost too easy to use that they don't bear explaining!

If you go into Appearance > Widgets on the left-hand side of the back-end you will see a large list of Available Widgets in the central area and a selection of widgetized areas on the right (for example Primary Sidebar or Header Right).

And to place a widget in a particular area – you've guessed it! – simply drag the widget from the Available Widgets area to the Primary Sidebar (or the desired area). Then you can choose the title of the widget (for example, you may like to title the Latest Posts widget “My recent articles”) and choose the various settings of the widget (for example, you can choose the number of posts or category in the Latest Posts widget).

Note: if you leave the title area in the widget blank; the element appears on the page without a heading.

So, for example, here is a screen shot of me moving a Genesis Featured Posts widget in the first of my three footer widget areas (it's just the same as if you're moving widgets into the sidebar widget area.

And here are the easy to use settings. As you can see, I set the heading to be “Latest Articles” and get it to display the 5 most recent posts with a 40 pixel square thumbnail image:

If you want to get rid of a widget, simply drag it from the widgetized area back to the Available Widgets area. If you want to take it away from the widgetized area but would like to save the settings as you may want to use it again, drag it to the Inactive Widgets area underneath and it'll sit there until you want to use them again.

How do you style WordPress widgets globally?

I use – my eternal favorites – Chrome Developer Tools and Firebug add-on for Firefox to find out what selector is used for the widgets. For example here are some styles for all the widgets on my site:

#sidebar .widget {<br>background-color: white;<br>border: 1px solid #E6E6E6;<br>margin: 0 0 15px; }

And here is the style for the widget headings:

.widget-area h4 {<br>background-color: #F8F5EE;<br>border-bottom: 1px solid #E6E6E6;<br>font-size: 16px;<br>padding: 5px 5px 5px 10px;<br>margin: 0 0 10px;<br>color: #783D00;}

Obviously the font-family of the h4 is determined elsewhere in the stylesheet.

What do you think?

Do you find widgets difficult or easy to use? Is there anything you want to be able to do with widgets that you haven't found out how to do yet? If so, I want to know.

I think widgets are a great way to add client control over website areas that have traditionally been “no go”!

Styling the Sidebar Widgets 13:47

This is being created on the Genesis theme framework on WordPress.

How do you style individual WordPress widgets?

But, what if you want the heading or background of one of the widgets to be different to the others? No problem! By using the Chrome Developer Tools (View > Developer > Developer Tools) or the Firebug add-on for Firefox, you can identify the div id that the widget is wrapped in.

So, for example, the Recent Posts widget on this blog is wrapped in div id="recent-posts-3". This is a completely unique identifier for this particular website element. (So if, for the sake of argument, you wanted to have a second Recent Posts widget on the same site, WordPress would give that a different id – “recent-posts-4″, for example).

So if you wanted to change the color of the heading (in this case the h4) of this particular widget you would add this to the CSS.

.widget-area #recent-posts-3 h4 {color: red;}

In the CSS code the dot represents a div class (in this case “widget-area”) and the hash represents a div id (in this case “recent-posts-3″). In this case the div class called “widget-area” comes before the div id “recent-posts-3″ because that’s the order they appear in the HTML.

What’s the difference between “class” and “id” in CSS? The id should be applied to an element that is unique whereas class can be applied to multiple elements on the same web page.

So how do you put something else in the sidebar that’s not a widget?

Simple, use Text Widgets! Maybe you want to add a message in the sidebar to alert potential clients that you are taking new projects? Simply drag a text widget over to the Sidebar and type!

Text Widgets can take HTML so you can add images, forms, JavaScript, whatever! I’ve used Text Widgets for my “Connect with me” links box (Twitter, Facebook, YouTube, etc.), sign-up form box, Adsense code, and all sorts of sidebar goodness!

What if you want different widgets appearing on certain pages?

You may think that this system of widgets is inflexible. I would say that the opposite is true – it actually adds flexibility.

You can use the Widget Logic plugin which uses WordPress conditional tags to specify which widgets go where. So you can can control the appearance (or not) of a certain widget on the home page, a single blog post, a blog post from a particular category, a particular page, etc.

Also, you can put a specific message on each page’s sidebar by using the PHP Code Widget plugin.

And, with the Genesis theme framework, you can use Simple Sidebars plugin to create multiple, dynamic widget areas, and assign those widget areas to the sidebar on a per post, per page, or per category basis.

Styling Individual Sidebar Widgets 02:38

THE HTML AND CSS IN THE DOWNLOADABLE COURSE MATERIALS IS DIFFERENT TO THE EXAMPLE IN THE VIDEO. THIS IS BECAUSE I MADE THE ICONS TOO BIG HERE AND THEY WILL BE CORRECTED IN A LATER LECTURE.

PLEASE DOWNLOAD THE DOWNLOADABLE MATERIALS BECAUSE THEY CONTAIN A PSD AND PNG OF AN IMAGE SPRITE WITH 30 X 30 PIXEL SOCIAL MEDIA ICONS (INCLUDING PINTEREST!)

Think speed!

As you will already know, Google takes loading speeds into account when ranking pages. Also, I hate waiting for sites to load. So I wanted to create these header buttons with a minimum amount of HTML, CSS and, more importantly, HTTP requests.

Here I have social media icon images and all of them have rollover states. That means there could potentially be 14 HTTP requests for images just for these little buttons. The images themselves maybe small but it's the separate requests to get the images that can severely increase page load.

So how do we cut down those image requests? Simple, by creating one big image.

Say hello to my best friend – the image sprite

Here is the image sprite I used to create the social media buttons and their hover states:

As I'm using the Genesis theme for WordPress, I enter the HTML into a text header widget.

Finally here is the list of buttons. Why don't you join me in one of these places?

  • Google+ This is the social network which has the greatest trajectory for improvement. Google rules the search engines so it's going to try to push this social network as far as it can. I write quite a lot here, contribute to discussions, arrange hangouts and post my latest blog posts
  • RSS Feed You can subscribe to all my blog posts by a feed-reader such as Google Reader
  • Subscribe Here you can subscribe to my newsletter and get a free copy of my e-book “How to Market Yourself Online”
  • Facebook This is really coming along, we're having great discussions and I post my latest posts here as well
  • Twitter Here I tweet out my latest stuff plus all the stuff I read everywhere. I can tweet up to 10 times a day!
  • LinkedIn This is my LinkedIn profile. But I love LinkedIn Groups and I have one called Niche Site Marketing
  • YouTube This contains about 50 tutorial videos about web design and internet marketing – more to come here soon!
What do you think?

Do you have social media links in your sidebar or header? How did you create them? What do you think of mine? Are they the right shape and in the best position?

Creating the Social Profile Icons 09:22 As we are using the Genesis theme, we can edit the footer with the Simple Edits plugin.

More CSS to style up the footer.

Creating and Styling the Footer 09:05 The fantastic blog post will help you here: How to Make a Genesis Page Template That Uses Widgets

And also, as supplementary materials to this lecture we have the functions.php, front.php and style.css as they were at the end of the lecture video.

This is a really important video as it introduces us to using PHP in the functions.php of the child theme to change the way the theme works. You can get the site and/or any of it's pages to look and behave differently without touching the core Genesis files. (Of course you never touch the core Genesis files as they get updated). 


Creating a Widgetized Page Template 08:30 Supplementary materials to this lecture we have the functions.php and front.php as they were at the end of the lecture video.

Adding another widget area to the home page in order to add our Genesis Responsive Slider plugin widget in order to get started. 

Adding the Genesis Responsive Slider to the Home Page 03:38

(Remember this will only work if you have the Genesis theme framework).

In the last lesson we activated the Genesis Responsive Slider and then drag the Genesis – Responsive Slider widget into the Home Slider widget area. Then all you have to do is go Genesis > Slider Settings to get it to work as you want.

Bear in mind the slider pulls in the first image from the post or page it features. Create all the images the same size to avoid confusion. 

Create 3 pages

We quickly add three pages with images in the correct size. And set up the slider to display them. 

Adding Content to the Genesis Responsive Slider 05:18
Dates:
  • Free schedule
Course properties:
  • Free:
  • Paid:
  • Certificate:
  • MOOC:
  • Video:
  • Audio:
  • Email-course:
  • Language: English Gb

Reviews

No reviews yet. Want to be the first?

Register to leave a review

More on this topic:
151254_1a32_4 Online Courses - Anytime, Anywhere
Wordpress 3.8.1 essential training covers all the basics of setting up of wordpress...
92954_1636 WordPress Security - Secure WordPress, Stop Hackers
There are over 60 MILLION WordPress websites in the World including, The New...
42397_7158_8 How to Build Your Own Online Business with WordPress
Learn to build a business website with WordPress. Then learn how to run your...
37379_2cd6_10 Online Courses - Anytime, Anywhere
Building A Website With Wordpress From Scratch That Builds Your Business W/O...
118972_b59a_5 Web Design
In this web design course, learn Wordpress content management system and how...
More from 'Udemy':
Show?id=n3eliycplgk&bids=323058 Thousands of online courses for only $15
Most courses are dropped to $15 flat price!
Banner_ruby Ruby on Rails Tutorial: Learn From Scratch
This post is part of our “Getting Started” series of free text tutorials on...
Show?id=n3eliycplgk&bids=323058 $10 Sitewide Deal
$10 Fixed Price across the site!
64422_c6dd_6 1 Hour HTML
Learn how to code in HTML in 1 hour. This class is set up for complete beginners...
72262_60dc_6 1 hour jQuery
Have you ever wanted to learn to code. This course will show you the basics...

© 2013-2019