Skip to main content

Custom Code

Add custom JavaScript, PHP functions, and template partials.

Overview​

For advanced customization, TheDock provides editors for:

  • Custom JavaScript - Client-side functionality
  • Theme Functions - PHP functions (functions.php)
  • Theme Partials - Reusable PHP template parts

Custom JavaScript​

Accessing JS Editor​

  1. Click C. Build in navigation
  2. Click Custom JS in sidebar

Writing JavaScript​

// Wait for DOM ready
document.addEventListener('DOMContentLoaded', function() {

  // Your code here
  console.log('Theme loaded');

  // Example: Smooth scroll
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });

});

Common Use Cases​

Scroll effects:

window.addEventListener('scroll', function() {
  const header = document.querySelector('.site-header');
  if (window.scrollY > 100) {
    header.classList.add('is-scrolled');
  } else {
    header.classList.remove('is-scrolled');
  }
});

Mobile menu toggle:

const menuToggle = document.querySelector('.menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');

menuToggle.addEventListener('click', function() {
  mobileMenu.classList.toggle('is-open');
});

Third-party integrations:

// Initialize a slider library
if (typeof Swiper !== 'undefined') {
  new Swiper('.my-slider', {
    slidesPerView: 3,
    spaceBetween: 30
  });
}

Theme Functions (PHP)​

Accessing Functions Editor​

  1. Click C. Build in navigation
  2. Click Theme Functions in sidebar

This adds code to your theme's functions.php.

Writing Functions​

<?php
// Enqueue custom scripts
function my_custom_scripts() {
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

// Custom post type
function register_portfolio_post_type() {
  register_post_type('portfolio', array(
    'labels' => array(
      'name' => 'Portfolio',
      'singular_name' => 'Portfolio Item'
    ),
    'public' => true,
    'has_archive' => true,
    'supports' => array('title', 'editor', 'thumbnail')
  ));
}
add_action('init', 'register_portfolio_post_type');

// Custom shortcode
function my_button_shortcode($atts) {
  $atts = shortcode_atts(array(
    'text' => 'Click Here',
    'link' => '#'
  ), $atts);

  return '<a href="' . esc_url($atts['link']) . '" class="custom-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('my_button', 'my_button_shortcode');

Common Use Cases​

Remove WordPress features:

<?php
// Remove emoji scripts
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// Remove jQuery migrate
function remove_jquery_migrate($scripts) {
  if (!is_admin() && isset($scripts->registered['jquery'])) {
    $script = $scripts->registered['jquery'];
    if ($script->deps) {
      $script->deps = array_diff($script->deps, array('jquery-migrate'));
    }
  }
}
add_action('wp_default_scripts', 'remove_jquery_migrate');

Custom queries:

<?php
function get_featured_posts($count = 5) {
  return new WP_Query(array(
    'posts_per_page' => $count,
    'meta_key' => 'is_featured',
    'meta_value' => '1'
  ));
}

AJAX handlers:

<?php
function my_ajax_handler() {
  // Verify nonce
  check_ajax_referer('my_nonce', 'security');

  // Process request
  $response = array('success' => true);

  wp_send_json($response);
}
add_action('wp_ajax_my_action', 'my_ajax_handler');
add_action('wp_ajax_nopriv_my_action', 'my_ajax_handler');

Theme Partials​

What are Partials?​

Partials are reusable PHP template snippets that can be included in multiple templates.

Accessing Partials Editor​

  1. Click C. Build in navigation
  2. Click Theme Partials in sidebar

Creating a Partial​

<?php
// partial-social-links.php
?>
<div class="social-links">
  <a href="<?php echo get_option('facebook_url'); ?>" target="_blank">
    <i class="icon-facebook"></i>
  </a>
  <a href="<?php echo get_option('twitter_url'); ?>" target="_blank">
    <i class="icon-twitter"></i>
  </a>
  <a href="<?php echo get_option('instagram_url'); ?>" target="_blank">
    <i class="icon-instagram"></i>
  </a>
</div>

Using Partials​

In templates or other partials:

<?php get_template_part('partials/social-links'); ?>

Security Considerations​

Sanitization​

Always sanitize user input:

<?php
$safe_text = sanitize_text_field($_POST['user_input']);
$safe_email = sanitize_email($_POST['email']);
$safe_url = esc_url($_POST['website']);

Escaping Output​

Always escape output:

<a href="<?php echo esc_url($link); ?>">
  <?php echo esc_html($title); ?>
</a>

Nonces​

Use nonces for form submissions:

<?php
// In form
wp_nonce_field('my_form_action', 'my_form_nonce');

// In handler
if (!wp_verify_nonce($_POST['my_form_nonce'], 'my_form_action')) {
  die('Security check failed');
}

Best Practices​

JavaScript​

  1. Avoid global variables - Use closures or modules
  2. Check dependencies - Ensure libraries are loaded
  3. Degrade gracefully - Work without JS when possible
  4. Use event delegation - For dynamic content

PHP​

  1. Follow WordPress standards - Use WP functions
  2. Prefix functions - Avoid naming conflicts
  3. Use hooks properly - Actions and filters
  4. Keep it organized - Logical function grouping

General​

  1. Test thoroughly - All browsers, devices
  2. Document code - Comments for complex logic
  3. Backup regularly - Export code separately
  4. Version control - Track changes outside TheDock

Troubleshooting​

JavaScript not running​

  • Check browser console for errors
  • Verify script is enqueued properly
  • Check for jQuery conflicts

PHP errors​

  • Enable WP_DEBUG temporarily
  • Check error logs
  • Verify syntax is correct

Partials not loading​

  • Check file path is correct
  • Verify partial exists
  • Check for PHP errors in partial

Changes not appearing​

  • Clear caching plugins
  • Export theme
  • Hard refresh browser

← Back to Documentation