"I’m so happy with the various ideas and updates Sam has brought to my website, and I’m now loving the look and feel of my site, which previously felt very dull and tired."

Marg - Composer + Musician

Marguerite Abbott - www.margueriteabbott.com

ma hero site update image compilation

Summary

On this project, the client’s site had not been updated for some time. They wanted to refresh their site by updating their content as well a changing the site structure a little. The content itself was handled by the client. While I was responsible for re-organising the site, updating posts and editing the looks.

ma maintenance screen
Maintenance Screen

Before starting the site update, I first set up a maintenance screen using the Seed Prod  plugin. This is a useful plugin that allows a maintenance screen to displayed instead of the site’s pages.  This means visitor aren’t able to see changes as I update the site. The plugin handles all backend operations and displays the maintenance screen on every pages using a 503 response code.

The page itself was a simple design. I made it using existing assets from the client and the simple block editor in the plugin. I added some social links at the bottom so visitors could still get in touch during maintenance.  And I also edited the page with some extra code to make things look more appealing.

ma learningdivi
Learning Divi

This site was built using the page builder Divi, which I have learnt how to use throughout this project. Broadly speaking, I have tried to keep my changes consistent with the rest of the site and have been using the Divi drag and drop editor for all the main edits.

However, sometimes I did find Divi restrictive and so I did add my own code to customise things further. Additionally, I made frequent use of the ‘saved layout’ feature to save various sections of the site. This came in handy for backing up content before making big changes, transferring content across pages and for creating reusable layouts to help create a consistent look.

ma new menu structure
Restructuring

As part of the site update the client was looking to restructure their site. This was to mainly showcase their posts more prominently and also to flesh out the site with extra pages. To begin with, I split their blog into multiple sections using categories. Then using the ‘blog’ and ‘portfolio’ modules, the new sections could be displayed on different pages. I also added new ‘projects’ to  the site and categorised them to fit this new layout.

Additionally, I created a custom post type for a brand-new ‘Ramblings’ section. This was dedicated to showcasing some of the Client’s social media posts. And lastly, I moved the testimonial content from home page to its own dedicated page.

ma project categories strcuture
Portfolio

As part of the restructure the Client wanted to split the ‘Projects’ posts into two categories: ‘Media’ + ‘Other’ compositions. However, these ‘Project’ posts were a custom post type being used by the Divi Portfolio Module, which is a core part of the site.

In order to get around this, I had to use categories to divide the blog into two sections. Unfortunately, the ‘Project’ post were also sharing some other categories already e.g. ‘Soundtrack’, ‘Song’ etc. This meant that although I had split the blog, the posts which shared categories still appeared in both sections. The portfolio module did not ‘see’ the two sections. My solution was to use css to find the posts using categories in their html classes.  I then hid the posts with the wrong categories so that the visitor only see the correct posts.

ma new project layout
‘Project’ Posts

A lot of the ‘projects’ were old posts. Some of the posts just needed a quick update while others a complete rewrite. I spoke to the client about what changes needed to happen and they provided me with all the necessary content. There were also a handful of the projects that were no longer needed  and so they were taken down from the site by setting them to draft posts. Additionally, several new projects were added to the site to reflect the client’s latest work. Again, I discussed the elements needed with client, who worked on the content. I then created new posts with this content and published them.

Lastly, I recategorized all of the projects so they appeared worked with the new blog.  I also worked on editing the project page layout. My new layout creates a more consistent design between the posts with more space between different content.  It is a cleaner look and to make it clearer for visitors to navigate.

ma homepage comparisons
Home Page

I also did a quick redesign on the home page.  I replaced the main video element with a more current video from the client’s Vimeo. In the featured posts section, I replaced the manually set up posts with blog modules so that they could be updated automatically. (The blog modules also used the new categories to only display the newest ‘media projects’, as per the client’s request).

And I wrote some custom code to handle some limitations I found using Divi. This was to do with the blog module. Although it had all the functionality I wanted, It unfortunately did not have enough design options to make it look right. So I wrote some css to get it to display in a horizontal grid fashion (like the original layout). I also created custom responsive layouts for tablet and mobile screen sizes.

ma child-theme code
Child Theme

To allow for better customization, I created a child theme for this site. Using the WordPress documentation and my own knowledge of php from developing my own theme (s-mckwebdesign.co.uk), I was able to create one quickly.

The child theme allows me to add my own theme file without overwriting the original theme; enabling more options. I added my own stylesheet for extra design options. I registered my own custom posts to help create a new section on the site. And I also created a wp template file for the new custom post. (I did this by copying the single-post template from the original theme. The rest of the customization was done with Divi itself).

ma dropdown image and code
Portfolio Menu

One of the Client’s requests was to make the menu on the portfolio module a drop-down menu. Unfortunately the module did not have this functionality. So I decided to create my own dropdown menu using javascript and JQuery.

The script does this by: first, finding all menu items, giving them a ‘flex-order’ number and stacking them in a column. It then assigns a class to the active menu-item and hides all menu items that do not have this class (leaving only the 0th position menu item). Using hover events (mouseenter + mouseleave), the script displays the hidden items. Next, using an onClick event on the menu itself, the script reassigns the flex order . This puts the clicked item on the top and then hides all other items. This results in the original menu behaving like a drop down menu. I managed to achieve this without permanently altering ‘Portfolio’ module menu. My code just modifies the original menu items and runs on top of the ‘Portfolio’ module.

For mobile, I had write a second script that was triggered on smaller screen sizes (since there are no Hover/onClick events on mobile). The new script opens the dropdown onTouchStart and closes when touching away from the menu. This required assigning a touch event to the page by using the document object. Then on second Touch, the script selects the menu item and reorders the drop-down. However, this became complicated due issues with event propagation when the dropdown menu overlapped post links. To solve this, I creating a function which removes all the ‘href’ values. It then places these values in a ‘temp’ attribute instead. This stops the anchor tags from firing before the menu. Once the menu logic had been processed, these value are returned to ‘href‘ attribute and the links work as normal again.

ma duplicate image and code
Custom Post

The final part of the restructure was to create new section called ‘thoughts’. This was a section where the client could display a selection of posts from their social media. I achieved this by registering a custom post called ‘thoughts’. This allows the site to run a second blog independent of the existing ‘projects’ blog.

However, adding social media posts to the ‘thoughts’ was a little challenging. The problem I had was that different social media platforms were creating different looking iframes, which I couldn’t customise properly. Instagram posts are responsive while Facebook are fixed in size (since the post content had a fixed width). To get around this I wrote a javascript file and used JQuery to modify the FB posts. The code takes the URL of the FB iframe and duplicates it with smaller width values so there are two FB iframes. A big one and a small one. It then adds html classes to both iframes and using css I can  switch between the big and small size depending  screen sizes.

I also played around with the ‘thoughts’ page layout to help with this transition. I found that the iframes  worked on most screens  as long as I removed most of the padding first. This way, the page shrinks first instead of letting the iframe distort.

Animations / Effects

  • -Link hover effects
  • -Fade-in animation (using Divi)

Resources