The Hayden Theme in WordPress Recipe

An editorialized document for web developers - skip to the recipe

 

Web Developer != Killjoy

For starters, compare for yourself: My Hayden vs. Their Hayden

One of the most rewarding aspects of being a web developer is working with small business entrepreneurs.  They tend to relish their business as if it were their own child and treat their clients like dear friends.  Those attitudes are contagious, inspiring and influential. The challenge for the web developer is to serve the motivated business owner without burdening their productive vibe with layers of technical excuses why their vision cannot be realized.  Put simply, the web developer needs to avoid being a killjoy.

I was put to this test recently when an existing client came back to me for an additional site. Sweet! Once the tingling flattery of being asked to develop a second website subsided, I reviewed the requirements doc. Requirement number one, “The site must use Squarespace’s Hayden theme”...

 

Stop right there!  Squarespace?

I'm a WordPress developer! I eat, drink, sleep and snuggle WordPress. Put another way, I don't do Squarespace.  Aren’t they the enemy?

[the camera zooms in on web developer’s grumpy face as he types]

I began to aggressively clickety-clack an email back to the client letting them know that ‘Requirement number one’ is not recommended. My self-righteous prose blossomed into a  complex tapestry of reasons why we were ‘not going to do this new site in Squarespace’ and why we were ‘not going to use the Hayden theme’. On and on I clicked and clacked. Eventually feeling I had more than sufficiently made my point, I paused. Sitting back and folding my arms, I reread the email. Leaning forward, elbows on the table, head in hands, I paused again.

[camera focuses on web developer’s keyboard]

I sat up straight and with my left hand I pressed ctrl+a.  With my right forefinger I tapped the delete key and went for a walk.

So much for not being a killjoy. But what was I to do? I had no desire to surrender myself to Squarespace, where, quite possibly, I might wind up surrendering my client as well!  But my client was so excited about this new venture, how could I let him down? Having never been asked to do a Squarespace site before I had safely concluded that Squarespace was a toy; and not a cool toy like a Lego Robot, but a lame one like an Easy-Bake Oven (unless, of course, you used it to ‘reshape’ your less desirable superhero action figures...).  But now that I was being asked to do this site in Squarespace I was feeling… threatened?

I had some more clickety-clacking to do...

Roger,

This sounds like another winning idea, congratulations!  I am honored and thrilled to be included. I do not have a lot of experience with Squarespace (none actually), but will spend some time over the weekend getting comfortable with it.  Thank you for turning to me for the web portion of this exciting new venture. I will digest these requirements over the weekend and follow up with you on Monday with some comments, questions and a schedule.

Sincerely,

John

 

With that, it was time to talk to a confidant, someone I could bare my soul to.

“Ok Google, what is the market share of WordPress?” Scrolling down past the ubiquitous ad garbage at the top I came across this page at Kinsta.com, WordPress market share.  Phew, I was safe.  WordPress manages 31% of all websites and makes up nearly 60% of all Content Management Systems.  Vindication! Ok clever and creative entrepreneurial client of mine, “No Squarespace! No Hayden theme!”

 

Not so fast.  What about empirical evidence?

Crawling out of the deepest darkest recesses of my overly-jubilant mind came the gradual formation of a single word, ‘trend’. TREND! There was a time when manual labor accounted for 99% of all the sewing of shirts while the sewing machine accounted for barely 1%.  Phew I’m safe, I don’t need to worry about buying a sewing machine? Ok, so that analogy is possibly a bit apples and oranges. I wrestle on. The data on Kinsta.com’s web page, WordPress market share, clearly indicates that WordPress is on top and will be on top for the foreseeable future.  But as I toyed with my new word, TREND, I glanced over the numbers again and began to feel uneasy.  Squarespace grew by over 120% in the past year alone and WordPress’s growth was curiously missing in that section of data.  But using numbers posted elsewhere on this page it seems WordPress grew a wee less than 12% over the past year.

Ouch.

“Ok Google, compare Squarespace and WordPress functionality”.  This yielded a lot of worthless results. No surprise, Squarespace lovers listed 50 reasons to hate WordPress and WordPress lovers listed 50 other reasons to hate Squarespace.  Great. What I needed was an analytical review by a WordPress developer who is intellectually honest and willing to list 50 reasons why a WP developer should use Squarespace. This ultimately lead me to a thoughtful and thorough article by WP developer, blog author and Web Whisperer, Fred Meyer, I Built a Site with Squarespace, and I Liked It (Link included with permission from Fred himself - thanks Fred!).   

Now we are getting somewhere.  I can’t say I was thrilled to read all of Fred’s conclusions, but wanting to treat my client as the close friend he had become, I put on my big blog pants and sucked it up.  After a couple of readings I began to feel less uneasy; and not just because of Fred’s section entitled, “[...] SQUARESPACE: NOT WITHOUT BUGS”, but because he decides not to choose between these competing CMS’s but to actually include Squarespace in his development arsenal and offer his development skills in the Squarespace environment.  

