Query Block Test

PHP:

  1. File Names:
    • Use lowercase letters.
    • Separate words with underscores (_).
    • Example: my_custom_template.php
  2. Function Names:
    • Use lowercase letters.
    • Use underscores to separate words.
    • Be descriptive and use verbs for functions.
    • Example: get_post_title()
  3. Variable Names:
    • Use lowercase letters.
    • Use underscores to separate words.
    • Be descriptive and use nouns for variables.
    • Example: $user_id
  4. Class Names:
    • Use uppercase letters for the first letter of each word (PascalCase).
    • Be descriptive and use nouns.
    • Example: My_Custom_Class
  5. Constants:
    • Use uppercase letters.
    • Separate words with underscores.
    • Example: MY_CONSTANT_VALUE
  6. 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');
  7. Prefixes:
    • Add a unique prefix to your functions, variables, classes, etc., to avoid naming conflicts.
    • Example: myplugin_custom_function()
  8. Database Tables:
    • Use lowercase letters.
    • Separate words with underscores.
    • Be descriptive and use nouns.
    • Example: wp_my_plugin_settings

CSS/SCSS:

  1. Selectors (Classes and IDs):
    • Use lowercase letters.
    • Separate words with hyphens (-).
    • Be descriptive.
    • Example: .my-custom-container or #my-custom-element
  2. Naming for Styles:
    • Use lowercase letters.
    • Be descriptive and use hyphens to separate words.
    • Example: font-size, background-color
  3. File Names:
    • Use lowercase letters.
    • Separate words with hyphens (-).
    • Example: styles.css or main-styles.scss

JavaScript:

  1. Variable Names:
    • Use camelCase for variables.
    • Be descriptive and use nouns.
    • Example: myVariableName
  2. Function Names:
    • Use camelCase for functions.
    • Be descriptive and use verbs.
    • Example: getUserData()
  3. Object Names:
    • Use camelCase.
    • Be descriptive and use nouns.
    • Example: myObject
  4. Constants:
    • Use uppercase letters.
    • Separate words with underscores.
    • Example: MAX_VALUE
  5. Event Handlers:
    • Use camelCase.
    • Be descriptive.
    • Example: onClickHandler
  6. 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

WordPress Column Block 1/3s – Order SM 2 .order-sm-2 .order-lg-1

WordPress Column Block 1/3s – Order 1

.order-sm-1 .order-lg-2

WordPress Column Block 1/3s – Order 3

Breakpoint Box

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

        <div class="flex-row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
  flex-basis: 50%;
}

Simple Syntax

All you need to remember is row, column, content.

<div class="flex-row">
    <div class="col-xs-12">
        <div class="box">12</div>
    </div>
</div>

Offsets

Offset a column

<div class="flex-row">
    <div class="col-xs-offset-3 col-xs-9">
        <div class="box">offset</div>
    </div>
</div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="flex-row">
    <div class="col-xs">
        <div class="box">auto</div>
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="flex-row">
    <div class="col-xs">
        <div class="box">
            <div class="flex-row">
                <div class="col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="flex-row start-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.center-

<div class="flex-row center-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.end-

<div class="flex-row end-xs">
    <div class="col-xs-6">
        <div class="box">
            end
        </div>
    </div>
</div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Example
<div class="flex-row center-xs end-sm start-lg">
    <div class="col-xs-6">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.top-

<div class="flex-row top-xs">
    <div class="col-xs-6">
        <div class="box">
            top
        </div>
    </div>
</div>

.middle-

<div class="flex-row middle-xs">
    <div class="col-xs-6">
        <div class="box">
            center
        </div>
    </div>
</div>

.bottom-

<div class="flex-row bottom-xs">
    <div class="col-xs-6">
        <div class="box">
            bottom
        </div>
    </div>
</div>

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="flex-row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

.between-

<div class="flex-row between-xs">
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
</div>

Reordering

Add classes to reorder columns.

.first-

1
2
3
4
5
6
<div class="flex-row">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs">
        <div class="box">
            3
        </div>
    </div>
</div>

.last-

1
2
3
4
5
6
<div class="flex-row">
    <div class="col-xs-2 last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Reversing

.reverse

1
2
3
4
5
6
<div class="flex-row reverse">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited