WordPress Hacks All Bloggers Should Know

Hiding Pinnable Images | Use Your Own Font | Creating Jump Links | Downloadable Cheat Sheet

When I started blogging almost 20 years ago, we had more control over our blogging space, but less user-friendly interfaces behind the scenes. Back then, I coded all of my sites by myself. These days, we have more user-friendly interface, and less control (unless you know code) over our spaces. I am perfectly happy with this. Not everyone wants to learn code, or they don’t think they have the time.

In my blogging groups on Facebook, bloggers frequently ask one another for help on hiding pinnable images and adding fonts. I think it’s important to understand the code, even if you don’t regularly write your own, so that you can be self-reliant and figure the glitches out. And, I have my own way of doing things that seems to take fewer steps than some of the most-popular tutorial posts I’ve found. This post focuses on hiding pinnable images, calling your own (or Google’s) fonts into your website using your Additional CSS area in your site customizer, and how to create jump links like I have on my recipe pages for the people who want to skip the story or just get to the important parts when they return. I’ve also used jump links in this article, so feel free to use them to skip to the parts that are important to you.

Use Your Own Font

Now, several people have advised to use a plugin after you’ve uploaded your font. It’s not a bad idea, especially if you’re not comfortable with looking at or editing your CSS. The more plugins you have on your site, the slower your site is to load. I’m a fan of streamlining and minimalism, so I use my CSS editor.

 

How to call up Google Fonts:

Google is really helpful with this. They write the code for you.  All you have to do is choose your font(s):

google-fonts-add-font

Then, there will be a gray box at the bottom of your page. Click to expand it, and there are instructions for using the fonts with automatically generated code. I use the @import command:

@import  “https://fonts.googleapis.com/css?family=Allura|Raleway”;

How to call in a font you’ve uploaded:

Additional Css - calling in a font@font-face {

            font-family: ADELE;

            src: url(ADELE-Light.ttf);

}

Then, you can use YOUR font like this in the same CSS window:

.genesis-nav-menu a {

            font-family: ADELE, Helvetica, Arial, sans-serif;

            color: #333;

            font-size: 18px;

            font-weight: normal;

            letter-spacing: 1px;

            padding: 15px;

}

back to top

Hiding Pinnable Images

I use CSS here, too, because there’s one less step than when you use HTML. If you’re not comfortable with this method, there’s a way to do it using HTML and the text editor in your post. The kind folks at Pinch of Yum teach you how to use HTML (special thanks to Michelle Curren at Mid-Life Blogger for the heads-up).

The way I do it uses one less step, because you’re probably already in the edit screen when you add a picture anyway.

Just add this snippet of code to your CSS:

.hiddenpinimage {

            opacity: 0;

            position: absolute;

            top: 0;

            left: 0;

            height: 0;

            width: 0;
}

Then, when you’re in your picture editor screen, add hiddenpinimage to the image CSS class area of the editor.

You don’t have to call it hiddenpinimage. You can call it Bob, or Brad (like your favorite car), or Winceslass. It only matters that what you put in the CSS Class space and what you call your CSS class is the same – so call it something you’ll remember forever.

back to top

You may find that your site traffic is better if you create jump links for readers who only want to get the meat and potatoes of your posts. For me, this is often true of my recipe posts, though I occasionally use jump links for posts like this.

You will need to be in your text editor on your post, and it needs to be the very last thing you do before you save, because WordPress will delete the code you’ve just added, as it often does.

Link Code

<p id=”top”><a href=”#your-link-name”> <h6>Jump to recipe</h6></a></p>

Target Text

<a name=”unique-name”>Target Text</a>

<a name=”unique-name”></a> – to add the link to an area without adding text

<p id=”unique-identifier”>I am the target text.</p> – you can also add it to a paragraph designator

AND getting back to the top:

 

<div id=”top”></div> or add the ID to the first header <h1 id=”top”>Page Heading</h1>

<p id=”top”></p>

<a href=”#top”>back to top</a>

Click to download the free printable to keep by your desk or on your desktop for quick copy/paste access.

Now, Pin this so you can come back to it when you’re ready (and check out all the hidden pin images below).

back to top

WordPress Hacks All Bloggers Should Know

The Little CSS Cheat Sheet for WordPress - Pin Now, Print Later a-spork-in-the-road-hidden-pin-image-one a-spork-in-the-road-hidden-pin-image-two

About Terra Walker

Terra loves creating recipes, imparting wisdom, searching for an amazing cider, owning this website, and traveling the globe. You can catch up with Terra on the channels above, where she never uses third person, because she hates writing about herself that way.

8 Comments

  1. Terra, your suggestion for hiding images is the ONLY method I have found to work all the time and every time. I see people frustrated with this all the time and I send them to you. Thank you.

  2. Thank you Terra for sharing these codes.

  3. Thanks Terra, It is so helpful to have people like you hanging out at WWO!

  4. Thank you for sharing this! I cannot wait to use these tips.

What do you think?