Plugin Development Output

Question

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');
?>

Answer 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