Successfully reported this slideshow.
How to build
WordPress sites
efficiently
with existing themes and plugins
About me and the company
Dat Hoang
● Community & Support
of OnTheGoSystems
● Marketing Online
OnTheGoSystems
● WPML
● Tool...
Agenda
● What makes a good website
● Do I need to be a graphic designer?
● Do I need to be a programmer?
● How to build ni...
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
● ...
Write for web, make your content scannable
Some good practices:
● keep your
paragraphs short
● use intertitles
● use bulle...
Expose your content with theme features
● calls to action
● pricing tables
● testimonials
● services
● progress bars
pictu...
What makes your site
look attractive
Design
● typography
● colors
● good layouts
● attractive pictures
● consistency
● special effects
● responsiveness
picture...
How to design a good website?
A challenging path
● become a graphic
designer (to design)
● become a
CSS/HTML/js
programmer...
What makes your site
functional
What makes your site functional
From a visitor point of
view
● easy navigation
● search
● galleries
● contact forms
● news...
How to provide a functional website
A challenging path
● become a web
programmer
An easy path
● find appropriate
plugins
●...
Creating sites using an easy route approach
Steps
1. Learn WordPress
2. Find a theme
3. Customise it
4. Provide valuable c...
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...
wordpress.com: good for the start
Advantages
● free
● backups done
automatically
● no software
maintenance
● always live, ...
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 co...
Premium themes: what to expect
● very good design
● easy to customise
● rich sliders
● fully responsive
● demos and sample...
Choosing a theme: tips and hints
● theme flexibility
saves your time
● check author
credibility
● watch the pictures
● wat...
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 easil...
Nice pictures and fonts: so far so good...
source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/335...
Disable images and switch to default font
source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357...
Customising your theme: a step further
● useful plugins
○ Google fonts
○ custom CSS
○ drag & drop
functionality
(Layouts p...
Making your site
functional with
plugins
Most wanted
Most wanted functionality for business websites:
● under construction
● contact forms
● nice effects for galle...
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
...
Lightbox effect for galleries
How to create galleries
● use WordPress
native gallery
● add a plugin for
lightbox effect
Li...
Newsletters and new posts notifications
MailPoet plugin
● easy to configure
● drag and drop
newsletter editor
● sends your...
Schedule automatic backups with plugins
BackWPup
● decide what to
backup
● decide where to
store your backups
● backups sc...
Secure your site with iThemes Security
Example plugin features
● Renames "admin"
account
● Changes the URLs for
WordPress ...
SEO plugins: rank high in SERP
The things to consider:
+ sitemap
+ rel=canonical
+ social tags
+ customized title and desc...
Searching for a good plugin: tips & hints
● ratings
● reviews
● number of
downloads
● support
● if plugin author
builds a ...
Extending WP functionality: a step further
What to use: some ideas
● different elements on the
sidebars for some posts
or ...
Discussion
Q & A
Big Thanks!
Dat Hoang
Community & Support Vietnam
E: dat.h@icanlocalize.com
W: wpml.org | wp-types.com | icanlocalize.com
...
Upcoming SlideShare
Loading in …5
×

How to build WordPress sites efficiently with existing themes and plugins

1,908 views

Published on

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

Published in: Technology, Business

How to build WordPress sites efficiently with existing themes and plugins

  1. 1. How to build WordPress sites efficiently with existing themes and plugins
  2. 2. About me and the company Dat Hoang ● Community & Support of OnTheGoSystems ● Marketing Online OnTheGoSystems ● WPML ● Toolset plugins ● ICanLocalize
  3. 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. 4. What makes a good website?
  5. 5. What makes a good website
  6. 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. 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. 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. 9. What makes your site look attractive
  10. 10. Design ● typography ● colors ● good layouts ● attractive pictures ● consistency ● special effects ● responsiveness picture comes from Extremis theme, source: http://themes. themegoods2.com/extremis/
  11. 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. 12. What makes your site functional
  13. 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. 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. 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. 16. All resources are within your reach source: http://naswp.cz
  17. 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. 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. 19. localhost - a website on your own PC How to have a localhost ● XAMPP ● Appserv ● MAMP PRO For Mac
  20. 20. Making your site attractive with themes
  21. 21. Searching for themes 1. Free themes in WordPress.org repository 2. Free commercial themes 3. Premium themes
  22. 22. Searching WordPress theme repository
  23. 23. Use filters
  24. 24. Commercial yet free: a good compromise Source: http://gavickpro.com/
  25. 25. Commercial yet free: a good compromise source: http://www.woothemes.com/
  26. 26. Commercial yet free: DesignWall (VN) source: http://www.woothemes.com/
  27. 27. Premium themes Popular theme stocks ● ThemeForest.net ● ThemeplateMonster. com ● MojoThemes.com ● AppThemes.com picture comes from http://themeforest.net/
  28. 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. 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. 30. A tip: fill in your site with example content ● use WP Example Content (or similar) plugin
  31. 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. 32. Nice pictures and fonts: so far so good... source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554
  33. 33. Disable images and switch to default font source: http://themeforest.net/item/newsroom-responsive-news-magazine-theme/3357554
  34. 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. 35. Making your site functional with plugins
  36. 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. 37. Most popular WordPress plugins source: http://plugintable.com/
  38. 38. Under construction source: https://wordpress.org/plugins/ultimate-coming-soon-page/
  39. 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. 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. 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. 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. 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. 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. 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. 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. 47. Discussion Q & A
  48. 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

×