This document provides tips and information about customizing WordPress themes and websites using HTML, CSS, and child themes. It includes overviews of the WordPress dashboard sections like Appearance, Plugins, and Settings and how to use them. Specific tips are provided for editing CSS, creating a child theme, common HTML tags, and recommended plugins. Contact information is given for the instructor to ask additional questions.
2. Deb: deb.mbymhost.com
Login: deb
Password: flagday2015
Mary Ann: maryann.mbymhost.com
Login: maryann
Password: flagday2015
Walter: walter.mbymhost.com
Login: walter
Password: flagday2015
Steve: steve.mbymhost.com
Login: steve
Password: flagday2015
Your Sandboxes
3.
4.
5.
6.
7.
8.
9.
10. Tip/Hack
Changing your theme won’t delete your content (media,
posts, and pages) but most likely WILL delete any
customization – so if you revert back to an older theme you
will have to re-enter customizations.
Tip/Hack
Don’t want any media to link to the file?
Put this in your functions.php file.
update_option('image_default_link_type','none');
Tip/Hack
Using the “Visual” vs. “Text” views will allow you to access
and edit different aspects of the page.
11. Tip/Hack
You can “layer” your spam filters for added effect. I often
install Antispam Bee and Bad Behavior on blogging sites to
control spam.
Tip/Hack
A favicon is the cherry on your website sundae! It’s good for
branding, too!
12. Basic Installation
WordPress automatically installs several things:
Themes: twenty twelve, twenty thirteen, twenty fourteen,
twenty fifteen
Plugins: Akismet, Hello Dolly
Tip/Hack
NOTE: delete plugins and themes not in use. They can be a
security risk, and they take up server space.
MarketedByMichelle.com
13. Basic Installation
Where to get started
Choose your plugins and upload them.
Some of my “must haves” include:
Security (BruteProtect, WordFence)
Spam Control (Disable Comments)
Widget Solutions (Jetpack)
Backup (Backup Buddy, WPClone)
Forms (Gravity Forms, Jotform)
Calendar (Timely)
SEO (Yoast)
Post Expirator
Shopping Cart
(woo commerce, Ecwid, shopify)
Tip/Hack
Logged into your wordpress.org account? Favorite the
plugins you use frequently for easy uploading from the
repository.
MarketedByMichelle.com
14. Appearance
Themes
Delete anything you are not using or will not use.
Customize will have different options based on the theme.
Background may or may not display as you intend – based
on the theme.
Tip/Hack
Never edit theme files directly! Use a child theme or CSS
editor (like the one included with Jetpack) to make CSS
edits.
MarketedByMichelle.com
15. Appearance
Widgets
Widgets area also varies based on themes, but most have
similar functions. Variations may include WHERE widgets can
be placed (i.e. footer, sidebar, header, etc.)
Standard widgets include text boxes, meta functions,
calendar of posts, categories, menus, etc.
Plugins can often provide additional widget options like
Facebook “like” boxes, Twitter feeds, and even industry-
specific options like real estate MLS lookups.
Tip/Hack
The Text Widget allows you to use basic HTML language to
add content, links, graphics, etc. This can really come in
handy!
MarketedByMichelle.com
16. Appearance
Menus
Menus are much more versatile than you may think!
Establish link hierarchy through dropdowns
Add links to outside pages in your menu
Customize labels – change the menu name without changing
the target page or link name
Add blog categories as their own menu items
Tip/Hack
Want a menu link to open in a new tab? Click the “Screen
Options” tab at the top of the menu dashboard and check
“link target.” Now when you edit a menu item you can
check “open in new window/tab.”
MarketedByMichelle.com
17. Plugins
Installed Plugins
See all the plugins you have installed.
See which need updating.
Activate/deactivate/update/delete
Tip/Hack
When looking for plugins, check to see when last updated,
and look at the ratings before you download/upload your
plugin.
MarketedByMichelle.com
18. Settings
What to Change
General Settings
Site Title
Tagline
Timezone
Date Format
Week Starts On
Tip/Hack
Be careful not to change your WP or Site addresses unless
you are confident of what you are doing. You can make your
site “disappear.” You have to know how to navigate the
Cpanel well to fix it.
MarketedByMichelle.com
19. Settings
What to Change
Permalinks
Permalinks will default to unfriendly URL page names (like
/?p=123)
Instead click the “Post Name” setting to have your page names
appear in the URL bar. (like www.sitename.com/pagename)
Tip/Hack
Using Post Names as the URL page name also assists with
SEO!
MarketedByMichelle.com
20. HTML
Where to use HTML
Text Editor on pages and posts
Text widgets
MarketedByMichelle.com
21. HTML
Most Common Tags
Header Tags
<H1>…</h1>
Text Appearance
Bold <B>…</b>
Underline <U>…</u>
Italic <I>…</i>
Alignment Tags
<P Align=“Left”>…</p> (or Center or Right)
MarketedByMichelle.com
22. HTML
Most Common Tags
Lists
Numbered Lists
<OL>
<LI>First row
<LI>Second row
</OL>
Bulleted Lists
<UL>
<LI>First row
<LI>Second row
</UL>
MarketedByMichelle.com
23. HTML
Most Common Tags
Horizontal Lines
<HR> (full-width line)
<HR SIZE=6 WIDTH=50%> (half-width line)
Break Tags
<Br> Forced line break
<P> Paragraph Break
MarketedByMichelle.com
24. HTML
Most Common Tags
Display an Image
<img src="http://kellybradley.mbymhost.com/wp-
content/uploads/2015/06/yellow-flowers.jpg" width="300px">
Link Tag to another URL
<A HREF=“URL”>Text/description</a>
Link Tag to another URL through a graphic
<a
href="https://www.facebook.com/kellybradleyDC?fref=ts"><im
g src="http://kellybradley.mbymhost.com/wp-
content/uploads/2015/05/connect_to_facebook.png"
width="200px"></a>
MarketedByMichelle.com
25. HTML
Most Common Tags
Anchor Tags/Jump Tags
(Ex: http://zarpfarms.com/baked-goods/)
<a href="#anchor">Link Text</a>
<a id="anchor"></a>
MarketedByMichelle.com
26. Editing CSS
Four ways to edit CSS:
Settings/editor NO! Don’t do this!
Theme includes an editor
Edit CSS via plugin (Jetpack automatically provides this)
Create a child theme
Tip/Hack
Download the “Firebug” add-on to Firefox to view and
“isolate” code. You can then experiment with settings
without changing your page. You can also use “Inspect
Element” in Chrome.
MarketedByMichelle.com
27. Editing CSS
Using Firebug in Firefox:
Click the Firebug icon
Click the Inspect Element button
Tip/Hack
The window that opens at the bottom of the browser will
display div and php functions in the left window, and CSS
elements in the right.
MarketedByMichelle.com
28. Editing CSS
Using Firebug in Firefox:
Click any element
on the web page to
inspect the code
behind it.
“Play” with the settings
to see how you might
want to edit them.
Copy/paste the edits
into your CSS editor
or Child Theme.
MarketedByMichelle.com
29. Editing in a CSS Editor (Like JetPack)
On the dashboard, click “Appearance” then “Edit CSS.”
Enter the new CSS in the editor, then click “save stylesheet”
Go to the site and refresh the page to see the changes.
Don’t like JetPack? There are other plugins that will give you
the same functionality.
https://wordpress.org/plugins/simple-custom-css/
https://wordpress.org/plugins/wp-live-css-editor/
http://www.csshero.org/
MarketedByMichelle.com
30.
31. Creating a Child Theme
Child Themes allow you to make changes to your theme
without “breaking” your theme.
Child themes are independent of your theme – so if you do
a theme update, you will not lose your edits.
Child themes only need to add code that differs from the
theme.
The only file needed for a child theme is style.css, but
you can also add .php files to your child theme.
Tip/Hack
Visit http://codex.wordpress.org/Child_Themes to learn
even more about how to build a child theme and how they
function.
MarketedByMichelle.com
32. Creating a Child Theme
Place your style.css file in a folder named with your
parent theme name-child. (I.e. Chameleon-child)
Put any .php files you create into that folder.
Upload via FTP to your WordPress site’s wp-
content/themes file.
Navigate to your dashboard’s appearance/themes page
and “activate” your child theme.
Check your site to see if it worked, or if you need to
further edit the child theme’s style.css file.
Tip/Hack
Comments are used to explain your code, and may help you
when you edit the source code at a later date. Comments
are ignored by browsers.
A CSS comment starts with /* and ends with */.
MarketedByMichelle.com
33. Creating a Child Theme/*
Theme Name: SampleTheme Child
Theme URI: http://www.samplethemes.com/gallery/
Description: SampleTheme Child Theme
Author: YOUR NAME
Author URI: http://YOURSITE.com
Template: SampleTheme
Version: 10.
Tags:
Text Domain: SampleTheme-child
*/
@import url("../SampleTheme/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
Tip/Hack
Make sure your capitalization matches, or your child theme
may not look like you expect it to!
Change the
elements to
match your
parent theme.
Put your CSS
code here.
MarketedByMichelle.com
36. Additional Info that Didn’t Fit Anywhere
Else
Favorite Sites
http://builtwith.com/
http://www.getip.com/
http://whatwpthemeisthat.com/
http://codex.wordpress.org/
http://www.w3schools.com/
http://theoatmeal.com/static/design_hell.html
Use the forums: themes, plugins, WordPress – there’s a wealth
of knowledge from those
who have “been there, done
that!”
Tip/Hack
Use the Facebook Group forum for help on all kinds of WP
questions and “problems.”
MarketedByMichelle.com
37. Contact Me
I’m a “pay it forward” WordPresser who has been helped
along by others. If I can help you, I will!
Michelle Ames
Marketing Diva at Marketed by Michelle, LLC
585-749-5059
michelle@marketedbymichelle.com
Thank You!
I hope today was helpful and useful to you!
Let me know what other classes you might like to see this
year, and I will try to make them happen!
MarketedByMichelle.com