Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

16
Intro to Web Design WORKING WITH WORDPRESS

Transcript of Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Page 1: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Intro to Web DesignWORKING WITH WORDPRESS

Page 2: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Programming for the Web

Page 3: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Content Management System (CMS)Confusing Management System

Page 4: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Content Management System (CMS)

Page 5: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Ways to get WordPress

wordpress.org (Paid) wordpress.com (Free)

www.colin.com www.colin.wordpress.com

Any theme and custom CSS Only free themes and no custom CSS

Plugins No plugins

Usually unlimited 3gb maximum

Page 6: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Domain and Host

Domain = www.colin.com

Host =

Sub-domain = www.resume.colin.com

Page 7: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Getting a domain and host with Bluehost

www.bluehost.com

per month

**Includes both domain and hosting

Page 8: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Link for helpful walkthrough (click WordPress logo and it’s the top choice)

Page 9: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Administration Page

http://yourpage.com/wp-admin/

Page 10: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Terminology: Basics

Dashboard: managers interfaceTheme: consistent pre-made style (think PowerPoint theme)Post: Individual article/blog essay with consistent layout/structure

Categories: Grouping of postsTags: Way to search

Page: Same as post, but not categorized or tagged… one-offsTemplate: Layout/structure of an individual page

More on terminology here

Page 11: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Terminology: Post Types

• Text and image

• Embedded links• https://codex.wordpress.org/Embed_Shortcode

• Galleries

Page 12: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Terminology: Plugins and shortcodes

• Add more functionality to your website• Deactivate unnecessary ones (they slow your site down)• Jetpack and Mojomarket Get rid of these first

• [short_code_name property=“value”]• Example:

[huge_it_portfolio id=“2”]

Page 13: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Terminology: Widgets

• “Boxes” of content usually in the sidebar or footer

• AppearanceWidgets

Page 14: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

WordPress Terminology: Menu

• Navigation structure

• AppearanceMenus

Page 15: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Links to the resources in this demo

Spacious themehttp://demo.themegrill.com/spacious/video-tutorial/

Photo Gallery pluginhttps://wordpress.org/plugins/photo-gallery/

Theme foresthttp://themeforest.net/

Page 16: Intro to Web Design WORKING WITH WORDPRESS. Programming for the Web.

Image Sourceshttp://cdn.tripwiremagazine.com/wp-content/uploads/2011/06/image74.pnghttp://cnx.org/content/m43033/1.2/StructureOfaPage.pnghttp://blog.teamtreehouse.com/wp-content/uploads/2014/11/progressive-enhancement.pnghttp://smallbusinessshift.com/wp-content/uploads/2011/08/Wordpress-Edit-Post-Screen-550x341.pnghttp://www.vermontguardian.com/images/local/2006/Lightbulb.jpghttp://hmbailey.com/wp-content/uploads/2013/12/CMS-Collage2.jpghttp://wpdevshed.com/wp-content/uploads/2014/01/web-hosting-comparison.pnghttp://preview.ait-themes.com/impression/wp1/wp-content/uploads/slide_winter2.jpghttp://preview.ait-themes.com/impression/wp1/wp-content/uploads/slide_spring1.jpg