Our WordPress and React work for HEC

Created with Sketch.

Our WordPress and React work for HEC

We’ve been busy revamping some older sites that are part of the Hellenic Electronic Center: a long standing cultural site featuring a mix of WordPress and hand coded HTML sites. It was crucial to keep the content management options WordPress offers, partially for future contributors, but the HTML sites needed a bigger boost.

HEC also wanted to avoid switching WordPress themes because of the amount of content already on the sites. It turned out the older Panorama theme wasn’t too difficult to make responsive with some custom CSS wizardry. And the default menus, which couldn’t be natively updated, just called for the right plugin. After trying a few, Responsive Menu by ExpressTech fit the bill perfectly. I also loved WPFront Scroll Top so much I added it to my own portfolio. As a sample, check out the now fully responsive Philosophy site, tested on desktop & mobile.

As a developer I’ll admit to having mixed feelings about WordPress. I love how easy it is to update content on any device, while hating how it’s easier to just write some code than navigate a backend and manually enter styles into a plugin’s form(s). On the upside, and despite PHP’s decline in popularity, there’s definitely a plugin (often at least a few) for everything! And they’re more powerful than ever. In fact, the more I work with some of the JAMstack setups, which are still in infancy and ironing out their own kinks, the more I appreciate WordPress.

My favorite way to work these days though, is still with React. Especially Create-React-App, which requires no webpack configuration. So I jumped at the opportunity to redevelop a few older HTML sites with CRA. For this post, I’m going to focus on the popular Parthenon Marbles site, the historic companion to the campaign blog.

The Parthenon Marbles site undoubtedly has a lot of content, which I am still moving over. Two of the sections will take you back to content on the now-archived old site. I actually considered just using Materialize for this project, but React + Materialize ended up being optimal mostly for creating that navigation bar + sidebar as a component. Cool tricks aside, this is where Javascript frameworks shine really bright. If you want to make a change to a menu, or any component, you only have to do it once.

Now IIS is not really a popular choice for React, but we did it! Their docs even have a nice, concise section on building for relative paths. Here’s the finished product with the old site for comparison. I kept the design as close to the original as possible.

We hope you enjoyed reading about how these sites evolved as much as we enjoyed making it happen. Have a thought or tip? Leave us a comment or drop us a note!

Leave a Reply

Your email address will not be published. Required fields are marked *