Solution to order pages/posts specific by id in array with WP Query

Have you had problem with not getting the specific posts displaying in the order you have wanted it to be. Normally the Wordpress WP Query is sorted by the post title but what if you don't want to order the query and just have it "un-ordered", the way you write the id's to be.

The solution to this problem is to order your result with the pages to get.

$you_query = new WP_Query(array('post_type' => 'page', 'post__in' => 'array(12, 10, 18, 22)', 'orderby' => 'post__in'));

So that's how you order your result with your array or string of posts. No manual need of ordering or any other hassling.

Bootstrap navbar as your Wordpress menu

Do you want to use the bootstrap navbar as a menu in Wordpress? No problems. It takes just a few seconds to config.

What we want to achieve is to use the bootstrap navbar. No plugin is required but we need to download the helper file to achieve this. That one is called wp-bootstrap-navwalker - "A custom Wordpress walker to implement the Twitter Bootstrap dropdown navigation using the Wordpress built in menu manager." That can be found here and the direct download location of the navbar here. Just note that this is for bootstrap 3.0+ and if you have the legacy version (2.3.2) then you need another version of the helper.

Include the file from your functions.php-file. The file should be placed somewhere in your theme-folder.

require_once('wp_bootstrap_navwalker.php');

Then you need to update your wp_nav_menu() in your theme.

    wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );

"primary" is the name of your menu that you have probably already defined somewhere in your functions.php-file but if you don't have done that this is how you could do it:

register_nav_menus( array(    'primary' => __( 'Primary menu', 'yourthemename' ),) );

That's it. But you may need to put some surrounding code to get the appearance you look for. It could be something like this in the source of your theme-file:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"><nav>    <div class="container">        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>        </div>
        <?php            wp_nav_menu( array(                'menu'              => 'primary',                'theme_location'    => 'primary',                'depth'             => 2,                'container'         => 'div',                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',                'menu_class'        => 'nav navbar-nav',                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',                'walker'            => new wp_bootstrap_navwalker())            );        ?>    </div></nav></div>

Heads up! This menu does only support 2-level of depths. Check out the links above to learn more about the navbar.

Custom image sizes missing in the media up-loader in Wordpress administration

Does your Wordpress media uploader in the administration miss the custom images sizes that you have configured? Don't worry.

In Wordpress 3.5 something seemed to have changed and any custom image sizes weren't available to select when inserting an image to a post or page. I really don't know what have changed but I know the solution and it's quite simple.

The thing you need to do is to create an filter in your functions.php that modify the Wordpress built-in function "image_size_names_choose()" and add all your custom image size to the "list".

Add this following code to your functions.php-file:

function my_custom_sizes( $sizes ) {    return array_merge( $sizes, array(        'custom-300' => __('Custom 300')    ) );}add_filter( 'image_size_names_choose', 'my_custom_sizes' );

That's it!

And if your don't remember how to add a custom image size in Wordpress. It's simple. Add this code to your functions.php-file:

add_image_size( 'custom-300', 300, 300 );

Change or modify elements in the content in Wordpress

Have you ever wanted to change the output of a Wordpress page or a post? Maybe modify the H1-elements in the content or something else. The solution is quite simple to achieve this.

Lets say we wanted to add something, in this case a header-element before the H1-element and a closing one right after. This is how you do it:

Put this code below in your functions.php-file:

function filter_h1_pages( $content ) {
$content = str_ireplace( '<h1>', '<header><h1>', $content ); return str_ireplace( '</h1>', '</header></h1>', $content );}add_filter( 'the_content', 'filter_h1_pages' );

What the code does is replacing a string with something else, twice and then return it. So we have filtered the main function the_content in Wordpress.