Skip to main content
Log in
K

KopylovVitalik

@KopylovVitalik·37 public vizzes

Loading thumbnail…

Gist a5ce2774787d98318606f5268f81e59c

This example visualizes a WordPress installation’s file system and directory structure, specifically highlighting the FTP configuration constant `FS_METHOD` set to `direct`. The visualization uses a force-directed graph built with `d3.forceSimulation` to position nodes representing files and folders, while `d3.geoPath` renders the connecting paths. The data appears hard-coded from the gist’s source, showing a hierarchy with the `define('FS_METHOD', 'direct')` line as a central node linked to related FTP and WordPress configuration entries.

Jan 28, 2021
Loading thumbnail…

Gist 940d9e28b4c94f7fea376c678e767261

This visualization shows a WordPress maintenance-mode message displayed as a stark red alert, blocking site access for unauthorized users. It renders a static HTML page with inline CSS styling via a PHP function, rather than using a JavaScript visualization library. The code checks user capabilities and login status with `current_user_can` and `is_user_logged_in`, then outputs the message using `wp_die` hooked into `get_header`. No data source or rendering framework is involved, as the example relies purely on server-side PHP and browser-rendered HTML.

Jan 25, 2021
Loading thumbnail…

Gist b5b8edf3c69e48faad50da2fbd60456f

This example builds an interactive visualization of a network graph using D3.js. It applies a force-directed layout with `d3.forceSimulation` and `d3.forceLink` to position nodes and edges based on simulated physical forces. The graph displays circular nodes and curved links, with node size and color encoding additional attributes from the dataset. The code includes a PHP debug helper function, suggesting the data is processed server-side before being passed to the client for rendering.

Jan 15, 2021
Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

Nov 18, 2020
Loading thumbnail…

Gist 95caa5a3cc0b546ba00efcf8ed574a3d

This example demonstrates a WordPress navigation menu filter that removes cyclical links by replacing anchor tags with non-link spans. The code hooks into the `wp_nav_menu` filter and applies a PHP regular expression via `preg_replace` to match `<a>` elements containing `aria-current="page"` and convert them to `<span>` elements with the same attribute. This prevents the current page from being rendered as a clickable link, effectively eliminating self-referencing navigation entries. The implementation relies on WordPress's `add_filter` API and requires PHP's regex engine to identify and transform the markup.

Nov 18, 2020
Loading thumbnail…

Gist c74189a31788f3b07d62c559357ffeef

This example shows a WordPress code snippet that restricts access to the WordPress REST API. It uses the `rest_authentication_errors` filter hook to deny requests from unauthenticated users, returning a `WP_Error` with a 401 status unless the request URI contains "contact-form-7". The code checks the global `$wp_json_basic_auth_error` variable and incorporates a custom authentication check using `is_user_logged_in()` and `strpos()` on the server request URI.

Oct 26, 2020
Loading thumbnail…

Gist d7d415d1f3401d7b9d482f01706d1b72

This example demonstrates a WordPress code snippet that delays the loading of embedded iframe content on single post pages. The PHP filter modifies the post’s content by replacing standard `iframe` `src` attributes with a custom `data-iframe-src` attribute, while the accompanying JavaScript—executed after a 1.3-second timeout—uses `querySelectorAll` to reassign the original `src` to each element via `frame.dataset.iframeSrc`. This technique postpones third-party widget rendering (such as video embeds) to prioritize initial page load, without relying on any external JavaScript libraries or APIs.

Oct 26, 2020
Loading thumbnail…

Gist bb286172022e9e29f5d0fba33df092f6

This example demonstrates a full-width WordPress page layout template, defining a PHP template for posts, pages, categories, and videos. The code sets a template name and restricts its use to specific post types. It uses standard WordPress template hierarchy and conditional logic, with the PHP file structure serving as the primary mechanism. The visualization here is the resulting web page layout, which relies on WordPress’s built-in template system rather than external charting or data libraries.

Oct 9, 2020
Loading thumbnail…

Gist 367a00c4facccefe2f33a0ef0cd374eb

