How to create a UDesign child theme?<\/h4>\n\n\n\n
UDesign provides an easy way to create child theme. You need to input child theme title and click Themes are several ways to modify core codes.<\/p>\n\n\n\n You could copy theme template files IMPORTANT NOTE:<\/strong> You could change pre-defined functions by redefining them in child theme. You could probably see some functions wrapped with Below is the example of overriding functions. Let\u2019s assume that you are going to modify Now you can copy this function in child theme and make changes to the content.<\/p>\n\n\n\n UDesign and other plugins provide many hooks ( including actions and filters ) for developers to modify core codes. You could add your codes to existing actions and filters.<\/p>\n\n\n\n What is a child theme? A child theme is a theme that can edit codes and styles from parent theme directly. Changes in child theme will remain after theme update while parent theme\u2019s changes are removed. It is a good idea to use child theme if you are facing problems that cannot be solved with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1298","post","type-post","status-publish","format-standard","hentry","category-setup-wizard-setup-wizard"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=1298"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1298\/revisions"}],"predecessor-version":[{"id":9455,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1298\/revisions\/9455"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=1298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=1298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Create<\/code> button. Then you could see UDesign Child Theme<\/code> is added and activated in Appearance > Themes<\/code> page.<\/p>\n\n\n\n![\"\"](\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2024\/03\/image-2-1024x604.png\")
How to modify codes using child theme?<\/h4>\n\n\n\n
1.) Copy template files from parent theme<\/h6>\n\n\n\n
( located in u-design\/templates directory )<\/code> or WooCommerce plugin\u2019s template files ( located in woocommerce directory )<\/code> to child theme\u2019s directory and modify them. You could copy only limited files for modification. If you copy and modify the other files except template files, changes will not affect to your site.<\/p>\n\n\n\n
Sometimes UDesign theme and WooCommerce plugin will make major changes to these files. You should keep an eye on updates and if the, copy and modify them again.<\/p>\n\n\n\n2.) Override function<\/h6>\n\n\n\n
function_exists<\/code>. And for these functions, you can do modifications. Child theme functions are loaded ahead of others, so you could create the same function in child theme and make changes to the content.<\/p>\n\n\n\nalpha_get_col_class<\/code> function. The original code ( this is from parent theme ) is like belows.<\/p>\n\n\n\n\/* This is original code *\/\nif ( ! function_exists( 'alpha_get_col_class' ) ) :\n\n\t\/**\n\t * Get column class from columns count array\n\t *\n\t * @since 1.0\n\t *\n\t * @param int[] $col_cnt Array of columns count per each breakpoint.\n\t *\n\t * @return string columns class\n\t *\/\n\tfunction alpha_get_col_class( $col_cnt = array() ) {\n\n\t\t$class = ' row';\n\t\tforeach ( $col_cnt as $w => $c ) {\n\t\t\tif ( $c > 0 ) {\n\t\t\t\t$class .= ' cols-' . ( 'min' != $w ? $w . '-' : '' ) . $c;\n\t\t\t}\n\t\t}\n\n\t\treturn apply_filters( 'alpha_get_col_class', $class );\n\t}\nendif;<\/code><\/pre>\n\n\n\n\/* This is modification code *\/\nfunction alpha_get_col_class( $col_cnt = array() ) {\n\n \/\/ your code here\n ...\n ...\n ...\n}\n<\/code><\/pre>\n\n\n\n3.) Using hooks<\/h6>\n\n\n\n
\/* Example of using hooks *\/\nadd_action( 'alpha_wc_after_notice', 'alpha_wc_notice_close', 10, 2 );\nfunction alpha_wc_notice_close() {\n\techo '<button type=\"button\" class=\"btn btn-link btn-close\"><i class=\"close-icon\"><\/i><\/button>';\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"