Top Banner
WITH A CUSTOM STARTER THEME STREAMLINING WORDPRESS THEME DEVELOPMENT
21

STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

Jun 28, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

WITH A CUSTOM STARTER THEMESTREAMLINING WORDPRESS THEME DEVELOPMENT

Page 2: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

WHO IS THIS GUY?

LET’S FIND OUT!

▸ RI native, relocated to Wilmington in 2015

▸ Front-end developer, WordPress theme developer

▸ Using WordPress since around 2006, customizing since 2007 (version 2.2)

▸ Started using & building custom starter themes around 2009

Page 3: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

THE BASICSWHAT IS A WORDPRESS THEME?

Page 4: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

A WORDPRESS THEME IS THE “SKIN” TO YOUR WEBSITE

▸ Creates a unique look for your WordPress site. This includes all custom CSS (colors, fonts, font sizes) & template files (frontpage.php, home.php, single.php).

▸ Contains all custom site functionality (JS, functions.php).

▸ Themes are easily & readily accessible: https://wordpress.org/themes/

▸ These themes provide a pre-defined site style or “skin”, but are ready to go.

Page 5: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

THE SPECIFICSWHAT IS A CUSTOM WORDPRESS THEME?

Page 6: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

A CUSTOM THEME IS SPECIFIC TO YOUR PROJECT

▸ Most of the time, existing themes don’t have or do all of what you’ll need.

▸ You designed (or were given a design), now make it work!

▸ The CSS and functionality is going to be specific to your project’s needs.

▸ It can include whatever you want! Images, JS libraries, icon fonts, responsive frameworks… the possibilities are endless.

▸ Whatever you need to create a functioning WordPress site out of your design/vision.

Page 7: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

PROBABLY, BUT…CAN I USE A CUSTOM THEME ON MY SITE?

Page 8: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

BE AWARE OF YOUR SITE SETUP AND HOSTING!

▸ Know the difference between WordPress.com and WordPress.org.

▸ WordPress.com is a great all-in-one hosting & facilitation option, but customizations are very limited (https://wordpress.com/pricing/).

▸ Great solution for the limited tech-savvy crowd.

▸ WordPress.org - download WordPress core files to install on your hosting server. Your host may already have one-click simple installation options as well.

▸ Some advanced knowledge required.

Page 9: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

PROBABLY, BUT…

I FOUND A THEME/FRAMEWORK THAT DOES A TON OF COOL THINGS. CAN I USE IT FOR MY PROJECT?

Page 10: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

BE AWARE OF WHAT CUSTOMIZATIONS YOU’LL NEED TO MAKE!

▸ Sometimes you won’t need to customize, it’ll just work out!

▸ Sometimes starting with or customizing a pre-built theme/framework will be too labor intensive.

▸ Most will be easily editable for colors, simple styling and layout.

▸ If you do need to customize further, it could get hairy.

▸ Be careful of what you edit, if anything.

▸ See if the theme author offers support.

Page 11: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

CLEARING IT ALL UPWHAT EXACTLY IS A STARTER THEME?

Page 12: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

A CUSTOM THEME JUMP START

▸ Starter themes are stripped way down for easy customization.

▸ Functional WordPress theme without any heavily customized CSS or functionality.

▸ Easy to customize and add on to.

▸ Very basic functions.php, little to no custom JS.

▸ Include helpful functionality that can be built from (registered menu, sidebar, thumbnail resizing, etc).

▸ Can be used for any custom project development kick-off.

▸ Can be added to/subtracted from as your needs change from project to project.

Page 13: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

HELPFUL STARTER THEME REFERENCES

THESE ARE SOME OF THE GOOD ONES

▸ Underscores: https://github.com/Automattic/_s

▸ Bones:https://github.com/eddiemachado/bones

▸ _tk:https://github.com/Themekraft/_tk

▸ FoundationPress: https://github.com/olefredrik/FoundationPress

▸ JointsWP: https://github.com/JeremyEnglert/JointsWP

Page 14: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

MAKING LIFE EASIERWHY SHOULD I USE A CUSTOM STARTER THEME?

Page 15: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

STARTER THEMES PROVIDE MULTIPLE BENEFITS FOR CUSTOM DEVELOPMENT

▸ Easier to customize to your needs.

▸ More accurate time/cost estimates.

▸ Familiarity with starting codebase.

▸ Same codebase across a team.

▸ Documentation.

Page 16: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

THE SPECIFICSHOW CAN I CREATE A CUSTOM STARTER THEME?

Page 17: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

DON’T FEEL LIKE YOU NEED TO REINVENT THE WHEEL

▸ Use an existing starter theme.

▸ Experiment with adding and removing built-in features and CSS.

▸ Plan to distribute? Change it enough to really make it yours.

▸ Make sure to give credit to original authors.

Page 18: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

CREATE YOUR OWN, BUT KNOW THE REQUIREMENTS▸ Theme stylesheet: style.css

▸ Main template page: index.php

▸ Add additional theme files and increase degree of customization: front-page.php, home.php, page.php, single.php, etc.

▸ Learn the WordPress template hierarchy:https://developer.wordpress.org/files/2014/10/template-hierarchy.png

Page 19: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

WORDPRESS TEMPLATE HIERARCHY

Page 20: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

SOME IDEAS FOR YOUR CUSTOM STARTER

▸ Integrate a responsive framework (Bootstrap, Foundation).

▸ Integrate the use of a task manager (Grunt, Gulp).

▸ Integrate helpful plugins with supporting files for your customizations (Gravity Forms, Advanced Custom Fields, Custom Post Type UI).

▸ Think about e-commerce: add in base supporting files for a custom WooCommerce layout.

Page 21: STREAMLINING WORDPRESS THEME DEVELOPMENT WITH A … › files › 2016 › 10 › jn... · 2016-11-08 · Starter themes are stripped way down for easy customization. Functional WordPress

ADDITIONAL HELPFUL RESOURCES

▸ Interactive WordPress template hierarchy:https://wphierarchy.com/

▸ WordPress plugin: Theme Checkhttps://wordpress.org/plugins/theme-check/

▸ Same requirements as theme submission reviews.

▸ Support latest WordPress theme standards and practices.