adding a block with all the possible slick slider settings is a bit of a chore so the following is a way to simplify it by using data-slide attributes.
$data_slick = get_field('data_slick');
$responsive = get_field('responsive');
if ($responsive) {
$responsive = ', "responsive": [' . $responsive . ']';
} else {
$responsive = '';
}
data-slick='{<?php if ($data_slick) { echo $data_slick . $responsive; } ?>}'
c
Example field settings for data_slick text area ACF field:
“slidesToShow”: 2, “dots”: false, “slidesToScroll”: 1, “autoplay”: true, “infinite”: true, “speed”: 200, “fade”: true
Example field settings for responsive options using a text area ACF field:
{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}
or
{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}, {“breakpoint”:1000, “settings”:{“slidesToShow”: 2, “dots”: true}}
Important
don’t having trailing commas where they are not needed!
use double quotes for all properties
check that each of your settings at each of the breakpoints are being applied!
More details: https://kenwheeler.github.io/slick/
PHP:
- File Names:
- Use lowercase letters.
- Separate words with underscores (_).
- Example:
my_custom_template.php
- Function Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for functions.
- Example:
get_post_title()
- Variable Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use nouns for variables.
- Example:
$user_id
- Class Names:
- Use uppercase letters for the first letter of each word (PascalCase).
- Be descriptive and use nouns.
- Example:
My_Custom_Class
- Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example:
MY_CONSTANT_VALUE
- Hooks (Actions and Filters):
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for actions.
- Example:
add_action('init', 'my_custom_function');
- Prefixes:
- Add a unique prefix to your functions, variables, classes, etc., to avoid naming conflicts.
- Example:
myplugin_custom_function()
- Database Tables:
- Use lowercase letters.
- Separate words with underscores.
- Be descriptive and use nouns.
- Example:
wp_my_plugin_settings
CSS/SCSS:
- Selectors (Classes and IDs):
- Use lowercase letters.
- Separate words with hyphens (-).
- Be descriptive.
- Example:
.my-custom-container
or#my-custom-element
- Naming for Styles:
- Use lowercase letters.
- Be descriptive and use hyphens to separate words.
- Example:
font-size
,background-color
- File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example:
styles.css
ormain-styles.scss
JavaScript:
- Variable Names:
- Use camelCase for variables.
- Be descriptive and use nouns.
- Example:
myVariableName
- Function Names:
- Use camelCase for functions.
- Be descriptive and use verbs.
- Example:
getUserData()
- Object Names:
- Use camelCase.
- Be descriptive and use nouns.
- Example:
myObject
- Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example:
MAX_VALUE
- Event Handlers:
- Use camelCase.
- Be descriptive.
- Example:
onClickHandler
- File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example:
main-script.js
FadeInUp – delay: five second – speed: faster
FadeInUp – delay: 200 milliseconds – speed: slower
WordPress Theme
We have manay patterns and animations