How to build WordPress sites efficiently with existing themes and plugins

How to build WordPress sites efficiently with existing themes and plugins

About me and the companyDat Hoang

● Community & Support of OnTheGoSystems

● Marketing Online

OnTheGoSystems

● WPML● Toolset plugins● ICanLocalize

Agenda

● What makes a good website● Do I need to be a graphic designer?● Do I need to be a programmer?● How to build nice sites with existing themes

○ where to search themes○ tips and hints for choosing themes○ tips for non-programmers for theme customisation

● How to extend site functionality with plugins○ most wanted plugins○ tips and hints for searching plugins

What makes a good website?

What makes a good website

Content

Good content features● unique● clear message● meeting your

visitors expectations

How to provide good content● learn how to write

for web● choose a theme

which helps you to achieve your goals

Write for web, make your content scannable

Some good practices:● keep your

paragraphs short● use intertitles● use bullet-point lists● use deep captions● use pictures

source: http://www.copyblogger.com/scannable-content/

Expose your content with theme features

● calls to action● pricing tables● testimonials● services● progress bars

pictures come from Lounge theme, source: http://themeforest.net/item/lounge-clean-elegant-wordpress-theme/full_screen_preview/4616086

What makes your site look attractive

Design

● typography● colors● good layouts● attractive pictures● consistency● special effects● responsiveness

picture comes from Extremis theme, source: http://themes.themegoods2.com/extremis/

How to design a good website?

A challenging path● become a graphic

designer (to design)● become a

CSS/HTML/js programmer (to implement)

An easy path● find a good theme● learn how to

customise it

What makes your site functional

What makes your site functional

From a visitor point of view● easy navigation● search● galleries● contact forms● newsletters● social media

integration

● From a site owner point of view

● easy content maintenance

● security● backups● performance● SEO

How to provide a functional website

A challenging path● become a web

programmer

An easy path● find appropriate

plugins● learn how to use

them effectively

Creating sites using an easy route approach

Steps1. Learn WordPress2. Find a theme3. Customise it4. Provide valuable content5. Extend the functionality with plugins

All resources are within your reach

source: http://naswp.cz

How to learn WordPress: possibilities

“Tell me and I forget, teach me and I may remember, involve me and I learn”

Benjamin Franklin

1. Start for free with WordPress.com

2. Find (free) hosting a. with WordPress

installed automatically

b. install WordPress yourself

3. Install WP on your localhost

wordpress.com: good for the start

Advantages● free● backups done

automatically ● no software

maintenance● always live, always

fast● jetpack: a kit full of

useful features

Limitations● limited themes● no outside plugins ● ads placed on your

site● no FTP access to

files (no custom php coding)

localhost - a website on your own PC

How to have a localhost● XAMPP● Appserv● MAMP PRO

For Mac

Making your site attractive with themes

Searching for themes

1. Free themes in WordPress.org repository

2. Free commercial themes

3. Premium themes

Searching WordPress theme repository

Use filters

Commercial yet free: a good compromise

Source: http://gavickpro.com/

Commercial yet free: a good compromise

source: http://www.woothemes.com/

Commercial yet free: DesignWall (VN)

source: http://www.woothemes.com/

Premium themes

Popular theme stocks● ThemeForest.net● ThemeplateMonster.

com● MojoThemes.com● AppThemes.com

picture comes from http://themeforest.net/

Premium themes: what to expect

● very good design● easy to customise● rich sliders● fully responsive● demos and sample

data (xml)● rich documentation

including videos● wooCommerce and

WPML supportpicture comes from the7 theme, source: http://themeforest.net/item/the7-responsive-multipurpose-wordpress-theme/5556590

Choosing a theme: tips and hints

● theme flexibility saves your time

● check author credibility

● watch the pictures● watch the fonts

Multipurpose themesfree● Responsive● Attitudepremium● Avada● Enfold● X - The Ultimate

WordPress Theme

A tip: fill in your site with example content

● use WP Example Content (or similar) plugin

What elements need checking?

● Headings: h1, h2, h3… tags ● Bullets● Page/post designs, ● Widget● Fonts (change it easily or not, the fonts

support UTF-8 or not)● Responsive - MOST IMPORTANT IN MULTI-

SCREEN AREA

Nice pictures and fonts: so far so good...

source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554

Disable images and switch to default font

source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554

Customising your theme: a step further● useful plugins

○ Google fonts○ custom CSS○ drag & drop

functionality (Layouts plugin)

● learn CSS and inspecting tools

● learn how to create a child theme

Making your site functional with plugins

Most wanted

Most wanted functionality for business websites:● under construction● contact forms● nice effects for galleries● social media integration● newsletters● security and backups● SEO and statistics● speeding up

Most popular WordPress plugins

source: http://plugintable.com/

Under construction

source: https://wordpress.org/plugins/ultimate-coming-soon-page/

Contact form 7

● easy to install and configure

● lots of options● non-official WP

standard for contact forms (themes are compatible with)

picture comes from http://makiety.olkusz.pl/ site, based on Roya theme

Lightbox effect for galleries

How to create galleries ● use WordPress

native gallery● add a plugin for

lightbox effectLightbox plugins● Easy FancyBox● Gallery Carousel

Without JetPackpicture comes from: http://wordpress.org/plugins/easy-fancybox/

Newsletters and new posts notifications

MailPoet plugin● easy to configure● drag and drop

newsletter editor● sends your latest

posts automatically● Gmail, iPhone,

Android, Outlook, Hotmail support

source: https://wordpress.org/plugins/wysija-newsletters/

Schedule automatic backups with plugins

BackWPup● decide what to

backup● decide where to

store your backups● backups scheduled

or made on demand

source: https://wordpress.org/plugins/backwpup/

Secure your site with iThemes SecurityExample plugin features● Renames "admin"

account● Changes the URLs for

WordPress dashboard ● Changes wp-content

path● Changes the WP

database table prefix● Registers bad login

attemptssource: https://wordpress.org/plugins/better-wp-security/

SEO plugins: rank high in SERP

The things to consider:+ sitemap+ rel=canonical+ social tags+ customized title and description

Recommendation plugins: + WordPress SEO+ All in One SEO Pack

Searching for a good plugin: tips & hints

● ratings● reviews● number of

downloads● support● if plugin author

builds a business around a plugin, it’s a good sign

pictures come from https://wordpress.org/plugins/events-manager/

Extending WP functionality: a step furtherWhat to use: some ideas ● different elements on the

sidebars for some posts or pages

● custom post types and taxonomies

● custom fieldsUseful Free Plugins● Custom sidebars● Types

DiscussionQ & A

Big Thanks!Dat HoangCommunity & Support Vietnam E: [email protected]: wpml.org | wp-types.com | icanlocalize.com

Saigon, July 12, 2014