intro to wordpress theming

2023-04-18 1

Intro to WordPress Theming

Andy McIlwain (www.andymci.com)Techalicious + Toronto WordPress Group

Crafting Custom CSS | @andymci | #PCTO15

2023-04-18 2

Hi! I’m Andy McIlwain.

Developer at:BrainriderMarketers Without BordersEvents&

Instructor/Mentor at:Camp TechLadies Learning Code

Organizer with:Toronto WordPress MeetupsWordCamp Toronto

Find me online:@andymci on Twitterlinkedin.com/in/andymciinstagram.com/andy.mcilwain


http://www.brainrider.com/

http://www.themwb.org/

http://www.eventsand.com/

http://www.camptech.ca/

http://www.ladieslearningcode.com/

http://meetup.com/wptoronto

http://meetup.com/wptoronto

http://2014.toronto.wordcamp.org/

http://2014.toronto.wordcamp.org/

http://twitter.com/andymci



http://linkedin.com/in/andymci


http://instagram.com/andy.mcilwain

http://instagram.com/andy.mcilwain

WordPress Theming | @andymci | #WPTO 3

Prerequisites.Let’s get some fundamentals out of the way first.

April 4, 2015

2023-04-18 Crafting Custom CSS | @andymci | #PCTO15 4

How do websites work?

1. User asks for site.You punch a URL into your browser’s address bar.

3. Code sent to the browser.The server does its thing and sends the website code back to the user’s browser.

2. Computer looks for the site.It connects to the server through the magic of the internet.

4. Browser displays the site.User’s browser puts the returned code (HTML, CSS, and JavaScript) together to display the website.


Here’s a visualization…

User ServerBrowser

Enters Website URL Connects to Server

Returns Website CodeDisplays Website


So what’s loading in the browser, anyway?

Let’s take a closer look…

April 4, 2015

2023-04-18 7

The Structure of a Website

Server: Generates site code.HTML: The webpage structure and content.CSS: Rules that control the “look and feel” of the webpage.JavaScript: Adds interaction, effects, and additional functionality.

Server

HTMLCSS JavaScript


It’s like building a house!

Server

HTMLCSS JavaScript

Foundation

Framing, Flooring, Drywall

Fixtures, Carpeting, Paint

Electrical, Plumbing, HVAC


We choose what to build on.

Server

HTMLCSS JavaScript

Foundation





Then we set up the structure.

Server

HTMLCSS JavaScript

Foundation





Set up controls and interaction.

Server

HTMLCSS JavaScript

Foundation





Then we make everything pretty.

Server

HTMLCSS JavaScript

Foundation





What about WordPress?

April 4, 2015


How does WordPress work?

1. Server-side software.You install WordPress on the server where the site will live.

3. Method to manage content.WordPress back-end (wp-admin) is where we can safely manage content in the database.

2. Generates webpages.WordPress pulls content from a database, adds HTML/CSS/JS.

4. Extend with themes, plugins.Themes control look, feel, and functionality. Plugins control functionality.

2023-04-18 15

WordPress on your Server

Database: Where content and site options are stored.WordPress: Core software, connects to the database.Theme: Controls the appearance of your website. Only one theme can be active at a time.Plugins: Adds additional functionality to your site. Database

WordPressTheme Plugins



Here’s a visualization…

User ServerBrowser

Enters Website URL Connects to Server

Returns Site CodeDisplays Website Runs WordPress


How do we install WordPress?

One-Click Install.The fastest method. Available on most shared hosting providers.

Managed hosts.Managed WordPress hosts, like WP Engine or Flywheel, have WordPress pre-installed.

Manual installation.Technical, best suited for more advanced users. (Creating DB, uploading WordPress files via FTP, editing wp-config.php.)


WordPress Lingo 101

PostsCan be categorized and tagged. Associated with a date, time, and author. Suitable for articles, news posts, blogs.

Categories & Tags (Taxonomies)Categories have a hierarchy. Tags do not.

PagesCan have a hierarchy. Can be assigned templates (if supported by a theme). Suitable for content that changes infrequently.

Page TemplatesUnique to a theme. Designates different page layouts or functionality.


More Lingo!

PermalinksUnique URL for every piece of content on your site (posts, pages, archives, etc…)

ThemesHandle the appearance of the site, plus some functionality.

PluginsExtend the functionality of a site. Can be simple (contact forms) or complex (e-commerce).

The CodexThe go-to resource. Find it @codex.wordpress.org

http://codex.wordpress.org/


Let’s Talk ThemesThe best things in life are (often) free.

April 4, 2015


wordpress.org/themes/

• Browse and search for themes that meet specific criteria.• Read reviews, see what people

are saying about the themes.• Check for a direct “Theme

Homepage” link. Theme author sites usually have better previews, documentation.


What makes for a good theme?

Clean LayoutEasier to add your own flare with images and custom CSS.

Available Reviews, ExamplesSee how the theme is being used “in the wild”. Look for feedback from existing users.