This example shows a WordPress site sending HTTP `Last-Modified` headers based on the most recent post modification time. For singular pages and archive views, it extracts `post_modified_gmt` from the current post or the first post in the loop, formats it as an RFC 2822 date, and sends it via PHP’s `header()` function. The code also checks `HTTP_IF_MODIFIED_SINCE` and returns a `304 Not Modified` status for logged-out visitors when the content has not changed, while skipping execution for admin or AJAX requests.

Oct 8, 2020
Loading thumbnail…

Автоматическое добавление атрибута nofollow ко всем внешним ссылкам в постах

This example demonstrates a WordPress PHP filter that automatically adds the `rel="noreferrer noopener nofollow"` attribute and `target="_blank"` to all external links within post content. It uses the `preg_replace_callback` function to scan for anchor tags, then applies regular expressions to check for existing `rel` attributes and the site’s own URL. The code hooks into the `the_content` filter via `add_filter`, processing HTML and modifying link markup to prevent search engines from following external links.

Oct 8, 2020
Loading thumbnail…

Restrict tag creation

This example shows a WordPress snippet that restricts editors from creating new post tags. It hooks into the `pre_insert_term` action, which fires before a term is inserted, and checks the current user’s role against the taxonomy. If the taxonomy is `post_tag` and the user has the `editor` role, it returns a `WP_Error` object, preventing the tag creation and displaying a custom permission message. The code uses `wp_get_current_user()` to access the user’s roles array and the `add_action` function with a priority of 10 and two accepted arguments.

Sep 7, 2020
Loading thumbnail…

Gist 11fa5eff13d1bb06b8c00164ef9c0351

This example shows a WordPress filter that controls search engine indexing for author pages, blocking specific authors from being crawled. The code uses the WordPress `add_filter` function with the `wpseo_robots` hook to override the robots meta tag. It checks if the current author ID matches a hardcoded list of 17 user IDs, and if so, returns `'noindex, nofollow'` to prevent search engines from indexing those pages. The filter is written in PHP and relies on the WordPress `is_author()` conditional tag to detect the author archive context, using a numeric array of excluded author IDs as the data source.

Sep 2, 2020
Loading thumbnail…

Gist e8b9d80ee94b66b0f0841e786da0d172

This visualization demonstrates how to extend WordPress’s MIME type validation to support WebP image uploads. It shows a code snippet that defines a custom function, `webp_upload_mimes`, which adds the `webp` extension with its associated MIME type to the existing allowed upload types. The example relies on WordPress’s `add_filter` function and the `mime_types` filter hook to modify the system’s default behavior. The code is written in PHP and presents a direct, filter-based approach for integrating WebP support into a WordPress media library.

Sep 2, 2020
Loading thumbnail…

Custom post_per_page

This example shows how to customize the number of posts displayed on different WordPress pages using the `pre_get_posts` action hook. It sets `posts_per_page` to 8 for the home page, 4 for search results, and 15 for the “novosti” page, while commented-out code hints at potential archive and category-specific adjustments. The code defines a `custom_posts_per_page` function that checks WordPress conditional tags like `is_home()`, `is_search()`, and `is_page()`, then modifies the main query object accordingly. It relies entirely on WordPress core APIs, including `$query->set()` and `add_action()`, with no external libraries or rendering involved.

Jul 30, 2020
Loading thumbnail…

Gist 76524cc382ca870dfbf872fd3c003d68

This visualization displays the time elapsed since a WordPress post was published, formatted as a human-readable string in Russian. It calculates the difference between the post’s publication timestamp and the current server time, then outputs the result using the `human_time_diff` function. The rendering relies on standard PHP and WordPress APIs within a template context, with no interactive or graphical elements beyond the textual output. The example demonstrates a simple server-side approach to relative time formatting, directly embedding the result into the page’s markup.

Jul 29, 2020
Loading thumbnail…

Gist 9a926ef0219e7b50d71a33ceae04c99e

