WordPress Customization for Higher Educational Institution’s Websites
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WordPress Customization for Higher Educational Institution’s Websites

on

  • 3,280 views

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.

Statistics

Views

Total Views
3,280
Views on SlideShare
2,370
Embed Views
910

Actions

Likes
1
Downloads
5
Comments
0

6 Embeds 910

http://fikrirasyid.com 551
http://localhost 351
http://cloud.feedly.com 5
http://techno-sphere.blogspot.com 1
http://10.0.1.212 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordPress Customization for Higher Educational Institution’s Websites Presentation 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