● 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/

1. How to build
WordPress sites
efficiently
with existing themes and plugins

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

4. What makes a good
website?

5. What makes a good website

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

9. What makes your site
look attractive

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

12. What makes your site
functional

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

16. All resources are within your reach
source: http://naswp.cz

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

20. Making your site
attractive with
themes

21. Searching for themes
1. Free themes in
WordPress.org
repository
2. Free commercial
themes
3. Premium themes

22. Searching WordPress theme repository

23. Use filters

24. Commercial yet free: a good compromise
Source: http://gavickpro.com/

25. Commercial yet free: a good compromise
source: http://www.woothemes.com/

26. Commercial yet free: DesignWall (VN)
source: http://www.woothemes.com/

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

35. Making your site
functional with
plugins

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

37. Most popular WordPress plugins
source: http://plugintable.com/

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

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

47. Discussion
Q & A

48. Big Thanks!
Dat Hoang
Community & Support Vietnam
E: dat.h@icanlocalize.com
W: wpml.org | wp-types.com | icanlocalize.com
Saigon, July 12, 2014