{"id":23587,"date":"2025-10-29T16:24:23","date_gmt":"2025-10-29T16:24:23","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=23587"},"modified":"2025-10-29T16:24:24","modified_gmt":"2025-10-29T16:24:24","slug":"building-a-complex-wordpress-powered-online-platform-for-the-music-publishers-association","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/building-a-complex-wordpress-powered-online-platform-for-the-music-publishers-association.html","title":{"rendered":"Building a Complex WordPress-Powered Online Platform for the Music Publishers Association"},"content":{"rendered":"\n<p>The GetDevDone team is famously known for our knack in handling a wide range of projects, whether it\u2019s fixing small issues, customizing themes, building business-critical plugins, or crafting complex enterprise-level websites from scratch. This ability not only benefits individual clients but also appeals to digital agencies looking to expand their services and boost profits.<\/p>\n\n\n\n<p>In this post, we want to share a story about our collaboration with The Playground design agency, one of our long-standing partners, on a large-sized, feature-rich WordPress development project. Let&#8217;s explore the details.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Client&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-1024x476.png\" alt=\"\" class=\"wp-image-23588\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-1024x476.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-300x140.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-768x357.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-1536x714.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160704\/Playground-2048x953.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.theplayground.studio\/studio\" target=\"_blank\" rel=\"noopener\" title=\"\">The Playground <\/a>is a strategic design studio dedicated to humanizing brands. Their expertise lies in crafting brand identities and digital solutions for businesses at any stage of their journey, from ambitious startups to established companies aiming for significant growth.<\/p>\n\n\n\n<p>The studio offers a broad spectrum of services, assisting businesses in strategizing, defining, creating, and implementing their marketing plans. This encompasses running digital marketing campaigns and building websites among other offerings.<\/p>\n\n\n\n<p>We\u2019ve jointly worked on multiple projects of varied scopes and complexity for over five years now, always delivering outstanding results to The Playground\u2019s clients.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>This time around, The Playground turned to us for assistance in developing a WordPress-based online platform for the <a href=\"https:\/\/mpaonline.org.uk\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Music Publishers Association<\/a> (MPA) from the United Kingdom, featuring an elaborate structure and engaging interactive effects.\u00a0<\/p>\n\n\n\n<p>As usual, the designs were created by the studio, while our mission was to convert them into pixel-perfect, responsive, mobile-friendly, and Retina-ready web pages, plus set up the WordPress back end for effortless content management.&nbsp;<\/p>\n\n\n\n<p>We also needed to integrate the WordPress build with the CiviPlus CMS that the MPA used internally, which added extra effort for our team.&nbsp;<\/p>\n\n\n\n<p>All in all, there were 11 pages that we needed to code and integrate into WordPress:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home<\/li>\n\n\n\n<li>Events<\/li>\n\n\n\n<li>Contact&nbsp;<\/li>\n\n\n\n<li>Membership&nbsp;<\/li>\n\n\n\n<li>What we do&nbsp;<\/li>\n\n\n\n<li>News article&nbsp;<\/li>\n\n\n\n<li>Privacy&nbsp;<\/li>\n\n\n\n<li>Resources<\/li>\n\n\n\n<li>New Members Area (an internal page accessible to registered members only)&nbsp;<\/li>\n\n\n\n<li>About&nbsp;<\/li>\n\n\n\n<li>404&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Apart from converting the designs and creating the pages in WordPress, the MPA wanted us to add a large number of dynamic\/interactive effects and features to the website using JavaScript, including:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mobile navigation with a Back button<\/li>\n\n\n\n<li>Marquee&nbsp;<\/li>\n\n\n\n<li>Accordion&nbsp;<\/li>\n\n\n\n<li>Popup&nbsp;<\/li>\n\n\n\n<li>AJAX load more\/ Infinite scroll<\/li>\n\n\n\n<li>Carousel<\/li>\n\n\n\n<li>Tabs&nbsp;<\/li>\n\n\n\n<li>Datepicker&nbsp;<\/li>\n\n\n\n<li>Job search&nbsp;<\/li>\n\n\n\n<li>Navigation hide\/show&nbsp;<\/li>\n\n\n\n<li>Custom select&nbsp;<\/li>\n\n\n\n<li>And more&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Finally, since the MPA is a socially aware organization that cares about disabled people, they requested adding the essential accessibility features to comply with the WAI\/WCAG key requirements such as keyboard navigation.&nbsp;<\/p>\n\n\n\n<p>Once we shook hands with The Playground on the collaboration conditions, our developers set out to bring the client\u2019s vision to life. We didn\u2019t have a minute to waste, considering the vast project scope.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<p>The entire description of the work we did could take more than one post. Let\u2019s focus on the most notable features that we created using the staple web technologies: HTML\/CSS\/JavaScript and WordPress.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Homepage&nbsp;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Animated MPA Logo&nbsp;&nbsp;<\/h4>\n\n\n\n<p>One of the most engaging features of the entire website is the animated MPA logo on the Homepage.&nbsp;<\/p>\n\n\n\n<p>When the mouse cursor is not on the logo, it pulsates once every second like a sound wave. However, when you place a cursor over any of the lines that make up the logo, the pulsation stops and the line where the cursor is positioned scales up to 170% of its height with no change to the width.&nbsp;<\/p>\n\n\n\n<p>The lines located directly to the right and left of the current one, in turn, scale up to 140% with the width intact, while the second lines to the right and left &#8211; to 130%. The rest of the logo lines remain unchanged.&nbsp;<\/p>\n\n\n\n<p>As the hover moves to another line, the same animation starts happening to the lines affected by that, in the same way.&nbsp;<\/p>\n\n\n\n<p>It did take us some time and JavaScript magic to get this animated logo right, but we achieved the exact result the client expected. We used the GSAP animation to achieve this feature:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160824\/Animated-MPA-logo.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Anchor Scrolling&nbsp;<\/h4>\n\n\n\n<p>By clicking the <strong>Find out more <\/strong>arrow link underneath the MPA animated logo, the user gets to the hero section below with a smooth scrolling effect.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29160919\/Anchor-scrolling.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Carousel in the What we do Section&nbsp;<\/h4>\n\n\n\n<p>We also created a user controlled carousel in the <strong>What we do <\/strong>section, consisting of three subsections. Users can move from one subsection to another by clicking the numbered round buttons. The button for the selected subsection is painted black with the number having the color of the current section. For instance, number 1 is yellow since the<strong> Policy and Outreach<\/strong> subsection is yellow too.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161033\/Carousel-in-the-What-we-do-section.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Tabs<\/h4>\n\n\n\n<p>Another feature worth mentioning is the section at the bottom of the page with two tabs: <strong>News <\/strong>and <strong>Events<\/strong>, highlighting the latest MPA news and events correspondingly. The beauty of this setup is that it saves space on the page, displaying the content of each tab within the same frame.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161104\/News-and-Events-Tabs.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>Users can also scroll horizontally within the tabs using the arrows in the upper right corner.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Events Page&nbsp;<\/h3>\n\n\n\n<p>The standout feature on the Events page is the Filter that allows users to find specific events easily by category such as Education or Industry, by specifying a date range in the handy datepicker, or by typing keywords into the search box.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161133\/Filter-on-the-Events-page.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">About Page&nbsp;<\/h3>\n\n\n\n<p>MPA\u2019s history spans several centuries. To present it in an engaging and compact way, highlighting the organization\u2019s most significant milestones, we developed a user controlled carousel. By clicking a specific year at the top of the carousel, visitors can find out about the main events that impacted the MPA at that particular period of time.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161212\/Our-history-carousel-on-the-About-page.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Website-Wide Features&nbsp;<\/h3>\n\n\n\n<p>In addition to features specific for each page, we created several functionalities that work across the entire website.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Header That Disappears and Reappears on Scroll<\/h4>\n\n\n\n<p>We made the website\u2019s header hide as soon as a user scrolls down below the fold and reappear once they start scrolling up regardless of their current location on the page, even if they\u2019re at the footer.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161555\/Header-that-disappears-and-reappears-on-scroll.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>This feature is an excellent way to keep the users\u2019 focus on the content, reducing distractions to a minimum.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Site-Wide Search&nbsp;<\/h4>\n\n\n\n<p>To improve the user experience even further, we added a search functionality so that users could quickly find information they\u2019re interested in instead of scrolling through the website page by page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1144\" style=\"aspect-ratio: 1920 \/ 1144;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161553\/Site-wide-search-functionality.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>The search is enhanced by the auto-complete feature that we implemented using the Revanassi WordPress plugin.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">AJAX for Asynchronous Content Loading&nbsp;<\/h4>\n\n\n\n<p>Another feature that\u2019s used across the website is infinite scrolling. We enabled it by using the AJAX technology, which allows for asynchronous content loading, enhancing user experience and making the website dynamic and interactive.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1142\" style=\"aspect-ratio: 1920 \/ 1142;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161701\/Infinite-scrolling-on-the-Homepage.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">WAI\/WCAG Compliance<\/h4>\n\n\n\n<p>As requested by the client, we implemented the key accessibility guidelines to make the website easy to navigate and use by people with various forms of disabilities. In particular, we did the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Added descriptive text to the Alt attribute of each image and video across the website&nbsp;<\/li>\n\n\n\n<li>Enabled keyboard navigation&nbsp;<\/li>\n\n\n\n<li>Provided the option to make the font larger<\/li>\n\n\n\n<li>Added captions and audio descriptions to the videos&nbsp;<\/li>\n\n\n\n<li>Made sure there is enough color contrast on the website&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1122\" style=\"aspect-ratio: 1920 \/ 1122;\" width=\"1920\" autoplay loop muted src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29161747\/WCAG.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Outcome&nbsp;<\/h2>\n\n\n\n<p>Since there was so much work, we divided the project into batches for the client\u2019s maximum convenience. They had some comments and update requests with every batch we delivered. For example, they asked us to change the rollover state on white buttons to lighter grey.&nbsp;<\/p>\n\n\n\n<p>On the whole, however, The Playground was more than happy with our performance and diligence. They got a visually attractive, functional, interactive, and accessible website with engaging content and captivating dynamic effects and animations to add another point to their agency\u2019s popularity rating.&nbsp;<\/p>\n\n\n\n<p>It took us<strong> 63 business days<\/strong> to develop the platform from start to finish. This, again, showcases our capabilities in handling projects of any scope or complexity, invariably delivering topmost-quality results.&nbsp;<\/p>\n\n\n\n<p>Want to be our next happy client? <a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Let\u2019s get in touch<\/a>!\u00a0<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how GetDevDone partnered with The Playground design agency to build a feature-rich WordPress platform for the Music Publishers Association (MPA) in the UK. Our team transformed detailed designs into a responsive, Retina-ready website and integrated WordPress with CiviPlus CMS, ensuring seamless content management and a flawless user experience.<\/p>\n","protected":false},"author":12,"featured_media":23599,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[743,752],"tags":[767,855,774,760,851,814],"class_list":["post-23587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-wordpress-development","tag-accessibility","tag-architecture","tag-cms-development","tag-custom-development","tag-nonprofits","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Yuliya Mikitenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/yuliya-mikitenko"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/case-study\" class=\"advgb-post-tax-term\">Case study<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">WordPress development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Accessibility<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Architecture<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Custom development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Nonprofits<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Accessibility<\/span>","<span class=\"advgb-post-tax-term\">Architecture<\/span>","<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">Custom development<\/span>","<span class=\"advgb-post-tax-term\">Nonprofits<\/span>","<span class=\"advgb-post-tax-term\">WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 6 months ago","modified":"Updated 6 months ago"},"absolute_dates":{"created":"Posted on October 29, 2025","modified":"Updated on October 29, 2025"},"absolute_dates_time":{"created":"Posted on October 29, 2025 4:24 pm","modified":"Updated on October 29, 2025 4:24 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1-723x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1-800x630.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1-770x510.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2025\/10\/29162145\/playground-1.png"},"featured_post_color":"#0a1c76","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/7401c84439e6a6c4aa6a8ff19e0d4605c2906fb2d668abb29f831e4a5affc943?s=96&d=mm&r=g","author_position":"Account Manager","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"upandup-consulting-brand-website","name":"Modern website for a boutique consulting agency"},"next_post":{"slug":"why-the-next-wave-of-agency-growth-depends-on-engineered-delivery-not-more-people","name":"Why the next wave of agency growth depends on engineered delivery, not more people"},"related_posts":["react-wordpress-theme-development-benefits-and-drawbacks","how-we-customized-webflow-template-for-real-estate-agency","ai-personalization-and-retention-transforming-sms-and-on-site-experience-into-growth-drivers"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/23587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=23587"}],"version-history":[{"count":3,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/23587\/revisions"}],"predecessor-version":[{"id":24592,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/23587\/revisions\/24592"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/23599"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=23587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=23587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=23587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}