#hunterthemes

Example 1: jQuery.

The first thing that we will do is create a named function. This is so that if you have infinite scroll you don’t need to write out the code twice, instead you just call the function twice. If you don’t have infinite scroll it just keeps your code organised. 

For this particular problem we will need to create two functions. One to remove photo permalinks from text-based posts and one to remove text permalinks from photo posts. 

A quick explanation: 

$(this) refers to the element you are calling the function on.

.find() does just as it says, it finds things.

'.text-permas' tells the find what to specifically find.

.remove() is again self explanitory. It just removes the elements passed to it (from .find()) from the DOM.

Next comes the actual calls to the functions. Two important points:

The functions need to be defined before you call them

The functions need to be called inside $(document).ready(function(){});

If you are already using scripts you will most likely have the document ready bit somewhere in your code already, and it’s fine to stick lines 10 and 11 in the one you already have. 

Breakdown:

The yellow text is what you want to call the function on. It needs to be an ancestor of the elements you want to remove. You can put as many classes (or id’s) as you want, just separate them with a comma. Alternatively you can just give everything additional general tags of .photo-type and .text-type and call the functions on those.

.each() does what’s inside the brackets for each occurrence of the elements in the yellow.

That’s all you need to do for a theme with no infinite scroll. 

If your theme has infinite scroll, you are going to have to call the function again in the infinite scroll’s callback, so that it runs every time a new set of posts is appended to the DOM. 

This is roughly what it looks like but it will look different for each theme (especially because I keep my infinite scroll options in a separate object). 

Breakdown:

$newElems is the object with all the elements that have just been appended to the DOM.

.find() finds the elements we want to manipulate.

Then it’s just the same as we did before.

Example 2: HTML + CSS V1

In this example, we will only use one lot of permalink HTML and style it differently for text-type and photo-type posts. 

Example of the markup:

Of course you would have all your post types where I have text and photo but I only added those two for simplicities sake.

Then you can have CSS like this: 

This sets all the permalinks to have a font size of 12px, photo and photoset permalinks to only be visible on hover and all the other permalinks to be red in colour. Of course your CSS is entirely dependent on what you are doing but something I like to do is have like and reblog buttons only visible on hover for photo type posts and have them positioned over the photo, and then for text type posts make them permanently in the bottom right corner. 

Example 3: HTML + CSS V2

The last one is very simple. You would have markup like this:

And then style your CSS however you like with these key lines: