• 1. Как написать плагин для WordPress
• 2. Как написать short-code для WordPress
• 3. Как написать виджет для WordPress

---

Виджет должен отображаться на определенной странице нюанс первый

Сначала определяем класс виджета Sum.php, затем регистрируем его и определяем hook (полный текст виджета можно посмотреть на gitHub).

add_action( 'widgets_init', 'register_lisette_cost_calculator_sum_widget' );
function register_lisette_cost_calculator_sum_widget() {
    register_widget('Lisette_Cost_Calculator_Sum' );
}
class Lisette_Cost_Calculator_Sum extends WP_Widget {
    ...
}

Виджет должен отображать html код во frontend и backend. Что именно отображать определяют методы wedget и form соответственно.

  public function widget( $args, $instance ) {
      ...
  }
  public function form( $instance ) {
      ...
  }

В методе form определяются параметры виджета (нам нужен только заголовок). Заполненные поля проходят проверку и санацию в методе update.

В методе widget определяется, что будет выводиться в области виджетов для посетителей сайта. Нам важно, чтобы виджет отображался только на той странице, где будет размещен калькулятор стоимости заказа (на других страницах в нем просто нет смысла). Поэтому в начале виджета добавлена следующая проверка.

public function widget( $args, $instance ) {
    // show widget only on page cost-calculator
    $pagename = get_query_var('pagename');
    if ( is_page() && $pagename == 'cost-calculator' ) {

Виджет должен оставаться на месте при прокрутке нюанс второй

Во-первых нужно в конструкторе добавить css класс для обертки виджета.

public function __construct() {
    // add class for wrapping div
    $widget_ops  = [
        'classname' => 'fixed-box fixed',
    ];
    $control_ops = [];
    parent::__construct(
        'lisette_cost_calculator_sum',
        'Lisette_CC Sum',
        $widget_ops, $control_ops
    );
}

Во-вторых, нужно определить этот класс в таблице стилей css/fixed.css.

.fixed-box {
    height: 60px;
    width: 305px!important;
}
.fixed-div {
    height: 60px;
    width: 100%;
}
.fixed {
    position: fixed;
    z-index: 9999;
}

и подгрузить эту таблицу, вместе с jQuery кодом js/fixed.js, который отвечает за то, чтобы блок с текущей ценой оставался на месте.

$(document).ready(function($) {
    $nav = $('.fixed-div');
    $nav.css('width', $nav.outerWidth());
    $window = $(window);
    $h = $nav.offset().top;
    $window.scroll(function() {
        if ($window.scrollTop() > $h) {
            $nav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
        }
    });
});

Полный текст виджета и плагина в целом можно посмотреть на gitHub.

Заключение

Плагин Lisette-cost-calculator обозримый, функциональный и может помочь разобраться с тем, как писать плагины для WordPress.