Posted on

Display cleaner excerpts – get rid of all shortcodes in excerpts

CategoriesBack End, Development, WordPress Functions and Hooks

If you want to simply get rid of all shortcodes in excerpts, try this:

add_filter('pre_excerpt_content', 'shortcodes_trim');
function shortcodes_trim($content) {
	$content = preg_replace('/\[.*?\]/s', '', $content);
	return $content;
}

For Divi Page Builder, use this:

add_filter('pre_excerpt_content', 'trim_divi_shortcodes');
function trim_divi_shortcodes($content) {
    $content = preg_replace('/\[\/?et_pb.*?\]/', '', $content);
    return $content;
}

For Visual Composer, use this:

add_filter('pre_excerpt_content', 'trim_vc_shortcodes');
function trim_vc_shortcodes($content) {
    $content = preg_replace('/\[\/?vc.*?\]/', '', $content);
    $content = preg_replace('/\[\/?mk.*?\]/', '', $content);
    return $content;
}
Posted on

get_the_content() WITH formatting

CategoriesBack End, Development, WordPress Functions and Hooks

Normally the get_the_content() tag returns the content without formatting. I found out a solution to make get_the_content() tag return the same content as the_content().

For me and others that can be a problem if you expect them to behave the same. I looked into the WordPress core and found a solution. Put this code into your functions.php in your theme folder.

function get_the_content_with_formatting ($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	return $content;
}

In your theme, call the function within the loop:

Posted on

WordPress – Add Author Profile Fields

CategoriesBack End, Development, WordPress Functions and Hooks
function wpb_new_contactmethods( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
//add Facebook
$contactmethods['facebook'] = 'Facebook';

return $contactmethods;
}
add_filter('user_contactmethods','wpb_new_contactmethods',10,1);

Find our more tips and tricks – 32 Extremely Useful Tricks for the WordPress Functions File: http://www.wpbeginner.com/wp-tutorials/25-extremely-useful-tricks-for-the-wordpress-functions-file/

Posted on

Flexbox – the same columns height

CategoriesCSS, Development, Front End

Make Bootstrap Columns All the Same Height

HTML:

<div class="container">
<div class="row is-flex">
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 1</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 2</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Ttitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a class="btn btn-primary" href="#">Link 3</a></div>
</div>
</div>
</div>

CSS:

.row.is-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

Solution 2 using table

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

More Different Tricks on How to Make Bootstrap Columns All the Same Height: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Posted on

Horizontal full width menu

CategoriesCSS, Development, Front End

Add a horizontal menu displaying on the full container width.

HTML and WordPress menu function:

CSS code:

ul#horizontal-menu-list {
	display: table;
	width: 100%;
	padding: 60px 0;
	margin-left: 0;
}
ul#horizontal-menu-list li {
	display: table-cell;
}
ul#horizontal-menu-list li:first-child a {
	text-align: left;
}
ul#horizontal-menu-list a {
	display: block;
	border: 0;
	text-align: center;
	margin: 0 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #777;
}
Posted on

Set the same boxes height on page

CategoriesCSS, Development, Front End

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);