Affichage des articles dont le libellé est Awesome. Afficher tous les articles
Affichage des articles dont le libellé est Awesome. Afficher tous les articles

samedi 12 novembre 2016

10 Awesome WordPress Features That You Probably Didn’t Know Existed



WordPress comes with so many awesome features and is continuously changing. Some of these features may not get the attention they deserve and remain a little hidden. In this article, we will show you 10 awesome WordPress features that you probably didn’t know existed.


Hidden WordPress Features


1. Show/Hide Things Using Screen Options


You may have noticed the Screen Options button on some pages of your WordPress admin area. This Screen Options button allows you to show and hide items on the WordPress admin screen you are currently viewing.


Screen Options menu in WordPress


Many beginner WordPress users are unaware of this feature. It allows you to simplify your admin pages like post edit screen to meet your workflow.


2. Move, Add, or Delete Dashboard Widgets


By default, users are redirected to the dashboard page in WordPress admin area when they login. The dashboard page has several handy shortcuts pointing to different sections of your website.


Rearrange dashboard boxes


These sections are divided into different boxes called dashboard widgets. You can click on the Screen Options button to show or hide these boxes. You can also drag and drop them to rearrange items on your WordPress dashboard.


3. Paste URL to Make Links in Visual Editor


WordPress 4.5 introduced inline link editing in the visual editor.


Many users didn’t realize that instead of using a popup to paste a link, they can just select a text and press CTRL+V (Command+V on mac) to paste the URL. The visual editor automatically converts it into a link.


Select text and paste URL to create link in visual editor


4. Accessibility Mode for Widgets


We all like how easy it is to just drag and drop widgets into sidebars. However, for many users it is not easy to drag and drop things using a mouse or trackpad.


WordPress also comes with a hidden accessibility mode for widgets. This accessibility mode makes it easier to add widgets without draging and dropping the items.


Accessibility mode for widgets


Accessibility mode for WordPress widgets can be activated by clicking on Screen Options button on the Appearance » Widgets page.


5. Preview Themes Without Activating Them


Many users worry that changing their WordPress theme will have unwanted consequences for their website. Their concern is genuine, that’s why we prepared a checklist of things you must do before changing your WordPress theme.


One of the things you can do is to test the new theme without activating it. Simply install your new WordPress theme and then go to Appearance » Themes page.


Live preview theme without activating


Take the mouse to the newly installed theme’s thumbnail and then click on Live Preview button. WordPress will launch the theme customizer showing preview of your website using the new theme.


6. Edit Images in WordPress


WordPress makes it easy to add images to your posts and pages. What many beginners don’t know is that WordPress also comes with some basic image editing features.


Editing images in WordPress


Simply visit Media » Library page and then click on any image. From the image details popup you can click on the Edit Image button.


In the image editing mode, you can crop, rotate, and resize an image. You can also flip an image in horizontal or vertical directions. These image editing features come in handy when you need to quickly crop or resize a large image file directly from WordPress.


For more details, see our guide on how to crop, rotate, scale, and flip images in WordPress.


7. Split Single Post into Multiple Pages


Want to split a lengthy post into multiple pages? Simply add <!–nextpage–> tag in your post and WordPress will split it into two pages. Add the tag again if you want to split it into more pages.


post pagination


This feature is particularly helpful if you are writing an unusually lengthy article and don’t want users to scroll to much.


See our guide on how to split WordPress posts into multiple pages for more details on post pagination.


8. Embed Links, Videos, and Multimedia


WordPress automatically embeds content from some of the most popular websites like YouTube, Twitter, Instagram, etc. All you need to do is paste a URL from one of the supported sites and WordPress will automatically embed it for you.


Auto embeds in WordPress


Since WordPress 4.4, all WordPress sites have become oEmbed service providers themselves. This means you can paste URL from another WordPress site into your post and WordPress will embed the post for you.


9. Hidden Secret Options Page in WordPress


Hidden options page in WordPress