Well DocumentedIncludes inline documentation (comments in code).


My favourite theme: Make

• Drag-and-drop builder for quickly building complex page layouts without code.• Can target unique IDs and

classes to add custom CSS.• Opportunities for advanced

development with hooks and filters.• Pro version offers even more! https://wordpress.org/themes/make/


Customizing Themes with CSS

Dipping our toes into the waters of theme development.

April 4, 2015


Remember this stack?

Server

HTMLCSS JavaScript Controlled by the theme.

Database

WordPress

Theme Plugins


Let’s drill into the CSS.

Server

HTMLCSS JavaScript


CSS

CSS stands for Cascading Style Sheets. They control the “look and feel” of web pages. If we were building a house, CSS would be in charge of laying the carpet and painting the walls.

Key points to remember:• CSS sets appearance rules for HTML• Targets elements, classes, and IDs• Rules wrapped in “curly brackets”

{ like this }

body {background: white;font-family: Arial, sans-serif;

}

#head {background: black;color: white;

}

#content p {font-size: 14px;margin: 10px 0;

}


How HTML & CSS Work Together

When your browser loads a page, it looks at the elements on the page and checks if there are CSS rules for those elements. Key points:

• HTML uses id and class• CSS uses # and .• When we see id, we target with #• When we see class, we target with .

HTML CSS<div id=“header”></div>

#header {}

<div class=“post”></div>

.post {}


Connecting HTML & CSSHTML CSS

<body>

<div id=“header”></div>

<div id=“content”>

<div class=“post”></div>

</div>

<div id=“footer”></div>

</body>

body {}

#header {}

#content {}

.post {}

#footer {}


Getting More SpecificHTML CSS<div class=“post”>

<h2>Post Title</h2><p>Paragraph of content.</p>

</div>

.post {}

<div class=“post”><h2>Post Title</h2><p>Paragraph of content.</p>

</div>

.post h2 {}

<div class=“post”><h2>Post Title</h2><p>Paragraph of content.</p>

</div>

.post p {}


What Rules Can We Use?Some Example Rules What It Doesbackground-image: url(…) Defines background image.

float: left; Positioning relative to subsequent elements.

background-color: #fff; Defines background color.

font-family: Arial, sans-serif; Defines the font to use.

font-size: 24px; Defines the size of the font.

font-weight: bold; Defines the weight of the font.

color: red; Defines the colour of the font.

width: 400px; Defines the width of the targeted element.

height: 400px; Defines the height of the targeted element.

Find more rules at tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/css_reference/






Inspecting Other’s Work

• Your browser comes equipped with Developer Tools• You can inspect page

code• You can play with code

that only affects your browser

Here’s how you do it in Firefox, Chrome, Internet Explorer, and Safari.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

https://developer.chrome.com/devtools

https://msdn.microsoft.com/library/ie/bg182326(v=vs.85)

https://developer.apple.com/safari/tools/


How can we apply custom CSS?

PluginsJetpack’s Custom CSS moduleSimple Custom CSS

Theme OptionsSome themes include support for applying custom CSS.

http://jetpack.me/support/custom-css/

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


Baby Steps to Theme Building:1. Inspect your theme.2. Find IDs and classes.3. Apply custom CSS.


Starter Themesvs. Theme Frameworks

(Kicking customization up a notch.)

April 4, 2015


What’s the difference?

Starter Themes• Download the code and modify

it to create a new theme from scratch.• Future updates to the starter

theme will not affect older themes you created with the starter theme.

Theme Frameworks• A parent theme that you do not

edit directly. Your theme will be a child of the framework theme.• Future updates to the

framework (parent theme) are inherited by your theme (the child theme).


e.g. Underscores vs. Genesis

http://underscores.me/ http://my.studiopress.com/themes/genesis/

Starter ThemeFramework


What’s a child theme?

Child themes build on top of other themes. They inherit and override code from the parent theme.

From the Codex:• If you modify a theme directly and it is

updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

• Using a child theme can speed up development time.

• Using a child theme is a great way to to learn about WordPress theme development.

FYI: Genesis themes are all child themes of the Genesis theme

framework.


Next Steps to Theme Building:- Choose starter theme or framework. - Modify starter theme, or- Create framework child theme.


Building Your Own Theme From Scratch

(It’s not as hard as it sounds!)

April 4, 2015

2023-04-18 41

Wireframing: Paper to Pixels

1. Block it out.Start with a simple layout of blocks.

3. Add details & variations.Once you’ve locked in on an approach, start modifying for different purposes.

2. Give each block a job.Header, footer, sidebar, post. Start simple, gradually build up.

4. Make it digital.Use an app to share, collect feedback, make modifications.


For example…We start by blocking it out.


Then we give each block a job.The basics: Header, Content, Footer.

Header

Footer

Content


Then we modify.Here’s a home page.

Logo

Footer

Welcome Message Intro Video

Upcoming Events

Navigation


Then we modify.Here’s a list of events.

Logo

