Docs

[necxelos]

Hello everyone

Before I start with questions, a little disclaimer:
a) I work on Localhost for now so I can’t show You my site directly. I’ll try to make my questions as detailed as possible.
b) I have Child Theme ready (I use the one downloaded from Your section instead of setting up my own).
c) Currently I’m working using Integrity Stack but this will probably change at some point so I’ll be gratefull for answers that are stack-independent whenever possible.

(If possible, please answer to my questions using my post structure so I can easily find what is what.)

1. How can I keep all the blog post formating (the one I used writing the post – I refer to bolds/italics, new line marks and every possible shortcode I come up with) on the blog/category archive page (the page that shows title and first few sentences of every post).

2. How can I disable the red overlay (red rectangle border) that sometimes shows around any link/button I click on the site and vanishes after clicking empty space anywhere. If You didn’t encounter this before I can provide a screen.

3. How can I change default on-hover effect on featured image of a blog post (effect plays on blog/category archive pages). Preferably I’d like to use some pseudo animation instead (like for example image zooming in or out slowly) but if that’s not possible I’d settle for changing the “white chains inside colored circle” icon to a text of my own or icon of my own and changing color of (currently black) darkening effect.

4. How can I add my own images (AKA icons) in front of main menu buttons. For example (stereotype but shows well what I need to do) little house image in front of Homepage button. Image is supposed to be a part of button.
4′. Is it possible to have such images in front of lower level menu items aswell? I’m talking expandable menu lower level items.

Thanks in advance for answers and good day to You all

[Christian]

Hey there,

The answer would be stack dependent as stacks are designed differently.

1. In Appearance > Customize > Blog > Content, turn on Full Post Content on Index

2. Please add the code in your Appearance > Customize > Custom > Global CSS

a:focus {
outline: 0;
}

3. For changing the chain icon to text, add the code below in the Global CSS

.entry-thumb:before {
    content: "text";
}

For image, use the code below and change the URL to your own image.

.entry-thumb:before {
    content: url(http://icons.iconarchive.com/icons/tinylab/android-lollipop-apps/32/7-Minutes-icon.png);
}

4. You can use HTML in the Navigation Label (applies to all menu including submenu) so you can add an image. Insert the code below in the navigation label (see attachment). Replace IMAGE_URL with your image’s URL.

<img src="IMAGE_URL">

Hope that helps. 🙂

[necxelos]

1. First test using Integrity – it kinda works, but doesn’t exactly do what I asked.

This option forces whole post to show up in blog page thus overriding the excerpt functionality. I only want to keep the text formating in the excerpt, not to get rid of the excerpt functionality completely.

2. Looks like this does the job. Thank You 🙂

3. Several issues I encountered:
a) Red circle is still there, both in text variant and image variant.
b) Image darkening effect (which is probably black partially-transparent rectangle) is still there.
a&b) How to get rid of both and/or change their colors?
c) Should I assume that avoided part (on-hover effects like zoom-in/zoom-out or move-to-the-sides or whatever) is impossible to do?

4. Works like a charm (sort of). Thank You 🙂

One tiny issue though: code jumps above the Navigation Label label and splits randomly across several rows of text making it completely unreadable. I assume it’s WordPress limitation not Theme limitation but just to be sure I’ll ask: is there any other (cleaner) way to do it?

Best Regards

[Friech]

Hi There,

#1 That is a native WordPress behaviour it automatically strip HTML tags on the except. You might want to add manually your excerpt on the except field to keep its formatting.

http://prnt.sc/c6p7y4

#3 You can add this under Custom > CSS in the Customizer. This should remove the black mask and the link icon on hover and do the zoom-in effect.

.entry-thumb {transition: all .2s ease-in-out;}
.entry-thumb:hover {transform: scale(1.1);}
a.entry-thumb:hover img {opacity: 1;}
a.entry-thumb:hover:before {opacity: 0;}

#4 Im not certain about the issue, would you mind providing us some screenshort. But you should able to use the <img> tag on the menu without issue because that is acceptable. You might want to add a class to that menu item so it can be easily targeted with CSS later when adjusting the image.

Hope it helps, Cheers!

[necxelos]

1. Technically it does the job, but if I ever wanted to change something I’d end up editing gazilion posts on per-post basis which sounds like nightmare.

I found some snippets to disable trimming on some forums though. They all look similar to this one:

function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    //Retrieve the post content. 
    $text = get_the_content('');
     $text = strip_shortcodes( $text );
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
 
    // the code below sets the excerpt length to 55 words. You can adjust this number for your own blog.
    $excerpt_length = apply_filters('excerpt_length', 55);
 
    // the code below sets what appears at the end of the excerpt, in this case ...
    $excerpt_more = apply_filters('excerpt_more', ' ' . '...');
 
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = force_balance_tags( $text );
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
 
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');

Important question though is if adding this to my finctions.php will somehow interfere with X Theme (which have it’s own way of changing default excerpt length for example – maybe other things too)?

3. Awesome, getting closer. I’ll split this into 2 parts now to focus on 2 parts of the question separately:
a)

.entry-thumb {transition: all .2s ease-in-out;}
.entry-thumb:hover {transform: scale(1.1);}

This part of snippet is awesome and even works with other CSS transformations. The only thing I need now is having this effect contained inside original image size (so in case of Your exact snippet I’d have zooming effect with image size staying the same instead of image overflowing and covering everything around it).
b)

a.entry-thumb:hover img {opacity: 1;}
a.entry-thumb:hover:before {opacity: 0;}

What exactly is this mask of Yours: ss it an image that can be changed or is it code-generated geometry? In both cases my questions are:
– Will just making it transparent affect performance? If I understand correctly effect is still playing, just being invisible, right?
– Can I edit this original effect? If it’s an image, can it be switched to other image, if it’s code-generated geometry can I change it’s colors (red and black) or even shapes?

4. Screenshot added as an attachment. I added images both before and after the label. As You see reading those is a nightmare and editing in this tiny textbox even worse. Can this addition be made inside some file in normal code editor instead of here?

Thanks in advance again and have a nice evening 🙂
Also sorry for very in-depth questioning but I’m both an amateur in html/css/php editing and also a very fast learner. This being said I prefer to completely understand every issue and how it is made right instead of blindly copy-pasting snippets without knowing what they do 🙂

[Rue Nel]

Hello There,

Thanks for the updates!

1] You can use the code to extract all the shortcodes and generate a raw excerpt content. One drawback is that, the excerpt length will be from the code and no longer be from the customizer settings built with X. If you feel comfortable with the code and have a full control over the excerpt length which you can easily set in the code thus removing the option go here and there just the set the length.

3] You must update the css code and use this instead:

.has-post-thumbnail .entry-featured {
  position: relative;
  overflow: hidden;
}

.entry-thumb {
  transition: all .2s ease-in-out;
}
.entry-thumb:hover {
  transform: scale(1.1);
}

a.entry-thumb:hover img {
  opacity: 1;
}

a.entry-thumb:hover:before {
  opacity: 0;
}

Since it is using css, it is not utilizing too much performance. This is one of the strengths of CSS animations. It doesn’t affect performance. Unless other wise, you will have moe and more effects that might conflict and results to a performance issue.

4] This is what WordPress has provided us. Only a field to enter a text for the label. If in any case we will add something more like what you are doing, we will be compromising the result. You can also get rid of adding the code and make use of a custom css. You can just simply use this instead:

.x-navbar .desktop .x-nav>li.menu-item-158 a:before,
.x-navbar .desktop .x-nav>li.menu-item-158 a:after {
    display: inline-block;
    padding: 0 5px;
}

.x-navbar .desktop .x-nav>li.menu-item-158 a:before {
    content: url("http://placehold.it/10x10/ff00");
}

.x-navbar .desktop .x-nav>li.menu-item-158 a:after {
    content: url("http://placehold.it/10x10/fff000");
}

Noticed that in the css we use .menu-item-{#}. This is the menu item ID. To find the menu item ID, please right click on the page on your site and select “inspect element” and scroll down until you find code like this.

You can also go to Appearance > Menus and hover your mouse pointer over the Remove or Cancel link for each menu item.<br>

Hope this helps. Please let us know how it goes.

[necxelos]

1. In the end I used:

function wpse_allowedtags() {
    // Add custom tags to this string
        return '<script>,<style>,<br>,<em>,<i>,<ul>,<ol>,<li>,<a>,<p>,<img>,<video>,<audio>';
    }

if ( ! function_exists( 'wpse_custom_wp_trim_excerpt' ) ) : 

    function wpse_custom_wp_trim_excerpt($wpse_excerpt) {
    global $post;
    $raw_excerpt = $wpse_excerpt;
        if ( '' == $wpse_excerpt ) {

            $wpse_excerpt = get_the_content('');
            $wpse_excerpt = strip_shortcodes( $wpse_excerpt );
            $wpse_excerpt = apply_filters('the_content', $wpse_excerpt);
            $wpse_excerpt = str_replace(']]>', ']]>', $wpse_excerpt);
            $wpse_excerpt = strip_tags($wpse_excerpt, wpse_allowedtags()); /*IF you need to allow just certain tags. Delete if all tags are allowed */

            //Set the excerpt word count and only break after sentence is complete.
                $excerpt_word_count = 75;
                $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
                $tokens = array();
                $excerptOutput = '';
                $count = 0;

                // Divide the string into tokens; HTML tags, or words, followed by any whitespace
                preg_match_all('/(<[^>]+>|[^<>\s]+)\s*/u', $wpse_excerpt, $tokens);

                foreach ($tokens[0] as $token) { 

                    if ($count >= $excerpt_word_count && preg_match('/[\,\;\?\.\!]\s*$/uS', $token)) {
                    // Limit reached, continue until , ; ? . or ! occur at the end
                        $excerptOutput .= trim($token);
                        break;
                    }

                    // Add words to complete sentence
                    $count++;

                    // Append what's left of the token
                    $excerptOutput .= $token;
                }

            $wpse_excerpt = trim(force_balance_tags($excerptOutput));

                $excerpt_end = ' <a href="'. esc_url( get_permalink() ) . '">' . '&nbsp;&raquo;&nbsp;' . sprintf(__( 'Read more about: %s &nbsp;&raquo;', 'wpse' ), get_the_title()) . '</a>';
                $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); 

                //$pos = strrpos($wpse_excerpt, '</');
                //if ($pos !== false)
                // Inside last HTML tag
                //$wpse_excerpt = substr_replace($wpse_excerpt, $excerpt_end, $pos, 0); /* Add read more next to last word */
                //else
                // After the content
                $wpse_excerpt .= $excerpt_end; /*Add read more in new paragraph */

            return $wpse_excerpt;   

        }
        return apply_filters('wpse_custom_wp_trim_excerpt', $wpse_excerpt, $raw_excerpt);
    }

endif; 

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'wpse_custom_wp_trim_excerpt');

It’s from http://stackoverflow.com/questions/24151161/how-to-prevent-wordpress-from-stripping-html-tags-in-excerpt here so seems reliable. And most importantly: it works!!

Will it interfere with anything else than excerpt length? I can live with seting this 1 parameter there.

3.
a) Works like a charm, Thank You! 🙂
b) “Can I edit this original effect? If it’s an image, can it be switched to other image, if it’s code-generated geometry can I change it’s colors (red and black) or even shapes to different ones?”
I’m asking because I consider mixing 2-3 effects there (this zoom’ish thing, light mask and black text).

4. Awesome, You’re the best! That’s exactly what I needed. Clean and readable so I can easily edit it sometime later if I feel like I want to. 🙂

[Joao]

Hi There,

You should be fine, if you notice something please let us know and we will try to help you.

Thanks

Joao

[necxelos]

Only
3.
b)
is left.

Thanks in advance 🙂

[Rad]

Hi there,

It’s not an image nor geometry. It’s just opacity that animates using transition. The effects are limited too, and I’ll explain it through CSS comments.

/* this is responsible for the animation, ALL means animation all possible style like color, transform, etc. */
.entry-thumb {transition: all .2s ease-in-out;}

/* change the scale when hovered, hence animate the size */

.entry-thumb:hover {transform: scale(1.1);}

/* the container could have a background image where the image looks transparent, hence, upon hover let's remove the transparency 1 = 100% opaque */

a.entry-thumb:hover img {opacity: 1;}

/* this then changes the opacity of this element that blocks the display between container and image */

a.entry-thumb:hover:before {opacity: 0;}

What you need to change is your image’s container background and size.

.entry-thumb {
background-color: #000;
border-radius: 100px;
}

/* make the container and image rounded, or circle if image is square (100x100) */
.entry-thumb, .entry-thumb img {
border-radius: 100px;
}

Hope this helps.

[necxelos]

I get it now, Thanks: Red Circle is just another layer of background (with maxed border-radius) and chain symbol is some strange icon behaving like text (colorable).

Are there more icons like those in Theme that I can use? Where do they come from? Seems pretty neat to be able to use colorable icons like those instead of images…

[Rad]

Hi there,

They are font awesome, and by using their icon codes.

http://fontawesome.io/cheatsheet/

Hence, they are actually texts but just symbol. Would you mind providing your site’s URL, I can provide the sample.

Thanks!

[necxelos]

One simple issue with the new Excerpt-Making code (I’m pasting my actual version that I use below):

