Öncelikle editörünüzün eklentiler bölümünde WordPress diye aratıp hazır snippetsları ekleyin. VS Code için şu eklenti gayet iyi

https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet

Sürekli kullandığımız ve aklımızda kalmayan ya da yazmaya üşendiğimiz kodları bu tür bir programda saklıyoruz. Ya da editörününüzün snippets bölümünü kullanabilirsiniz.

Şu an bende mevcut olan snippetslar şu şekilde:

Tüm kod parçacıkları

WP Snippets

Kses

HTML içeriğindeki izin verdiğiniz tagleri çıktı veriyor.

$allowed_tags = array(
	‘div’      => array(
		‘class’ => array()
	),
	‘a’      => array(
		‘href’ => array()
	),
);

echo wp_kses( $content , $allowed_tags );

İçinde data olan değişkeni translate’i mümkün olacak hale getirmek

printf(
    ' or <a href="%s">%s</a>',
    esc_url( 'mailto:info@example.com', array( 'mailto' ) ),
    esc_html__( 'Email', 'text-domain' )
);

Child Theme

Child Theme’i plugin ile kuruyorum ama kurduktan sonra function sayfasını bu şekilde değiştiriyorum

<?php
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// AMC CUSTOMIZED

// Child Styles

function amc_child_styles() {
	wp_enqueue_style( 'amc-child-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
}

add_action( 'wp_enqueue_scripts', 'amc_child_styles' );

// AMC CUSTOMIZED FINISH

Remove Action

function remove_example_action(){
	remove_action( 'wp_enqueue_scripts', 'wplook_css_include' );
	remove_action('wp_enqueue_scripts', 'wplook_scripts_include');
}
add_action( 'wp_loaded', 'remove_example_action' );

Script Enqueue etme

wp_enqueue_script( 'pho-child-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

CSS Snippets

SVG’yi Background’a ekleme

	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 26px;
	height: 26px;
	background: url(img/link.svg) center;
	background-size: 100% !important;
	background-repeat: no-repeat;

Responsive Viewports

@media only screen and (min-width: 480px) and (max-width: 767px) {


@media (max-width: 480px) { ... }


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }