Adding Vimeo to the Crisp Persona Theme on WordPress

For my normal readers – I’m guessing you are going to want to skip this one. It’s going to get a bit technical.

You’ve been warned.

I recently switched to a new theme here on the G sides. It’s the Crisp Persona Theme by Justin Klemm. It’s nothing fancy and that is what I love about it. It’s clean, very responsive, minimalist. Perfect for a blog that is mostly about writing, not as much about photos.

Most of the change went smooth with minor tweaks to menus but I had two major (at least major for me) changes I wanted to make. The first change was making two of the three columns in the footer widget-able. (Is that even a word?) I followed a step by step guide on the process. I’d link it but I’m not a huge fan of it. I’m convinced there is a more elegant way to do it and my footer still isn’t perfect. It will work but I’m still trying to figure out a better way to do it.

The second change was adding a vimeo link to the sidebar with the other social media links. The “stock” options are Google+, Facebook, Twitter, Instagram, LinkedIn, and your RSS feed. What I thought at first would be a quick insert into the sidebar.php file – turned out to be a bit more complicated than I imagined.

Here’s how I did it.

Part 1. Locate the stylesheet for Crisp Persona. This is under the ‘Editor’ option in the Appearance main menu. At the once you are behind the dashboard.

About 3/4 of the way down, you need to be looking for this in the code:

* All Genericons
.genericon, .site-personal .social-links a {

This is your cue to slow down. This is the section that is pulling icons and images from the Genericons folder that is part of the Crisp Persona. Here’s the part we are interested in:

.genericon-googleplus:before, .site-personal .social-links .gplus:before {
content: 'f206'; }

.genericon-linkedin:before, .site-personal .social-links .linkedin:before {
content: 'f207'; }

.genericon-linkedin-alt:before {
content: 'f208'; }

The Genericon Family is huge but only those with this language is used in Crisp Persona:

“.site-personal .social-links .[whatever the icon name is]: before”

Those that aren’t used are blank but listed. If you roll down a few places, you will notice that the vimeo line is listed but blank. We need to add this distinction so that in our other php files we can pull this icon.

Here’s what the code reads:

.genericon-vimeo:before, {
content: 'f212'; }

We are going to add this to it:

.genericon-vimeo:before, .site-personal .social-links .vimeo:before {
content: 'f212'; }

Save your stylesheet. Time to move on to phase 2.

2. Find the customizer file.

About 3/4 way down, look for this code:

// Social links
$socials = array (
'show_rss_icon' => __( 'Show RSS Icon','crisp-persona' ),
'facebook_url' => __( 'Facebook URL','crisp-persona' ),
'gplus_url' => __( 'Google+ URL','crisp-persona' ),
'linkedin_url' => __( 'LinkedIn URL','crisp-persona' ),
'instagram_url' => __( 'Instagram URL','crisp-persona' ),
'twitter_url' => __( 'Twitter URL','crisp-persona' )

What this code is doing is giving you menu options in the “Customizer” menu to add your personal URL to these specific social media sites. We need to add vimeo to this list. By doing this, it will let us add it in the menu, not “hardwire” in the code.

Add this line right after the twitter_url (I’ve included it for reference). Be sure to put a comma on the end of the twitter line:

'twitter_url' => __( 'Twitter URL','crisp-persona' ),
'vimeo_url' => __( 'Vimeo URL', 'crisp-persona' )

Save your file. Moving on to Phase 3.

3. Open up the sidebar.php file.

We are going to make two edits to this file.

Edit 1:

Look for this code near the top of the file:

// Only social social box if there's something to show...
!empty( $crisp_persona_options['facebook_url'] ) ||
!empty( $crisp_persona_options['instagram_url'] ) ||
!empty( $crisp_persona_options['twitter_url'] ) ||
!empty( $crisp_persona_options['gplus_url'] ) ||
!empty( $crisp_persona_options['linkedin_url'] ) ||
!empty( $crisp_persona_options['show_rss_icon'] )

Again – no vimeo. We need to add it. So right after the “linkedin_url” call, we are gong to add a line calling for vimeo. Then we are going to put 2 of those “|” which is the key shifted. Here’s what it looks like:

!empty( $crisp_persona_options['vimeo_url'] ) ||
!empty( $crisp_persona_options['show_rss_icon'] )

You can save the file if you want. I do. But we still have one more edit to make.

Right below this set code is a bit of a mess but you can see the callouts for each of the social media URL. Look down the list for the “linked in” reference.

  • <a class="linkedin" href="" title="Linked In">
  • Immediately after this, add the same callout except for vimeo. Should look like this:

  • <a class="vimeo" href="" title="Vimeo">
  • Hit the save button!

    You are done. Click on the customize button under the appearance menu and throw in your vimeo site and there it should be.


    Leave a Reply

    Fill in your details below or click an icon to log in: Logo

    You are commenting using your account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s