1

I'm trying to put together a plugin of the onScrollBlur effect seen on Medium.

At the moment I am trying to get output of the HTML via a shortcode, but I'm outputting nothing - including the JS and CSS files.

I'm not a PHP specialist, just trying to get a bit better.

<?php
/**
* Plugin Name: OnScrollBlur
* Plugin URI: http://antpowerwebdevelopment.com
* Description: Medium/Twitter style Image Header onScrollBlur,great stylish header for your new build
* Version: 1.0.0
* Author: Ant Power
* Author URI: http://antpowerwebdevelopment.com
*
*/
?>
<?php

// register jquery and style on initialization
add_action('init', 'register_script');
function register_script(){
  wp_register_script( 'script_js', plugins_url('/js/script.js'));
  wp_register_style( 'style_css', plugins_url('/css/style1.css'));
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
  wp_enqueue_script('script_js');
  wp_enqueue_style( 'style_css' );
}

add_action( 'admin_menu', 'register_onScrollPage' );
function register_onScrollPage(){
  add_menu_page( 'onScrollBlur', 'onScrollBlur', 'manage_options',   'onScrollBlur_admin-menu', 'onScollBlur_configure', plugins_url( 'myplugin/images/icon.png' ), 6 );
}

function onScrollBlur(){
  ?>
  <div class='blurImg'>
    <div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
    <div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
  </div>
  <header>
    <div>
      <h1>
        Medium
      </h1>
      <p>
        Everyone’s stories and ideas
      </p>
      <a href='https://medium.com/' title='Medium'>Learn more</a>
    </div>
  <?php
}

add_shortcode('onScrollBlur1', 'onScrollBlur');
?>
1
  • Everything is working fine, bar the shortcode outputting the HTML. Once I get output, I need to interpolate custom images, title, tagline etc..So the site builder can upload easily. I need to do this via a GUI and output the custom content via the shortcode.
    – Ant Power
    Commented Jul 19, 2016 at 1:58

1 Answer 1

1

It appears you are missing your plugin folder when enqueueing your scripts. plugins_url outputs the URL to your wp plugins folder it does not include your custom plugin folder.

wp_register_script( 'script_js', plugins_url('/YOUR_FOLDER/js/script.js')); // Add your plugin folder
wp_register_script( 'script_js', plugins_url('/js/script.js',__FILE__)); // Let php add your folder

Also you don't need to register your scripts / styles first you can just enqueue them straight up. Registering them first is only useful if they are dependencies of other scripts.

Eg.

add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
  wp_enqueue_script( 'script_js', plugins_url('/js/script.js', __FILE__ ) );
  wp_enqueue_style( 'style_css', plugins_url('/css/style1.css', __FILE__ ) );
}

And now for your shortcode output you need to capture the output with the php function ob_start()

function onScrollBlur(){
  ob_start();
  ?>
  <div class='blurImg'>
    <div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
    <div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
  </div>
  <header>
    <div>
      <h1>
        Medium
      </h1>
      <p>
        Everyone’s stories and ideas
      </p>
      <a href='https://medium.com/' title='Medium'>Learn more</a>
    </div>
  <?php
  return ob_get_clean();
}

You can read more about the Shortcode API here: https://codex.wordpress.org/Shortcode_API#Output

2
  • Thanks Nath I've done both of those things and got output. The hard bit lies ahead where I need to replace the content with user uploaded custom content via the plugin admin page itself. Do you know of any good pointers there, docs, links, tutorials etc....
    – Ant Power
    Commented Jul 19, 2016 at 2:44
  • developer.wordpress.org/plugins/settings/settings-api - Should have everything you need for that.
    – ngearing
    Commented Jul 19, 2016 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.