WordPress comes with a hidden master page for all your blog options. This page is hidden because users can easily mess things up here, so we don’t want you to use it. But you should definitely check it out. You can access it by visiting this URL:


http://example.com/wp-admin/options.php


Replace example.com with your own domain name. You will see a page with a long list of options. For more details see our guide on the hidden secret options page in WordPress.


10. Markdown and Keyboard Shortcuts Help you Write Faster


Most WordPress users spend more time writing content than anything else on their site. This is is why WordPress developers are always trying to improve the writing experience in WordPress.


WordPress comes with a whole range of keyboard shortcuts that you can use to write faster. Apart from these shortcuts, you can also use Markdown like formatting shortcuts. Just enter the formatting shortcuts and WordPress will convert them into HTML.


Text pattern shortcuts in WordPress



  • Using * or will start an unordered list.

  • Using 1. or 1) will start an ordered list.

  • Using # will transform into h1. ## for h2, ### for h3 and so on.

  • Using > will transform into blockquote.


You can also disable these formatting shortcuts if you want.


We hope this article helped you discover some awesome WordPress featured that you probably didn’t know about. You may also want to see our list of 10 WordPress plugins that will quickly help you get more traffic.


If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.


The post 10 Awesome WordPress Features That You Probably Didn’t Know Existed appeared first on WPBeginner.







WordPress Tutorial: How To Create An Awesome Page Flip Plugin



alt="WordPress Tutorial: How To Create An Awesome Page Flip Plugin" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/0611-3-500x402_c.jpg" />

Note: We no longer support this WP plugin as the author is not writing for us for now. 

Starting today, every week we’ll feature an awesome coding tutorial, teaching you how to do custom stuff using WordPress, from basic to advanced. Today we’ll create a plugin (so you’ll learn the basic steps on this) to generate a “page flip” gallery, using JS.

I bet you’ve seen one of those in your early web days, but those were mostly done using flash, which now is quite of deprecated (it still has its value, but it’s not the best option for this kind of thing anymore).

The basic functionality will be create a new href="http://www.turnjs.com/#samples/html5">type of gallery based on a few images and their sizes, via shortcode.

Let’s get started then!

Zip & Install

The best way to see it in action is installing it yourself. You can href="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/flipbook-gallery.zip">download it here. Install and activate the plugin, then all you need to do is to add the shortcode in a page, like this:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width="300" height="225" display="double"]

Quick Preview

And this is the kind of result that you’ll get:

class="aligncenter size-full wp-image-1731" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/0611-2.jpg" alt="Flipbook Effect " width="600" height="223" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/0611-2.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/06/0611-2-300x111.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

But what sort of black magic goes on there? Well, it’s quite simple actually. Let’s learn how to create something like this.

The Header

First of all you’ll need to create a new folder and a new .php file. At this point it would be awesome if you have a test environment, so you can break and test stuff.

The file and folder should have a simple and unique name, so you’ll avoid conflict with existing plugins. Then the basic content of our file is something like this:

/*
    Plugin Name: FlipBook Gallery
    Description: Create a shortcode for flipbook galleries.
    Version: 1.0
    Author: Web Revenue Blog
    License: GPL2
*/

Pretty simple, huh? Once you create this file you’ll see your plugin in the list under WP admin > Plugins, and you can activate it (but if you only have this content in your file it won’t change a lot your site).

Calling scripts

Now we need to include some important external assets here. The required external files for basic functionality are:

  • jQuery (1.9+)
  • Turn.js script
  • Turn basic styling

If you simply add the script and style tags there you’ll have some issues. For instance, the double jQuery call will probably break your site. Also WordPress itself won’t “know” that you’ve created those items, so if a different plugin calls turn.js again or a different styling it’ll break your site.

That’s why we should always use the wp_enqueue_script and wp_enqueue_style functions. Here is the basic usage:

function plugin_scripts( ) {
    wp_enqueue_script('jquery');
    wp_enqueue_script('turn', plugins_url( 'js/turn.js' , __FILE__ ), array('jquery'), '1.3', false);
    wp_enqueue_style('turnCSS', plugins_url( 'css/style.css' , __FILE__ ), false, '1.3', 'all' );
}

