// Add support for Genesis layouts to custom post type add_post_type_support( 'munkak', 'genesis-layouts' );
Free
How to add row after every 4 col in WordPress loop
<?php
$args = array(
'post_type' => 'posttype',
'posts_per_page' => 20,
'tax_query' => array(
array(
'taxonomy' => 'taxonomy',
'field' => 'slug',
'terms' => 'terms',
),
),
);
$query = new WP_Query( $args );
$counter = 0;
$post_count = $the_query->post_count;
?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<?php
if ($counter == 0) {
echo '<div class="row">';
}
?>
<!------------------------------------->
<?php
$counter++;
if ( $counter % 4 == 0 || $post_count == $counter ) {
echo '</div> <div class="row">';
}
?>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
How to Remove Homepage Title in Storefront
Storefront Homepage Page Template
//Hide Homepage Title - Storefront Homepage Page Template
add_action( 'wp', 'wpninja_storefront_remove_title_from_home_homepage_template' );
function wpninja_storefront_remove_title_from_home_homepage_template() {
remove_action( 'storefront_homepage', 'storefront_homepage_header', 10 );
}
Storefront Default Page Template
//Hide Homepage Title - Storefront Default Page Template
add_action( 'wp', 'wpninja_storefront_remove_title_from_home_default_template' );
function wpninja_storefront_remove_title_from_home_default_template() {
if ( is_front_page() ) remove_action( 'storefront_page', 'storefront_page_header', 10 );
}
Unable to translate “Shipping” string in Checkout review table
add_filter( 'woocommerce_shipping_package_name', 'custom_shipping_package_name' );
function custom_shipping_package_name( $name ) {
return 'Szállítás';
}
How to move Genesis Nav Menu beside the logo
remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_header_right', 'genesis_do_nav' );
How to rename Posts post type in WordPress admin
/* Alapértelmezett WordPress 'Bejegyzés' átnevezése */
function revcon_change_post_label() {
global $menu;
global $submenu;
$menu[5][0] = 'Blog';
$menu[5][6] = 'dashicons-format-status';
$submenu['edit.php'][5][0] = 'Összes blogbejegyzés';
$submenu['edit.php'][10][0] = 'Új bejegyzés írása';
//$submenu['edit.php'][16][0] = 'News Tags';
echo '';
}
function revcon_change_post_object() {
global $wp_post_types;
$labels = &$wp_post_types['post']->labels;
$labels->name = 'Blog';
$labels->singular_name = 'News';
$labels->add_new = 'Új bejegyzés írása';
$labels->add_new_item = 'Új bejegyzés írása';
$labels->edit_item = 'Edit News';
$labels->new_item = 'News';
$labels->view_item = 'View News';
$labels->search_items = 'Blogbejegyzés keresése';
//$labels->not_found = 'No News found';
//$labels->not_found_in_trash = 'No News found in Trash';
$labels->all_items = 'Összes blogbejegyzés';
$labels->menu_name = 'Blog';
$labels->name_admin_bar = 'Blog';
}
add_action( 'admin_menu', 'revcon_change_post_label' );
add_action( 'init', 'revcon_change_post_object' );
How to Fix Missing Icons Bug in Simple Social Icons Plugin
1) Create a file named sprite-map.svg in yout theme folder
For example: genesis-sample/images/sprite-map.svg
2) Copy and paste this xml snippet
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="social-email" viewbox="0 0 500 600">
<path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
</symbol>
<symbol id="social-facebook" viewbox="0 0 500 600">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</symbol>
<symbol id="social-youtube" viewbox="0 0 500 600">
<path fill="currentColor" d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"></path>
</symbol>
<symbol id="social-instagram" viewbox="0 0 500 600">
<path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</symbol>
<symbol id="social-linkedin" viewbox="0 0 500 600">
<path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
</symbol>
<symbol id="social-behance" viewbox="0 0 500 600">
<path fill="currentColor" d="M232 237.2c31.8-15.2 48.4-38.2 48.4-74 0-70.6-52.6-87.8-113.3-87.8H0v354.4h171.8c64.4 0 124.9-30.9 124.9-102.9 0-44.5-21.1-77.4-64.7-89.7zM77.9 135.9H151c28.1 0 53.4 7.9 53.4 40.5 0 30.1-19.7 42.2-47.5 42.2h-79v-82.7zm83.3 233.7H77.9V272h84.9c34.3 0 56 14.3 56 50.6 0 35.8-25.9 47-57.6 47zm358.5-240.7H376V94h143.7v34.9zM576 305.2c0-75.9-44.4-139.2-124.9-139.2-78.2 0-131.3 58.8-131.3 135.8 0 79.9 50.3 134.7 131.3 134.7 61.3 0 101-27.6 120.1-86.3H509c-6.7 21.9-34.3 33.5-55.7 33.5-41.3 0-63-24.2-63-65.3h185.1c.3-4.2.6-8.7.6-13.2zM390.4 274c2.3-33.7 24.7-54.8 58.5-54.8 35.4 0 53.2 20.8 56.2 54.8H390.4z"></path>
</symbol>
</svg>
3) Call this file with an action hook in functions.php
function add_sprite_map(){
include('images/sprite-map.svg');
}
add_action('genesis_before', 'add_sprite_map');
Responsive Header Top Bar Contact Info with Icons
HTML
<ul class="top-header">
<li class="address">
<a href=""><i class="fas fa-map-marker"></i>
<span></span>
</a>
</li>
<li class="tel">
<span>
<a href="tel:"><i class="fas fa-phone"></i>
</a>
</span>
</li>
<li class="mail">
<a href="mailto:"><i class="fas fa-envelope"></i>
<span></span>
</a>
</li>
<li>
<a target="_blank" href="">
<i class="fab fa-facebook-f"></i> <span>Facebook</span>
</a>
</li>
</ul>
CSS
/* Mobile First */
.top-header li a:hover,
.top-header li a i:hover{
color: #EA6F22
}
.top-header{
display: flex;
background: #151211;
color: white;
}
.top-header {
margin-bottom: 0;
padding: 10px;
font-size: 1.6rem;
color: rgba(255,255,255,.8);
justify-content: space-around;
}
.top-header span{
display: none;
}
.top-header .fab,
.top-header .fas {
margin: 0 10px;
font-size: 3rem;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.top-header .fas,
.top-header .fab{
font-size: 1.5rem;
}
Animate SVG zoom and rotate
How to target Explorer, Safari and Edge with CSS
/*CHROME, IE*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
}
/*EDGE*/
@supports (-ms-ime-align: auto) {
}
Allow SVG upload to Media
//ALLOW SVG UPLOAD ONLY FOR ADMINISTRATORS
function cc_mime_types($mimes) {
if ( current_user_can( 'manage_options' ) ) {
$mimes['svg'] = 'image/svg+xml';
}
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
How to add ACF Google Map to frontend
Add single map marker
Add this to functions.php and replace the XXXXX to your Google Maps API key
function add_google_maps_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/js/acf-google-map.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'add_google_maps_scripts' );
//GOOGLE MAPS API KEY - Show the map in the admin
function my_acf_init() {
acf_update_setting('google_api_key', 'XXXXXXXXX');
}
add_action('acf/init', 'my_acf_init');
Add this where you want to display the map
<div class="map">
<?php $terkep = get_field('terkep');
if( !empty($terkep) ): ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $terkep['lat']; ?>" data-lng="<?php echo $terkep['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
Add this to style.css
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
/* fixes potential theme css conflict */
.acf-map img {
max-width: inherit !important;
}
Download the acf-google-maps.js here
Add multiple map marker
<?php
$args = array(
'post_type' => 'xxxxxxx',
'posts_per_page' => -1,
);
$the_query = new WP_Query($args);
echo "
<div class='map-container'>
<div class='wrap'>
<div class='acf-map'>";
while ( $the_query->have_posts() ) : $the_query->the_post();
$location = get_field('xxxxxxx');
$title = get_the_title();
if( !empty($location) ) {
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
<p class="address"><?php echo $location['address']; ?></p>
</div>
<?php
}
endwhile; echo '
</div>
</div>
</div>';
wp_reset_postdata();
How to query ACF Repeater Field
<?php if( have_rows('repeater_field_name') ): ?>
<ul>
<?php while( have_rows('repeater_field_name') ): the_row();
// vars
$content = get_sub_field('content'); ?>
<li>
<?php echo $content; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif ?>
How to add custom field to WordPress Customizer
<?php
add_action( 'customize_register', 'wts_register_theme_customizer' );
/*
* Register Our Customizer Stuff Here
*/
function wts_register_theme_customizer( $wp_customize ) {
// Create custom panel.
$wp_customize->add_panel( 'text_blocks', array(
'priority' => 500,
'theme_supports' => '',
'title' => __( 'Text Blocks', 'wts' ),
'description' => __( 'Set editable text for certain content.', 'wts' ),
) );
// Add section.
$wp_customize->add_section( 'custom_cta_title_text' , array(
'title' => __('Change CTA Title Text','wts'),
'panel' => 'text_blocks',
'priority' => 10
) );
// Add setting
$wp_customize->add_setting( 'cta_title_text_block', array(
'default' => __( 'default text', 'wts' ),
'sanitize_callback' => 'sanitize_text'
) );
// Add control
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'custom_cta_title_text',
array(
'label' => __( 'CTA Title Text', 'wts' ),
'section' => 'custom_cta_title_text',
'settings' => 'cta_title_text_block',
'type' => 'text'
)
)
);
// Sanitize text
function sanitize_text( $text ) {
return sanitize_text_field( $text );
}
}
Displaying in the Front End
<?php echo get_theme_mod( 'cta_title_text_block'); ?>
WordPress Loop by Specific Page ID
<?php $kapcsolat_query = new WP_Query(array( 'post_type' => array('page'), 'post__in' => array(760) )); ?>
<?php while ($kapcsolat_query->have_posts()) : $kapcsolat_query->the_post(); ?>
<?php endwhile; ?>
Remove only the clicked list item from unordered list – parentNode
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
listUl.addEventListener('click', (event) => {
if (event.target.tagName == 'BUTTON') {
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
});
toggleList.addEventListener('click', () => {
if (listDiv.style.display == 'none') {
toggleList.textContent = 'Hide list';
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list';
listDiv.style.display = 'none';
}
});
descriptionButton.addEventListener('click', () => {
descriptionP.innerHTML = descriptionInput.value + ':';
descriptionInput.value = '';
});
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
ul.appendChild(li);
addItemInput.value = '';
});
Add class only to clicked element with JS
jQuery(document).on('click', function() {
jQuery('.collapse').removeClass("show");
});
jQuery(".collapse").click(function(event) {
// remove classes from all
jQuery('.show').removeClass('show');
// add class to the one we clicked
jQuery('.collapse', this).addBack(this).addClass("show");
event.stopPropagation();
});
How to set featured image as background cover
Echo the return value from wp_get_attachment_image_src(). It also returns an Array(), so you need to grab the needed part from that array. In this case it’s the first/0 value. Example:
<?php $bgImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
Include tha variable inside the inline stylesheet
<section class="contact-cover" style="
background: url('<?php echo $bgImage[0]; ?>');
background-size: cover;
background-attachment: fixed;
padding: 60px 0;">
</section>