function wpse_allowedtags() {
    // Add custom tags to this string
        return '<script>,<style>,<br>,<em>,<i>,<ul>,<ol>,<li>,<a>,<p>,<img>,<video>,<audio>,<strong>';
    }

if ( ! function_exists( 'wpse_custom_wp_trim_excerpt' ) ) : 

    function wpse_custom_wp_trim_excerpt($wpse_excerpt) {
    global $post;
    $raw_excerpt = $wpse_excerpt;
        if ( '' == $wpse_excerpt ) {

            $wpse_excerpt = get_the_content('');
            $wpse_excerpt = strip_shortcodes( $wpse_excerpt );
            $wpse_excerpt = apply_filters('the_content', $wpse_excerpt);
            $wpse_excerpt = str_replace(']]>', ']]>', $wpse_excerpt);
            $wpse_excerpt = strip_tags($wpse_excerpt, wpse_allowedtags()); /*IF you need to allow just certain tags. Delete if all tags are allowed */

            //Set the excerpt word count and only break after sentence is complete.
                $excerpt_word_count = 75;
                $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
                $tokens = array();
                $excerptOutput = '';
                $count = 0;

                // Divide the string into tokens; HTML tags, or words, followed by any whitespace
                preg_match_all('/(<[^>]+>|[^<>\s]+)\s*/u', $wpse_excerpt, $tokens);

                foreach ($tokens[0] as $token) { 

                    if ($count >= $excerpt_word_count && preg_match('/[\,\;\?\.\!]\s*$/uS', $token)) {
                    // Limit reached, continue until , ; ? . or ! occur at the end
                        $excerptOutput .= trim($token);
                        break;
                    }

                    // Add words to complete sentence
                    $count++;

                    // Append what's left of the token
                    $excerptOutput .= $token;
                }

            $wpse_excerpt = trim(force_balance_tags($excerptOutput));

                $excerpt_end = '<p class="read_more_alternative"> [&emsp;. . .&emsp;] </p> <p class="read_more_text"> To read more, click the Featured Image or Post Title </p>';
                $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); 

                //$pos = strrpos($wpse_excerpt, '</');
                //if ($pos !== false)
                // Inside last HTML tag
                //$wpse_excerpt = substr_replace($wpse_excerpt, $excerpt_end, $pos, 0); /* Add read more next to last word */
                //else
                // After the content
                $wpse_excerpt .= $excerpt_end; /*Add read more in new paragraph */

            return $wpse_excerpt;   

        }
        return apply_filters('wpse_custom_wp_trim_excerpt', $wpse_excerpt, $raw_excerpt);
    }

endif; 

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'wpse_custom_wp_trim_excerpt');

As it is now, the code rounds the excerpt up to a semi-full sentence, leaving . , ; ! ? at the end, while the default setting in Your theme breaks the sentence in whatever place the word limit tells it too, leaving … at the end.

I managed to disable rounding-up to the semi-full sentence by changing this part:

if ($count >= $excerpt_word_count && preg_match('/[\,\;\?\.\!]\s*$/uS', $token)) {
                    // Limit reached, continue until , ; ? . or ! occur at the end
                        $excerptOutput .= trim($token);
                        break;
                    }

To this:

if ($count >= $excerpt_word_count) {
                    // Limit reached, continue until , ; ? . or ! occur at the end
                        $excerptOutput .= trim($token);
                        break;
                    }

But I can’t find a way to bring back the … at the end.

Thanks in advance 🙂

[Rad]

Hi there,

What page where … is not appearing? Please note that excerpt more is not applicable to manually added excerpt. But you can change your code to something like this forcing the … be added at the end,

Move this code, at the end before “return” then append the excerpt at the end.

$excerpt_end = '<p class="read_more_alternative"> [&emsp;. . .&emsp;] </p> <p class="read_more_text"> To read more, click the Featured Image or Post Title </p>';
$excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); 

Example,

$excerpt_end = '<p class="read_more_alternative"> [&emsp;. . .&emsp;] </p> <p class="read_more_text"> To read more, click the Featured Image or Post Title </p>';
$excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); 

return apply_filters('wpse_custom_wp_trim_excerpt', $wpse_excerpt, $raw_excerpt).$excerpt_more;

Hope this helps.

[necxelos]

I’m only using classic posts (for now), no portfolios, no galleries and other stuff so let’s just focus on that. In default mode (before manually added excerpt) posts on Blog and Archive Pages had … at the end of an excerpt.

So all I need to do is force-add those … at the end of an excerpt, that’s all 🙂

Your code didn’t do anything btw.

[Author]

Posts