This example demonstrates a WordPress content-cleaning routine that strips inline styling, removes font tags, and deletes empty HTML elements from posts. It shows how the `the_content` filter hook modifies page output for single posts and the homepage. The code uses the `add_filter` API with a custom `clean_post_content` function, applying regular expressions via `preg_replace` and a string translation with `strtr` to sanitize markup before rendering.

Jul 1, 2020
Loading thumbnail…

Gist 0f60f320de06daf6e3d383d3f91f0088

This visualization showcases a typographic effect where a word is split into individual characters and rendered as a split-text animation using the Nunjucks templating engine to generate the phrase "Начать торговлю на" combined with post metadata. The code builds a series of `<span>` elements for each character, styling them with the class `link__char` to enable per-letter manipulation. The example relies on template looping and string splitting to prepare the text for d3.js or CSS-driven transitions, though the actual motion logic is not visible in the provided snippet.

Jun 30, 2020
Loading thumbnail…

Gist a3008238e5a13ba6b6d46e0c53687342

This example demonstrates WordPress SEO canonical URL handling for paginated pages through a PHP snippet. It shows how to enforce the first page URL as the canonical link for all paginated views, overriding the default per-page canonical generated by Yoast SEO. The implementation uses the `wpseo_canonical` filter with a callback function, while conditionally applying it via `is_paged()` and registering it through `wpseo_head`. The code relies on WordPress core functions like `get_pagenum_link()` and the `add_filter()` API to modify SEO output.

Jun 22, 2020
Loading thumbnail…

Gist a8b13a2c8fa9122cb5cfd663f61f15ba

This example demonstrates a WordPress plugin that automatically limits a post slug to three words by cutting it at the third hyphen during post saving. The code hooks into the `save_post` action and uses the functions `get_post_field`, `wp_update_post`, and `wp_is_post_revision` to modify the post name. The slug’s text is split into an array with `explode`, and the first three segments are recombined and assigned via the `post_name` field. The action is temporarily removed and re-added to prevent an infinite loop during the update.

Jun 19, 2020
Loading thumbnail…

Gist cb09210b412a2bce44aad4f310499d47

This example presents a network visualization built with D3.js, using the `d3.forceSimulation` API to position nodes and links. It displays interconnected data points rendered as circles and lines, with the simulation handling collision detection and link forces. The code also incorporates CSS styling rules that affect text wrapping and overflow within a `.generic-content` paragraph container, though this appears to be a styling detail rather than the core graph structure. The visualization shows a dynamic, force-directed layout where node positions update over time based on physical simulation parameters.

Jun 10, 2020
Loading thumbnail…

Gist 67badef3655577f9aff44e57c0e7d8c0

This WordPress PHP snippet implements a post view counter by storing counts in post metadata. Two functions handle the logic: `getPostViews()` retrieves the current count and returns a formatted string, while `setPostViews()` increments the count and updates the stored value via the WordPress metadata API functions `get_post_meta`, `add_post_meta`, `update_post_meta`, and `delete_post_meta`. The code also removes the default `adjacent_posts_rel_link_wp_head` action to prevent prefetching from artificially inflating the view count. The example demonstrates a simple server-side approach to tracking content engagement without external analytics libraries.

Jun 3, 2020
Loading thumbnail…

Gist fa954043cfef0a0c69112a156ff518c2

This example is a CSS code snippet that addresses a mobile browser viewport bug. The code demonstrates a workaround for iPhones where the CSS `100vh` unit incorrectly calculates the viewport height, failing to account for the browser's bottom menu overlay. The fix is implemented by declaring a `min-height` property twice on the `body` element: first with the standard `100vh` value, and then with the `-webkit-fill-available` value for WebKit-based browsers. Additionally, the `html` element receives a `height` of `-webkit-fill-available` to ensure full-page coverage.

May 20, 2020
Loading thumbnail…

Gist 3bf5c7b97e895c836f9afa2f1766cae6

This interactive visualization plots a directed graph from a sample dataset, revealing clusters and connections between nodes. It uses Fruchterman-Reingold force simulation via D3.js to position the nodes, with links drawn as curved paths. The visualization actively demonstrates the force-directed layout algorithm, as users can drag and move the points, causing the entire network to reorganize around the new positions.

