● 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
Content credit to: Agnes Bury @agnesbury
Saigon, July 12, 2014
Event: http://www.meetup.com/Saigon-WordPress/events/188401902/
2. About me and the company
Dat Hoang
● Community & Support
of OnTheGoSystems
● Marketing Online
OnTheGoSystems
● WPML
● Toolset plugins
● ICanLocalize
3. 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
6. 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
7. 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/
8. 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
10. Design
● typography
● colors
● good layouts
● attractive pictures
● consistency
● special effects
● responsiveness
picture comes from Extremis theme, source: http://themes.
themegoods2.com/extremis/
11. 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
13. 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
14. 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
15. Creating sites using an easy route approach
Steps
1. Learn WordPress
2. Find a theme
3. Customise it
4. Provide valuable content
5. Extend the functionality with plugins
17. 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
18. 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)
19. localhost - a website on your own PC
How to have a
localhost
● XAMPP
● Appserv
● MAMP PRO
For Mac
27. Premium themes
Popular theme stocks
● ThemeForest.net
● ThemeplateMonster.
com
● MojoThemes.com
● AppThemes.com
picture comes from http://themeforest.net/
28. 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 support
picture comes from the7 theme, source: http://themeforest.net/item/the7-responsive-multipurpose-wordpress-theme/5556590
29. Choosing a theme: tips and hints
● theme flexibility
saves your time
● check author
credibility
● watch the pictures
● watch the fonts
Multipurpose themes
free
● Responsive
● Attitude
premium
● Avada
● Enfold
● X - The Ultimate
WordPress Theme
30. A tip: fill in your site with example content
● use WP Example
Content (or similar)
plugin
31. 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
32. Nice pictures and fonts: so far so good...
source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554
33. Disable images and switch to default font
source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554
34. 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
36. 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
39. 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
40. Lightbox effect for galleries
How to create galleries
● use WordPress
native gallery
● add a plugin for
lightbox effect
Lightbox plugins
● Easy FancyBox
● Gallery Carousel
Without JetPack
picture comes from: http://wordpress.org/plugins/easy-fancybox/
41. 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/
42. 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/
43. Secure your site with iThemes Security
Example plugin features
● Renames "admin"
account
● Changes the URLs for
WordPress dashboard
● Changes wp-content
path
● Changes the WP
database table prefix
● Registers bad login
attempts
source: https://wordpress.org/plugins/better-wp-security/
44. 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
45. 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/
46. Extending WP functionality: a step further
What to use: some ideas
● different elements on the
sidebars for some posts
or pages
● custom post types and
taxonomies
● custom fields
Useful Free Plugins
● Custom sidebars
● Types