Footer

Event

Navigation

Event

Event

Promos


Then we modify.Here’s a single event.

Logo

Footer

Event

Navigation

Promos


Note the blocks that don’t change.

Logo

Footer

Event

Navigation

Promos

Logo

Footer

Event

Navigation

Event

Event

Promos

Logo

Footer

Welcome Message Intro Video

Upcoming Events

Navigation

We’ll be coming back to these in a bit…!

2023-04-18 48

Create an HTML & CSS Mockup

Turn layouts into HTML files.You can do all of this on your computer, no PHP required.

Style everything in style.cssThis is your chance to nail as much of the design as you can.

Add placeholders.Use placeholders for images, text, and additional markup.

Link files together.You can create a semblance of “user flow” linking from HTML file to HTML file. (e.g. homepage to post, homepage to page).

https://placekitten.com/

http://www.lipsum.com/

http://html-ipsum.com/

2023-04-18 49

Need a primer on good design?

http://learndesignprinciples.com http://goodui.org

Oldie but a goodie: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

http://learndesignprinciples.com/

http://learndesignprinciples.com/

http://goodui.org/

http://goodui.org/

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/



2023-04-18 50

Get the following:

FTP app to move files.I recommend Filezilla.

App for editing images.Photoshop CC or GIMP (free).

Editor app to work with code.I recommend Sublime Text.

A running WordPress site.What good is a theme if you don’t have a site to test it on?

2023-04-18 51

How do we begin theming?

Start with the basics.Minimum requirements: index.php and style.css

Add template tags to index.phpIn WordPress, template tags are just PHP functions. Here’s a full listing of template tags.

Add theme info to style.cssThis header information is checked for theme details.

Install in WordPress!Put your theme files in a folder under /wp-content/themes/.

https://codex.wordpress.org/Template_Tags



Tags You Should Know

<?php wp_head(); ?> / <?php wp_footer(); ?>Sets “hooks” for WordPress core, plugins, and themes to inject additional code into the header or footer of the site.(Here’s some more info about hooks and filters in WordPress.)

<?php bloginfo(‘###’); ?>

Retrieves all sorts of information about your site. Linke.g. Site title, theme directory, admin email.

http://code.tutsplus.com/articles/the-beginners-guide-to-wordpress-actions-and-filters--wp-27373

https://codex.wordpress.org/Function_Reference/bloginfo

2023-04-18 53

The WordPress Loop

“Loops” through the database, finds content, displays it according to the tags you’ve defined in the loop.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

// Post Content Here //

<?php endwhile; else : ?>

<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

<?php endif; ?>

2023-04-18 54

Let’s build a theme!- Wireframes are our guide.- We’ll build a prototype in HTML.- Then transform it into a theme.

(Cue live demo alt-tab!)


Next StepsWhere do we go from here…?

April 4, 2015

2023-04-18 56

Ideas for next steps:

Build your first theme.Create a theme and submit it to the WordPress Theme Directory.

Contribute to a theme.The beauty of open source is that you can make improvements to things other people have built.

Build a simple site for a friend.This is how many people get started w/ professional work.

Review others’ work.Crack open what others have built and learn from their work.


Theme Development Resources

ThemeShaper TutorialTheme Development (Codex)WordPress Template TagsWordPress Code ReferenceWordPress Coding StandardsWordPress Theme Review GuideWordPress Answers

VIP Best PracticesDeveloper PluginGenerateWPWP GearSkeleton BoilerplateXAMPPBalsamiq

http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

https://codex.wordpress.org/Theme_Development



https://developer.wordpress.org/reference/

https://make.wordpress.org/core/handbook/coding-standards/php/

https://codex.wordpress.org/Theme_Review

http://wordpress.stackexchange.com/

https://vip.wordpress.com/documentation/best-practices/

https://wordpress.org/plugins/developer/

http://generatewp.com/

http://wpgear.org/

http://getskeleton.com/

https://www.apachefriends.org/index.html

https://balsamiq.com/


Useful CSS Tools & Resources

CSS ReferenceMDN CSS ReferenceCoDrops CSS Reference

InspirationCSS TricksCSS Zen GardenCSS Mania

CoursesCodecademy CSS CourseCodeSchool CSSTreehouse CSS Basics

Useful ToolsCodePenSkeleton

https://developer.mozilla.org/en-US/docs/Web/CSS



http://css-tricks.com/

http://www.csszengarden.com/

http://www.cssmania.com/

http://www.codecademy.com/courses/css-coding-with-style/0/1



https://www.codeschool.com/courses/css-cross-country

https://www.codeschool.com/courses/css-cross-country

http://teamtreehouse.com/library/css-basics

http://codepen.io/

http://getskeleton.com/


Thank You! Questions?Slides will be posted online:

www.slideshare.net/andymci

Find me online:www.andymci.com | @andymci | linkedin.com/in/andymci

http://www.slideshare.net/andymci

http://www.andymci.com/





intro to wordpress theming

Technology