May 9, 2020
Loading thumbnail…

Gist ad405e427fedfdfff3b391b2488371c8

This example demonstrates how to dynamically replace Yoast SEO title placeholders with actual post data for display in a visualization. It shows the process of retrieving a custom title from post metadata, falling back to default SEO title settings or the post title if none exists, then applying variable substitution. The code uses WordPress functions like `get_post_meta()`, `wpseo_replace_vars()`, and `get_option()` to handle the logic, ultimately echoing the final processed title. The rendering approach relies on server-side PHP within a WordPress environment, not on client-side visualization libraries.

May 8, 2020
Loading thumbnail…

Gist 07ca6cc26c417f58a0e493bf3033a731

This visualization demonstrates the process of migrating WordPress media files by comparing two directory structures in a network graph. The code uses D3.js to render nodes and edges, with a force-directed layout that shows the relationship between the old `uploads/2020/05/01` path and the new `img` folder location. Using `d3.forceSimulation` and color-coded connections, it illustrates the conversion workflow, including the creation of the `img` folder and the search-and-replace operations that update file references in the database. Data is sourced from the gist’s own code snippet.

May 7, 2020
Loading thumbnail…

Gist a9a28ae7918d9806bc45f4b440a0bca6

This example demonstrates a practical vanilla JavaScript replacement for jQuery’s `index()` and `eq()` methods, showing how to locate an element’s position among its siblings and select a specific node by index. The code uses `document.querySelectorAll('.class')` to fetch all elements with that class, then sets the text content of the first matching element to `1254` via `[0].textContent`, mirroring `eq(0)`. It also defines a helper function, `getNodeindex`, that spreads `elm.parentNode.children` into an array and calls `indexOf(elm)` to return the element’s zero-based index, replicating `index()`. The example highlights modern DOM traversal techniques without external libraries.

Apr 15, 2020
Loading thumbnail…

Gist bd978df74840af0f424ab50974f8489a

This example demonstrates how to integrate a specific version of jQuery with WordPress and Webpack. It shows two configuration steps: first, deregistering the default WordPress jQuery in `functions.php` via `wp_deregister_script` and an `init` action, and second, excluding jQuery from the bundle using `externals` in `webpack.config` while injecting it with `webpack.ProvidePlugin`. The code also references registering a newer jQuery version through WordPress hooks.

Apr 15, 2020
Loading thumbnail…

Gist 94b07d6a1293b38ee46ae6841ae7f4bd

This example visualizes a force-directed network using a custom D3.js simulation. It draws nodes and edges on an HTML canvas, with node positions computed via a spring-electric force model. The code implements a custom `forceSimulation` API, integrating a cooling factor to stabilize the layout. The visualization renders a graph of interconnected data points, whose source is a hardcoded dataset, and uses the canvas `getImageData` method to apply a blur effect to the nodes.

Apr 13, 2020
Loading thumbnail…

Gist b23ebd1ed7b066c110c5ded977c11136

This example shows a WordPress PHP snippet that retrieves category information by slug or name and constructs a link to that category. The code uses the WordPress functions `get_cat_ID`, `get_category_by_slug`, and `get_category_link` to fetch the category object, extract its ID, and generate the corresponding URL. It highlights a practical workflow for handling taxonomy links dynamically within a WordPress theme or plugin, such as for a crypto dictionary section.

Apr 13, 2020
Loading thumbnail…

Gist 47b05c7f60a5f52c48bd1c97aa3b7a62

This example presents a custom data visualization centered on a WordPress post thumbnail, extracting its ID, alt text, and title through PHP functions. The display likely focuses on the image's metadata presentation, using the WordPress API to retrieve and showcase these details. The code relies on standard WordPress functions like `get_post_thumbnail_id()`, `get_post_meta()`, and `get_the_title()` to fetch and render the information. The visualization appears to be a straightforward metadata viewer, likely displaying the image’s alternative text and title alongside its identifier, without incorporating any advanced JavaScript libraries or rendering frameworks.

