Skip to content

Instantly share code, notes, and snippets.

@PhongGCS
Last active September 26, 2022 07:56
Show Gist options
  • Save PhongGCS/09e89ca193bfcb6c024ca02c501bd54e to your computer and use it in GitHub Desktop.
Save PhongGCS/09e89ca193bfcb6c024ca02c501bd54e to your computer and use it in GitHub Desktop.
### 1. Add style.css assets/main.js child theme
### 2. Add % giảm giá của sản phẩm
### 3. Thêm fontawesome
### 4. Thêm Theme Option ACF
### 5. Tạo Taxonomy
### 6. Lấy danh sách taxonomy theo post id (product id)
### 7. Add font face
### 8. Style accordion minus plus icon
### 9. Change Icon slider flatsome
### 10. Conver dot flatsome slider to number
### 11. List item in 3 column
@PhongGCS
Copy link
Author

Flatsome add UXbuilder for Post Type

add_action( 'init', function () {
    if ( function_exists( 'add_ux_builder_post_type' ) ) {
        add_ux_builder_post_type( 'custom_post_type' );
    }
} );

@PhongGCS
Copy link
Author

PhongGCS commented Sep 1, 2022

Thêm Theme Option ACF

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Header Settings',
		'menu_title'	=> 'Header',
		'parent_slug'	=> 'theme-general-settings',
		'capability'	=> 'edit_posts',
		'redirect'		=> false
	));
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Footer Settings',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'theme-general-settings',
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Product Settings',
		'menu_title'	=> 'Product',
		'parent_slug'	=> 'theme-general-settings',
	));
}
// ================

add_action('acf/init', 'my_acf_op_init');
function my_acf_op_init() {

    // Check function exists.
    if( function_exists('acf_add_options_sub_page') ) {

        // Add parent.
        $parent = acf_add_options_page(array(
            'page_title'  => __('Theme General Settings'),
            'menu_title'  => __('Theme Settings'),
            'redirect'    => false,
        ));

        // Add sub page.
        $child = acf_add_options_sub_page(array(
            'page_title'  => __('Social Settings'),
            'menu_title'  => __('Social'),
            'parent_slug' => $parent['menu_slug'],
        ));
    }
}

@PhongGCS
Copy link
Author

PhongGCS commented Sep 1, 2022

Tạo Taxonomy

function cs_add_taxonomy() {
	$labels = array(
		"name" => "Thương Hiệu",
		"singular" => "Thương Hiệu",
		"menu_name" => "Thương Hiệu"
	);

	$args = array(
		"labels"                     => $labels,
		"hierarchical"               => true,  // set = false để tạo tag
		"public"                     => true,
		"show_ui"                    => true,
		"show_admin_column"          => true,
		"show_in_nav_menus"          => true,
		"show_tagcloud"              => true,
	);
	register_taxonomy("thuong-hieu", "product", $args);
}
add_action( "init", "cs_add_taxonomy", 0 );

@PhongGCS
Copy link
Author

PhongGCS commented Sep 1, 2022

Lấy danh sách taxonomy theo post id (product id)

<?php $thuongHieu = get_the_terms( $post->ID, "thuong-hieu" ); var_dump($thuongHieu); ?>

@PhongGCS
Copy link
Author

Add Font face

@font-face {
    font-family: 'Imbue';
    src: url('assets/fonts/Imbue-Thin.woff2') format('woff2'),
        url('assets/fonts/Imbue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Piazzolla';
    src: url('assets/fonts/Piazzolla-Thin.woff2') format('woff2'),
        url('assets/fonts/Piazzolla-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Piazzolla';
    src: url('assets/fonts/Piazzolla-ThinItalic.woff2') format('woff2'),
        url('assets/fonts/Piazzolla-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@PhongGCS
Copy link
Author

PhongGCS commented Sep 15, 2022

Style Accordion minus plus icon

.accordion-title .toggle:before {
    content: '\f067';
    font-family: "Font Awesome 5 Free";
    opacity: 1;
}

.accordion-title.active .toggle:before {
    content: '\f068'!important;
}
.accordion-title .toggle {
     left: unset;
    right: 0;
}
.accordion .accordion-item:first-child a {
    border-top: unset !important;
}

@PhongGCS
Copy link
Author

Change icon slider flatsome

.slider-v1 .flickity-button {
    content: "";
    width: 74px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: unset;
    bottom: -60px;
}
.slider-v1 .flickity-prev-next-button:disabled, .slider-v1 button.flickity-prev-next-button[disabled]  {
    opacity: 1 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.slider-v1 .flickity-button.previous {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/previous-arrow.png");
}

.slider-v1 .flickity-button.previous:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/left-arrow-disable.png") !important;
}



.slider-v1 .flickity-button.next {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/new-arrow.png");
}

.slider-v1 .flickity-button.next:disabled {
	background-image: url("/wp-content/themes/pagoda/assets/imgs/right-arrow-disable.png") !important;
}

.slider-v1 svg {
    display: none;
}

@PhongGCS
Copy link
Author

10. Conver dot flatsome slider to number

.slider-v2 ol.flickity-page-dots li.dot {
    counter-increment: css-counter 1;
    width: 20px;
    height: 20px;
    text-align: right;
    border: none !important;
    background: none !important;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    left: 0;
    opacity: 1;
}

@PhongGCS
Copy link
Author

PhongGCS commented Sep 17, 2022

11. List item in 3 column

ul {
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    column-count: 3;
}

ul {
    display: inline-block;
    width: 100%;
    list-style: none;
    vertical-align: top;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    grid-gap: 0 2.5rem;
    -webkit-columns: 1 auto;
    -moz-columns: 1 auto;
    column-count: 1;
}

ul li {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    list-style: none;
    border-bottom: 1px dashed #cecece;
    padding-bottom: 10px;
    line-height: 1;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment