Fafafoom Blog Update: Web Design Refresh and New Hosting
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!
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
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
Based on my reasons above, I made a list of three big objectives and started doing my homework on their prerequisites:
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
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:
- Shashin for serving blog post images from my Google albums
- WordPress SEO
- Disqus Comment System for better Comments section and spam control
- WP Super Cache
- WP Google Fonts
- P3 (Plugin Performance Profiler) for analyzing plugins
- Top 10 for quick list of top daily and all-time posts
- Yuzo Related Posts for displaying related posts at the end of each blog posts
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!
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,