Apr 13, 2020
Loading thumbnail…

Gist d1ce1ab648a5dc4f38686ee05426ff2c

This example demonstrates a WordPress content filter that cleans up post output by removing empty paragraph tags. It shows the difference between raw content with superfluous `<p></p>` elements and the sanitized version after processing. The code uses the `add_filter` and `the_content` hooks from the WordPress API, along with the `force_balance_tags` function to ensure HTML tag balance, and a regular expression with `preg_replace` to strip any empty paragraphs containing only whitespace or non-breaking spaces. The visualization likely contrasts these before-and-after states.

Apr 7, 2020
Loading thumbnail…

Gist 08a85737c01bc51262bd481fbef6eabc

This example demonstrates a WordPress search behavior that automatically redirects to a single post when a search query returns exactly one result. The code uses WordPress hooks, specifically `add_action` with `template_redirect`, and checks the global `$wp_query` object to verify the post count. If the condition is met, it calls `wp_redirect()` with the permalink of that post and halts execution with `die`. The implementation relies on WordPress core APIs rather than external visualization libraries, showcasing a practical server-side logic pattern for improving search user experience.

Apr 7, 2020
Loading thumbnail…

Gist 8996e99323835c6726c458f94a895281

This example demonstrates a WordPress redirect system that forces all incoming URLs to lowercase. It shows how a site can enforce consistent URL casing by intercepting requests before page rendering. The code uses the `template_redirect` action hook to check whether the requested URI differs from its lowercase version, and if so, issues a 301 redirect using PHP’s `header()` function. The redirect constructs the new location by combining the site’s home URL, the `HTTPS_HOST` server variable, and the lowercased request URI. This approach ensures search engines and users are permanently directed to canonical lowercase paths, preventing duplicate content issues.

Apr 7, 2020
Loading thumbnail…

Gist cf1dfcccebf56e2735ac39eabbac8281

This example demonstrates how to enable WordPress page excerpts by adding post type support for the 'excerpt' feature. The code hooks into the WordPress 'init' action and calls `add_post_type_support` for the 'page' post type, making excerpt fields available on page editing screens. It uses the WordPress Plugin API's `add_action` function to register the callback. The snippet is intended for theme or plugin developers who need to display page summaries without custom fields or additional database queries.

Apr 7, 2020
Loading thumbnail…

Simple custom CheckBox component for Vue.js, compatible with v-model.

This example demonstrates a custom CheckBox component for Vue.js that integrates seamlessly with `v-model` for both single-value and array-based (multi-select) bindings. The component uses Vue’s `model` option, `props` like `value`, `modelValue`, `trueValue`, and `falseValue`, and emits a `change` event to update the bound data. It renders a stylized checkbox with hidden native input, custom `checkmark` styling via scoped PostCSS, and supports hover and checked states with a green accent color. The code shows array handling through `includes`, `push`, and `splice` methods.

Nov 23, 2019
Loading thumbnail…

fresh block

This interactive line chart visualizes water level data for the Syla River across several dates in June 2018. A single green path, created with `d3.line`, traces the values, while red strokes outline the line. The SVG rendering uses `d3.select('svg')` and appends the path along with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a TSV file via `d3.tsv`, and dates are parsed with `d3.timeParse` before being mapped through `d3.scaleTime` and `d3.scaleLinear`.

Jun 27, 2018
Loading thumbnail…

Add new google fonts to Visual Composer Custom Heading

This example shows how to extend Visual Composer’s built-in Google Fonts list by registering a custom font family through a WordPress filter. The code defines a `helper_vc_fonts` function that constructs a font object with properties like `font_family`, `font_types`, and `font_styles`, then appends it to the existing `$fonts_list` array. It relies on the `vc_google_fonts_get_fonts_filter` hook and the `esc_html_e` localization function. The implementation uses PHP only, with no JavaScript libraries, and returns the modified list to add Poppins with multiple weights to the editor’s font selector.

Sep 19, 2016