WordPress Customization for Higher Educational Institution’s Websites

  • 3,223 views
Uploaded 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.

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,223
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT BINUS UNIVERSITY OCT 2013 Friday, October 18, 13
  • 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. Institution WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 4. Higher Educational Institution WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. ACADEMIC PROCESS + WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. 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. 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. 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. 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. 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. Today’s FOcus: Event WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 16. Today’s FOcus: Event WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. The Concept & BINUS MICROSITE BINUS CALENDAR WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 19. BINUS Microsite WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. 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. 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. 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. 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. 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. BINUS Calendar WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. Let’s make a calendar, then WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. CENTRAL event.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 35. CENTRAL event.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 38. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 39. WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. BINUS Microsite WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. THE PLAN msi.binus.ac.id WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. 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. 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. Here’s How it looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 49. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 50. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 51. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 52. Here’s How It Works WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 53. Store it WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 54. Rewrite, Flush, & Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 55. Rewrite, Flush, & Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 56. Microsite Redirect WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 57. msi.binus.ac.id/commit/ WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. 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. 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. 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. 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. 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. BINUS Calendar WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 69. Here’s How It Looks WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY Friday, October 18, 13
  • 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. 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. 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