WordPress HTML, CSS & Child Themes

WordPress HTML, CSS & Child

Themeswith Michelle Ames

MarketedByMichelle.com

Deb: deb.mbymhost.comLogin: debPassword: flagday2015

Mary Ann: maryann.mbymhost.comLogin: maryannPassword: flagday2015

Walter: walter.mbymhost.comLogin: walterPassword: flagday2015

Steve: steve.mbymhost.comLogin: stevePassword: flagday2015

Your Sandboxes

Tip/HackChanging 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/HackDon’t want any media to link to the file? Put this in your functions.php file.

update_option('image_default_link_type','none');

Tip/HackUsing the “Visual” vs. “Text” views will allow you to access and edit different aspects of the page.

Tip/HackYou can “layer” your spam filters for added effect. I often install Antispam Bee and Bad Behavior on blogging sites to control spam.

Tip/HackA 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/HackNOTE: 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/HackLogged 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/HackNever 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/HackThe 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/HackWant 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

Plugins Installed Plugins

See all the plugins you have installed. See which need updating. Activate/deactivate/update/delete

Tip/HackWhen 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/HackBe 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/HackUsing 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)



Lists Numbered Lists

<OL><LI>First row<LI>Second row</OL>

Bulleted Lists <UL>

<LI>First row<LI>Second row</UL>



Horizontal Lines <HR> (full-width line)

<HR SIZE=6 WIDTH=50%> (half-width line)

Break Tags <Br> Forced line break

<P> Paragraph Break



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"><img src="http://kellybradley.mbymhost.com/wp-content/uploads/2015/05/connect_to_facebook.png" width="200px"></a>



Anchor Tags/Jump Tags (Ex: http://zarpfarms.com/baked-goods/)

<a href="#anchor">Link Text</a>

<a id="anchor"></a>


http://zarpfarms.com/baked-goods/

http://zarpfarms.com/baked-goods/

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/HackDownload 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/HackThe 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 settingsto see how you mightwant to edit them.

Copy/paste the edits into your CSS editoror 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/


https://wordpress.org/plugins/simple-custom-css/

https://wordpress.org/plugins/simple-custom-css/





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/HackVisit 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/HackComments 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/HackMake 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 thosewho have “been there, donethat!”

Tip/HackUse the Facebook Group forum for help on all kinds of WP questions and “problems.”


http://builtwith.com/

http://builtwith.com/

http://www.getip.com/

http://www.getip.com/

http://whatwpthemeisthat.com/

http://whatwpthemeisthat.com/

http://codex.wordpress.org/

http://codex.wordpress.org/

http://www.w3schools.com/

http://www.w3schools.com/

http://theoatmeal.com/static/design_hell.html

http://theoatmeal.com/static/design_hell.html

Contact Me

I’m a “pay it forward” WordPresser who has been helped along by others. If I can help you, I will!

Michelle AmesMarketing Diva at Marketed by Michelle, LLC

585-749-5059

[email protected]

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!


mailto:[email protected]

WordPress HTML, CSS & Child Themes

Internet

menu link

menu items tiphack

tiphack dont

appearance themes

menu dashboard

link hierarchy

theme wont

theme files