We are calling external items in 3 different ways, here they are:

  • Calling an existing item: jQuery – We don’t need to pass a lot of parameters if we know for sure that WordPress already load this script, we’re just telling him “Dude, this script MUST be here otherwise our code won’t work”
  • Creating a new script – you’ll need to pass some attributes like name, file location, required items (in this case it requires jQuery), version, and if it’s loaded in the footer or header (false = header, true = footer)
  • Creating a new style – Pretty much the same as the previous one, with a small difference in the last attribute, that says which media type this style if for

One of the important things you should consider when you’re calling external scripts is if there is more code that will depend on this plugin. That is basically what defines if your file will be called in the header or footer.

In our case, we have some additional scripts to set up the gallery only when its HTML is created, and that will be added in the body. This is why we MUST add this script in the head, otherwise when our code is called the “turn” function is not there yet.

After this nice code we need to tell WordPress to load those as scripts, the action “wp_enqueue_scripts” will do this:

add_action('wp_enqueue_scripts', 'plugin_scripts');

The Shortcode

Let’s start with the action to create the shortcode. It’s quite simple, you just need to add the shortcode trigger, and the function that will be executed:

add_shortcode("flip_book","create_flip_book");

Now we need to create our function and get our attributes. But some of the attributes can be optional, which means that we’ll need to create default values for them. We could create a lot of if’s there testing if the attribute is empty, but this is one of the cases where ternary operation is better than the regular if call.

Ternary operations are kind of if statements directly in variable’s value. If follows this structure:

$variable = ( CONDITION ) ? "VALUE IF CONDITION IS TRUE" : "VALUE IF CONDITION IS FALSE";

You can see them in action in the first part of our function:

function create_flip_book( $attr ) {

    //Preparing the IDs to be processed
    $array['ids'] = explode(" ",$attr['ids']);

    //display mode
    $array['display'] = empty( $attr['display'] ) ? "single" : $attr['display'];//standard value

    //width
    $array['width'] = empty( $attr['width'] ) ? 400 : $attr['width'];

    //height
    $array['height'] = empty( $attr['height'] ) ? 300 : $attr['height'];
    //HTML and the rest of the code goes here
}

Then we’ll need to create the HTML, and the basic call for our images. Another important point here is to adjust the size if we’re using magazine style (it should be 2x the width since we’ll have 2 images instead of one):

<?php
    if ( $array['display'] == "double" ) {
        $array['width'] = $array['width'] * 2;
    }
    // HTML, JS and Black Magic
?>
<div id="flipbook">
    <?php
        for( $i = 0; $i < sizeof( $array['ids'] ); $i++ ) {
    ?>
        <div>
            <?php
                echo wp_get_attachment_image( $array['ids'][$i], 'full' );
                if( $array['display'] == "single" ) {
            ?>
                <span><?="".($i+1)?>/<? echo "".sizeof($array['ids'])?></span>
            <?php
                } else {
            ?>
                <spanright" : "left");
                ?>">
                <?php
                    echo "".($i+1)?>/<? echo "".sizeof($array['ids']);
                ?>
                </span>
            <?php
                }
            ?>
        </div>
    <?php
        }
    ?>
</div>
<script type="text/javascript">
    jQuery("#flipbook").turn({
        width: <?php echo $array['width']; ?>,
        height: <?php echo $array['height']; ?>,
        autoCenter: true,
        display: '<?php echo $array['display']; ?>',//single page or double page
        acceleration: true,
        gradients: ! jQuery.isTouch,
    });
</script>

What do you think?

Now you can tweak and modify this as you want, adding more options (check out their awesome examples for more inspiration), adjusting what doesn’t work for you, or combining this with other plugins.

Do you have any WordPress concept you want to learn a little bit more? Maybe something you want to learn how to do? Let us know via comments and we’ll be glad to include this in a future post!


Page 20 – Web Hosting Secret Revealed