Fafafoom Blog Update: Web Design Refresh and New Hosting

by May 19, 2015Featured, Personal3 comments

It’s official…the agonizing days of website update is over! Now residing at a new cloud hosting server, the new Fafafoom blog has an updated, clean design and much faster page loading time. Yay, I’m so happy!

Updating Fafafoom layout had been something I put off since last year. If you read my recent April notes, you’d know the blog layout update happened in mid-March.

However, I feel that some readers can benefit from my sharing of what has changed, both with the layout and the gradual back-end changes after that. Updating a WordPress blog can be challenging, and while my setup is not typical, I hope this post can be insightful for fellow WordPress bloggers who update their blog themselves from time to time.

Updating Fafafoom Blog Theme

Fafafoom layout (before mid-March 2015 update)
This was the third blog layout update for Fafafoom; the previous layout (pictured left) was in effect since August 2013 until mid-March 2015. The reasons for the blog update were plenty:

1. The blog theme grew outdated. It’s a clean blog theme (it’s the Function theme by WooThemes), but with each WordPress core updates, it couldn’t keep up. WooThemes never updated the theme since 2012 and focused mostly on their famous Canvas theme (which I don’t really like) and WooCommerce. The biggest tell-tale sign was how long the homepage’s featured slider with carousel pagination loaded. For some users, it did not load at all.

2. The ever-present sidebar was such a distraction when reading a blog post. I wanted an option to not have any sidebar for individual blog posts.

3. It’s hard to find the specific topic you’d want to read. Fafafoom’s menu became convoluted with the growing number of categories I added over time, and the navigation bar became gradually useless.

4. There were several blog theme and plugin conflicts, most notably with my image serving and social media sharing plugins.

5. There were too many external requests made whenever any blog page loaded; this was mostly because of the social media sharing plugin.

6. There was not enough emphasis on the photos, which need to take more of a center stage on this fashion and style blog.

7. The blog theme itself was rather limited in displaying social media accounts straight out of the box. I can modify the theme or make a child theme to make this possible, but the process was too troublesome. I don’t have the patience on making it work the way I really wanted it to.

Updating Fafafoom Blog Theme

Searching for the next blog theme was not easy. I want a lightweight blog theme with extensive, dependable functionality set from a developer team that regularly update and maintain the theme. I’ve heard great things about Divi, a powerful, page-builder-based theme developed by Elegant Themes. Not incidentally, the blog theme I used since May 2012 until August 2013 was Chameleon, another one by Elegant Themes. But I needed to make sure it is the right theme to go next.

Based on my reasons above, I made a list of three big objectives and started doing my homework on their prerequisites:

OBJECTIVE #1: Creating a minimalist mega menu style for the navigation bar. This is necessary to make all the Fafafoom categories more visible and easy to browse.
My preparation: I created more categories on WordPress dashboard and start untangling the overlapping categories each blog posts are assigned to. For example, I now separate SF Bay Area fashion reviews with SF Bay Area fashionable scenes. Before, they were all under the same category. I also added new categories, like Book Reviews and Style Notes.

OBJECTIVE #2: Creating a grid-based homepage with featured images of latest blog posts from several categories be the star. In addition, the ability to create no-sidebar single post pages.
My preparation: I spent a some time with Divi tutorial to make sure I can do what I wanted. Since I’m already subscribed to Elegant Themes, it’s good to go to its support forum and know that I can get the exact custom CSS code snippets I wanted.

OBJECTIVE #3: Having a lightweight social media sharing plugin. Plus, being able to show Fafafoom’s social media icons on header and footer easily.
My preparation: Elegant Themes released Monarch, its dependable, functionality-rich, and lightweight social sharing plugin that’s focused in blog post sharing. Reading their documentation and playing around with the demo leaves me pretty damn convinced.

Updating Fafafoom Blog Theme

At this point, I’m confident Divi addressed all of my concerns. With Monarch plugin, it hit all of my objectives and is powerful enough that I can create different page layouts as I’d like without any need for child theme.

Additional styling can also be made in separate custom.css, which won’t be overwritten when the blog theme is updated. It was simply perfect for Fafafoom’s next incarnation. After setting aside several hours one afternoon to update the blog theme, Fafafoom’s look is brand new (pictured right).

Making a custom grid layout for Fafafoom homepage is a breeze once I get used to Divi’s page builder system, and it’s so good to see the photos taking center stage now, with no sidebar distraction on homepage and single post view. I also updated the blog’s font so it’s mostly using serif type for easier reading. I know my posts are long, after all.

For social media sharing, I was impressed with Monarch and easily made the switch from AddThis. The added bonus of Monarch is much fewer number of external requests. The plugin conflicts are now gone as well. The image serving plugin regains its full functionality! Yay!!!

Here’s a list of my most essential WordPress plugins I use on Fafafoom:

Fafafoom homepage layout since March 2015

Unexpected Twist: Blog migration

But apparently I was not out of the woods yet. The cloud server Fafafoom was on, an old micro instance on Amazon Web Services, experienced some “hardware degeneration.” Chris had to stop the instance and relaunch it on another server, which was presumed more healthy.

Alas, starting from late March to early April, it had gotten worse. The old micro instance constantly consumed 100% of CPU capacity. The server constantly timed out just from the simple act of me logging into my WordPress dashboard. Simple CSS updates that should’ve taken minutes took hours. After several weeks of frustration, I couldn’t take it anymore.

Thanks for working in tech industry, I got a prompt and effective advice to switch to Digital Ocean from several developers I worked with. Armed with Chris’ abilities and my credit card information, Fafafoom was officially moved to Digital Ocean starting in May 2015. It was a relatively quick, painless migration.

By the way, thank goodness I moved most of Fafafoom’s photos from my hosting server to Google three years ago. Had that not happened, blog migrations would be much more painful than it needed to be.

The result was immediate: the blog loads so fast now! The CPU usage hardly ticks above 30%.

The migration also somehow fixed a weird bug Fafafoom had with Pinterest since February 2015 (it just abruptly stopped working). Before, clicking Pinterest icon to pin on Pinterest did not work properly. And vice versa; clicking a pin from Fafafoom on Pinterest went to a 404 page.

Somehow adding an A record in Fafafoom’s DNS as the last step of migration fixed the problem. A quick test on Pingdom revealed that the website has gotten much faster indeed, with a lot less external requests (previously, there were 91 external requests).

So since May 9, 2015, Fafafoom is on a new home and everything’s good. So quick, efficient, and now I can finally catch up and work more on other things surrounding the blog – social media channels, outreach efforts, etc. now that the blog is fixed!

What’s Next?

Oh gosh…a lot! Let’s see:

  • Getting the delayed posts since April published
  • Writing new blog posts for SF student fashion shows
  • Resuming outreach efforts with brands, PR companies, and publishing houses
  • Taking closer look on SEO efforts
  • Taking closer look for social media strategies
  • Getting better at editorial planning

There are so many things to get done. It’s just never ending, but I love having these kinds of challenges.

But right now, I’m just super happy the blog is now officially out of the woods. Sigh…

I hope this has been an insightful post. If you have questions, please let me know. Meanwhile, I’ll have to hop on to the next train to get the next posts up!

Thanks for reading; until next time,