Scribd
Upload
39 views15 pages

Advanced Web Design Step by Step Companion

This document provides step-by-step instructions for advanced customization of a WordPress website including disabling comments, adding widgets, creating sub-menus, removing powered by WordPress from the footer, customizing themes, filling the site with content like about, shipping, FAQ and contact pages, and using the Contact Form 7 plugin to create a contact form. The conclusion emphasizes that there is more to learn about WordPress design and to explore other plugins and themes to become familiar with designing websites using WordPress.

Uploaded by

Saleh Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views15 pages

Advanced Web Design Step by Step Companion

This document provides step-by-step instructions for advanced customization of a WordPress website including disabling comments, adding widgets, creating sub-menus, removing powered by WordPress from the footer, customizing themes, filling the site with content like about, shipping, FAQ and contact pages, and using the Contact Form 7 plugin to create a contact form. The conclusion emphasizes that there is more to learn about WordPress design and to explore other plugins and themes to become familiar with designing websites using WordPress.

Uploaded by

Saleh Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

LECTURE 16

Advanced Web Design:


A STEP-BY-STEP COMPANION
Disable Comments On Pages:

• Go to “Settings” >> “Discussion


Settings”.

• Deselect “Allow link notifications


from other blogs” and “Allow people
to post comments on new articles”
and then save your changes.

Note: you can override this setting


for your blog posts

• Go to “Pages”.

• Using “Quick-Edit”, select “Disable


Comments” for each page that you
want to don't want your visitors to
comment on.

Note: I did not cover the creation of the


contact page.
Adding Widgets To The Sidebar:

• Go to “Appearance” >> “Widgets”.

Your theme will give you several


options for which locations that you
can place your widgets. On the left
hand column, all of your available
widgets will be displayed.

After clicking on the your chosen


widget, it will bring up your theme
location options and clicking the
blue “Add Widget” button will add it
to your site. You can also drag it
straight to the widget area.

When WooCommerce was installed,


it came with several widgets that are
encouraged to add to your sidebar.

• After you add your widget to a


“Widget Area”. You will see several
options that you can customize that
will change how the widget appears
on your site.

• “Save” all changes that you make


and view the sidebar on your site.
Go back and make any changes that
you need to .
Creating A Sub-Menu:

• Go to “Appearance” >> “Menus”.

• Click on the blue “Create New


Menu” and name it something like
'sub-navigation'.

• Add the pages, links, or categories


that you want to your sub-
navigation and be sure to “Save”
your changes.

• Go to “Widgets”.

• Add “Custom Menu” to your chosen


widget area (in this course, I add it
to the “First Footer Widget Area”)
and select your newly created menu.

• “Save” your changes.


Removing “Powered By
WordPress” From The Footer:

• Go to “Appearance” >> “”Editor.

Note: These are the sources files for


your theme and even the WordPress
CMS itself. They are written in PHP, a
server-side scripting language that
contains HTML and CSS. Unless you
have a strong understanding of web
design – I wouldn't recommend
digging too deep into the “Editor”

• Click on “Footer” heading on the


right hand column (“footer.php”)
This will bring up the code for your
theme's Footer.

• Scroll down until you see the section


that includes the “Powered By
WordPress” text. Delete the text.

Be sure to look carefully at the code


and only delete the sections that
refer to WordPress or the theme.
You don't want to delete the entire
<div>.

• Click on the blue “Update File”. This


will save your changes.

Review your site and ensure that you


have deleted everything properly. I
would recommend “copying” the
entire code before you delete
anything; just in case anything goes
wrong.
Editing the “discover” Theme:

The “discover” Theme is a free


WooCommerce enabled theme. In addition
to the “Customize” section, you can further
edit your theme via the “Theme Options”
tab that has been added in the
“Appeareance” Section.

• Go to “Appearance” >> “Theme


Options”.

• Under“Homepage” you can control


the different sub-items, their
thumbnails, links and buttons.
Choose a high quality product photo
or promotional image and be sure
to fit it to the themes recommended
guidelines.

Box Image Requirements:


215x130px

• Under “Colors”, you can set the color


schemes for your site. For this
course, we use 'discover's' default
color scheme.

• Under “Favicon”, you can set the


image that appears in your header
along with the web address.

Favicon Image Requirements:


32x32px

• Go to “Slider”. This is where you


control the main section of your
homepage with your 'Welcome
Headline', 'Welcome Text' and
'Button Text'. You can only upload
two slider images but you do have
the ability to add text to each slide.

Slider Image Requirements: 637x298

• Go to “Footer”. This is where you can


insert your Google Analytics
Tracking ID and add a copyright
notice on your site.
• “Customize Style” is where you can
inject custom CSS into your theme. I
do not cover CSS in this course.

• Be sure to save all of the changes


that you make and after you've
created all your theme options, you
need to set a “Static Home Page”.

• Go to “Settings” >> “Reading”.

• Under “Front page displays”, select


“a static page”.

• From the “Front page:” drop-down


menu, select your 'Home' page.

• Under “Posts page:”, select your


'Blog' page.

• Scroll to the bottom and click the


blue “Save Changes” Button.

• Go to “Appearance” >> “Menu” and


ensure that your blog has been
added to your main navigation.
Additional Resources for customizing
the 'discover' theme:

• 'discover' theme support


section on WordPress.org
• 'discover' Developers section.
Filling Your Website With
Relevant Content:
Your “About” Page:

Use your “About” to provide a visitor with a


background on your business, it's purpose
and who you are as it's owner. It's a great
opportunity to identify with your niche and
build trust with a prospective customer.

Your “Shipping” Page:

The shipping page is a key part of your


online and essential for one simple reason
– It's important information!

This course makes use of ThePrintful's


shipping information to give rough
shipping times. I also provide contact
information on the Shipping page if the
visitor wants to get in touch with me.
Again, it is a useful tool for building trust.
The“FAQ” Page:

No matter what; your customer is going to


have questions. The FAQ page is useful
because you anticipate problems before
they happen. Having an FAQ page also
gives you a place to quickly refer people
who ask you questions and you can
continually add to it as well. Include
another contact link as it will again, be
helpful to building trust and giving the
customer multiple opportunities get in
direct contact with you.

The“Contact” Page:

The Contact page is one of the most


important pages in your site. You need a
contact page that gives visitors that ability
to get in direct contact with you. But here's
the kicker, unless you make a conscious
effort to respond to each and every
request. There is no point.

There are contact plugins that you can use


to gather questions and emails but this
course makes use of the Contact Form 7
Plugin.

• Go to “Plugins” >> “Add New”.

• Type 'Contact Form 7' in the


“Search” box.

• Click on the gray “Install Now”


button on plugin with the icon of a
mountain.

• After it finishes installing, click on


“Activate Plugin”.

• You will see that a new “Contact”


section has been added to the
WordPress sidebar. Click on
“Contact” >> “Add New”.

• The default fields that the plugin


creates are perfectly sufficient for
your contact page. Name your form
and click “Save Form” and generate
your short-code
• Add your contact form short-code to
your contact page and any pages
that need a contact form.

• Review your site and ensure that you


have completely filled your site with
relevant content that is free of
spelling errors or bad grammar.

CONCLUSION:

There is so much to learn about WordPress


design – far too much than to include in
this course. Get as familiar with WordPress
as you can and explore other plugins and
themes and in no time, designing a website
with WordPress will come naturally and you
can add it to your entrepreneurial tool-belt.

You might also like