WordPress HTML, CSS & Child Themes

WordPress HTML, CSS
& Child Themes
with Michelle Ames
MarketedByMichelle.com

Deb: deb.mbymhost.com
Login: deb
Password: flagday2015
Mary Ann: maryann.mbymhost.com
Login: maryann
Walter: walter.mbymhost.com
Login: walter
Steve: steve.mbymhost.com
Login: steve
Your Sandboxes

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.

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!

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.

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.

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.

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!

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.”

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.

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.

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!

HTML
 Where to use HTML
 Text Editor on pages and posts
 Text widgets

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)

HTML
 Lists
 Numbered Lists
 <OL>
<LI>First row
<LI>Second row
</OL>
 Bulleted Lists
 <UL>
<LI>First row
<LI>Second row
</UL>

HTML
 Horizontal Lines
 <HR> (full-width line)
 <HR SIZE=6 WIDTH=50%> (half-width line)
 Break Tags
 <Br> Forced line break
 <P> Paragraph Break

HTML
 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>

HTML
 Anchor Tags/Jump Tags
(Ex: http://zarpfarms.com/baked-goods/)
 <a href="#anchor">Link Text</a>
 <a id="anchor"></a>

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.

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.

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.

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/

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.

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 */.

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.

/*
Theme Name: Chameleon Child
Theme URI: http://www.elegantthemes.com/gallery/
Description: Chameleon Child Theme
Author: Michelle Ames
Author URI: http://marketedbymichelle.com
Template: Chameleon
Version: 3.7
Tags:
Text Domain: Chameleon-child
*/
@import url("../Chameleon/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
Sample Child Theme – no CSS editing

<br class="clear" />
<div id="footer">
<p>Copyright © <script language="JavaScript" type="text/javascript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2000)
document.write(" "+yr);
</script> McIver Acupuncture ||
<?php esc_html_e('Site Design by ','Marketed by Michelle'); ?> <a
href="http://www.marketedbymichelle.com" title="Marketed by Michelle"
target="_blank">Marketed by Michelle</a>
</div>
<?php wp_footer(); ?>
<?php get_template_part('includes/scripts'); ?>
</body>
</html>
New footer.php

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.”

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!

WordPress HTML, CSS & Child Themes

Recommended

More Related Content

What's hot (20)

Similar to WordPress HTML, CSS & Child Themes (20)

More from Michelle Ames (20)

Recently uploaded (19)

WordPress HTML, CSS & Child Themes