Brilliant idea!  I spent several hours in Squarespace, easy-peasy, I get it and (@#%$) I love it!  Now I was all set to write that email to my client assuring him I was ready to move forward with Squarespace using the Hayden theme.

 

Requirement number 2

Not so fast.  Had I read all of my client’s requirements to begin with I might have saved myself a couple of steps here, and a wee bit of anxiety.  Without going into any details it was clear most of the remaining requirements were not possible in the Squarespace environment. A great deal of data-driven, custom-coded development was going to be needed in order to meet many of those remaining requirements.

 

Now what? Let’s have a wedding!

I can't beat them. I can't join them. What am I to do with Squarespace? As luck would have it there was another gem hidden in Fred’s enlightening article. One of the secrets to the success of Squarespace emanates from their simple drag-and-drop interface. Fred made mention of a WordPress plugin called Beaver Builder. This was my way out. All I needed to do was find Squarespace’s Hayden theme done as a WordPress theme and then install Beaver Builder to give me that desired drag-and-drop environment.

 

Problem, what’s on the shelf has expired and smells funny.

The only Hayden theme I could find for WordPress was from Pixel Press; a valiant effort but not quite gorgeous enough.  One of the most expensive parts of the original Hayden theme is the core font, Futura PT. You can purchase this font for $450.00, per site so long as it gets no more than 10,000 page views per month, at which point the price goes way up.  This is part of the problem with Pixel Press’ version of Hayden; their font choice, Helvetica Neue, just isn’t elegant enough.  Also, other elements in the Pixel Press Hayden were clinky, not elegant.  Uh oh...

 

Solution, DIY

I'm going to have to make my own Hayden WordPress Theme.  After digging through a nauseating amount of Google Fonts I found one I thought was an elegant alternative to Futura PT called Montserrat.  And now, without further ado, the recipe...

 

~ The Hayden Theme in WordPress Recipe ~

 

Check it out: My Hayden & Their Hayden 

How to replicate:

  • Create a new WordPress environment
  • In WordPress admin: Create (Publish) a few pages with some titles like, Home, About us, Our portfolio and Contact us (worry about content later)
  • Open Appearance > Menus and create a “main menu” out of those new pages > Save
  • Install the Twenty Seventeen WordPress theme (may already be installed by default)
    • Get a moody, elegant, dark image from PEXELS.  Pexel images are free.  (Ideally and ultimately you would replace this with a photo of your own.)  Download a large horizontal photo at 2000px wide. You can darken the photo further and even monochrome it in PhotoShop or some free alternative like Gimp.
    • In WordPress admin:
      • Appearance > Customize > Site Identity > set your Title and Tagline
      • (Arrow back) > Customize > Header Media > Add new image and upload your photo (it might be fun to make a dark, moody or elegant video short, upload to YouTube and use that instead.)
      • (Arrow back) > Customize > Menus > Main menu > Under Menu Locations check ‘Top Menu’ then uncheck all others (for now, you can use these later if you like)
      • (Arrow back) > Customize > Homepage Settings > Check ‘A static page’ and select your homepage from the drop down menu, and ‘-select-’ for Posts page (for now, you can use this later if you want)
      • (Arrow back) > Customize > Theme Options > Check ‘One Column’ then deselect (or select ‘-select-’) in the four dropdown menus (for now, you can use these later if you like)
      • Publish > now close the customizer
  • Install the Beaver Builder plugin
  • Install the Easy Code Manager plugin

 

Note that getting the professional versions of both of the above plugins are truly worth it.  These pro versions are good for unlimited websites, that's the way all pro WP plugins should be! (**cough** WPBakery, you listening, just saying…)

 

  • Open Easy Code Manager and create three new Code Blocks and label them something like this (make sure they are in this order, you may have to drag them around after making them):
    • Global CSS
    • Global JQuery
    • Not-home CSS
  • Open the PDF files and copy the scripts (including the opening and closing script and style tags) into their corresponding Code Blocks (that you just made in the previous step) and do the following:
    • Global CSS PDF: In Easy Code Manager click Panel > Assignments > Aux and check “Entire Website” > Save
    • Global JQuery PDF: In Easy Code Manager click Panel > Assignments > Aux and check “Entire Website” > Save
    • Not-home CSS PDF (this may not be intuitive at first, but it works):
      • In Easy Code Manager click Panel > Assignments > Options and check “Pages” > Close panel
      • In Easy Code Manager click Panel > Assignments > Page and check “Home” (Or whatever you labeled your homepage) > Save

 

All done!  Yes, I know you could and possibly should do this by making a Child Theme, but I am much faster in jQuery than in PHP and I only had the weekend to figure this out.

 

Feel free to ask questions (or make corrections) and please let me know if you use this tutorial.

 

Leave a Reply

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