WordPress Customization for Higher Educational Institution’s Websites

3,512
-1

Published on

Materi mengenai kustomisasi WordPress untuk website institusi pendidikan. Dibawakan oleh tim DMD BINUS (Fikri Rasyid & Deni Tri Hartanto) untuk WordCamp Indonesia 2013, Yogyakarta, 18 Oktober 2013.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,512
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WordPress Customization for Higher Educational Institution’s Websites

  1. 1. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT BINUS UNIVERSITY OCT 2013 Friday, October 18, 13
  2. 2. Fikri Rasyid @fikrirasyid http://fikrirasyid.com frasyid@binus.edu Deni Tri facebook.com/2denitri dhartanto@binus.edu WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  3. 3. Institution WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  4. 4. Higher Educational Institution WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  5. 5. Management Process in Higher educational institution registrant student alumni INPUT process OUTPUT management admission Registration Study Exam ALUMNI & binusian career SERVICES Community Industry WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  6. 6. Registrant Student Alumni INPUT Process OUTPUT Management Admission Registration Study Exam ALUMNI & BINUSIan Career SERVICES Community Industry WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  7. 7. ACADEMIC PROCESS + WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  8. 8. ACADEMIC PROCESS + BINUS University Site binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  9. 9. ACADEMIC PROCESS + Departments & Divisions’ Site sbm.binus.ac.id websimprug.binus-school.net binus.edu binus.tv dmd.binus.ac.id and 40+ more WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  10. 10. ACADEMIC PROCESS + BINUS TRACKING dmd.binus.ac.id/tracking WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  11. 11. ACADEMIC PROCESS + BINUS TICKET dmd.binus.ac.id/tICKET WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  12. 12. ACADEMIC PROCESS + ACHIEVEMENTS Achievement.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  13. 13. ACADEMIC PROCESS + BINUS MICROSITE socs.binus.ac.id/beefest-mobile-2013/ msi.binus.ac.id/commit/ binus.edu/iea/ binus.edu/porsekary/ english.binus.ac.id/national-englishcompetition/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  14. 14. ACADEMIC PROCESS + BINUS CALENDAR event.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  15. 15. Today’s FOcus: Event WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  16. 16. Today’s FOcus: Event WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  17. 17. Let’s Talk & BINUS MICROSITE BINUS CALENDAR WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  18. 18. The Concept & BINUS MICROSITE BINUS CALENDAR WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  19. 19. BINUS Microsite WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  20. 20. Rationale • Continuous need for organizing an event • Demand for an event website become inevitable • Every Division / Department website is already a child site of binus.ac.id • Whereas it takes 1 more depth for the event website WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  21. 21. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  22. 22. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  23. 23. THE PLAN msi.binus.ac.id msi.binus.ac.id/commit/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  24. 24. The Plan Display information, registration, schedule & Venue, paper submission, gallery WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  25. 25. The Plan Display information, registration, schedule & Venue, paper submission, gallery WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  26. 26. The Plan Display information, registration, schedule & Venue, paper submission, gallery WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  27. 27. The Plan Display information, registration, schedule & Venue, paper submission, gallery WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  28. 28. The Plan Display information, registration, schedule & Venue, paper submission, gallery WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  29. 29. BINUS Calendar WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  30. 30. Rationale • Most sub-sites have an “event” section • According to BINUS’ Marketing Communication Division, there are at least 9 events reported monthly across BINUS • If we really think about it, an academic institutions must have this “academic plan” WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  31. 31. Let’s make a calendar, then WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  32. 32. THE PLAN Other site A binus.ac.id CENTRAL event.binus.ac.id Other site B scdc.binus.ac.id Other site C and many moore WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  33. 33. THE (REVISED) PLAN Other site A binus.ac.id CENTRAL event.binus.ac.id Other site B scdc.binus.ac.id Other site C and many moore WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  34. 34. CENTRAL event.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  35. 35. CENTRAL event.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  36. 36. The “CLIENTS” everywhere binus.ac.id BINUS.edu scdc.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  37. 37. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  38. 38. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  39. 39. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  40. 40. The Tricks & BINUS MICROSITE BINUS CALENDAR WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  41. 41. BINUS Microsite WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  42. 42. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  43. 43. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  44. 44. THE PLAN msi.binus.ac.id msi.binus.ac.id/commit/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  45. 45. Simple Solution • Provide a new installation of Wordpress multisite for every department that wanna hold an event • Create a subsite and theme for each and every event WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  46. 46. Disaster • it's impossible to handle the rapidly request for event from every department • Must maintain dozens of WordPress installation WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  47. 47. Better Solution • Create a system that capable of building a microsite inside a wordpress website, even though it's a subsite WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  48. 48. Here’s How it looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  49. 49. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  50. 50. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  51. 51. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  52. 52. Here’s How It Works WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  53. 53. Store it WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  54. 54. Rewrite, Flush, & Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  55. 55. Rewrite, Flush, & Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  56. 56. Microsite Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  57. 57. msi.binus.ac.id/commit/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  58. 58. THE API • Rewrite_API (http://codex.wordpress.org/Rewrite_API/add_rewrite_rule) • Administration Menu Functions (http://codex.wordpress.org/Administration_Menus) • Options API http://codex.wordpress.org/Options_API WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  59. 59. Lesson Learned • Microsite hooks & filters are for itself only • Disable conflicted hooks & filters i.e.: wp_ enqueue_style / wp_enqueue_script • Convert every link of wordpress object in navigation menu / post into microsite pattern link. www.abc.com/2012/12/{page-slug} is converted into www.abc.com/{microsite_name}/article/{pageslug} WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  60. 60. Microsite hooks & filters Are For Itself only 1. Detect the environment 2. Hook into template_redirect to add microsite’s functions WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  61. 61. Disable conflicted hooks & filters 1. Create a function for cleaning intended hooks 2. Get list of every hooks/ filters that we want to disable, (the list is set by administrator) 3. Loop the listed hooks and call remove_filter for every hooks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  62. 62. Convert every on-site link into microsite pattern link. 1. Get the URL string from href attribute and the inner HTML of “a” element on the post body / navigation menu 2. pass the string on to function “microsite_article_convert er” that responsible to convert it into our microsite pattern WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  63. 63. Convert every on-site link into microsite pattern link. 1. Get the URL string from href attribute and the inner HTML of “a” element on the post body / navigation menu 2. pass the string on to function “microsite_article_convert er” that responsible to convert it into our microsite pattern WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  64. 64. Let’s extend the microsite Assuming the environment is clean, we can put our creativities here: 1.Implant any microsite feature as much as you wish 2.Add new redirection filter 3.Put every hook / filter based on your needs WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  65. 65. BINUS Calendar WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  66. 66. THE PLAN event.binus.ac.id scdc.binus.ac.id/event/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  67. 67. THe Plan • Create a centralized event site http://event.binus.ac.id • Every site should have an event page http://division_name.binus.ac.id/event/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  68. 68. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  69. 69. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  70. 70. Lesson Learned • Quite tricky queries, especially for the monthly view • WordPress’ default XML-RPC Component can not be used for our queries • Extend the XML-RPC Components so the sub-site can fetch and display similar result, only filtered to their own program taxonomy WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  71. 71. Thou Shall Extend WordPress’ XML-RPC Components 1. Filter xmlrpc_methods 2. Add new XML-RPC component to it WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  72. 72. WordPress Customization for Higher Educational Institution’s Websites Friday, October 18, 13 WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY

×