Slim Select with WordPress.org API

Slim select is an excellent library for select field type. There are rich API to implement many features. Code below is a example of selecting the the WordPress themes from WordPress.org with its API. https://slimselectjs.com/options

Thumbnail

// js
import SlimSelect from "slim-select";

/**
   * 佈景主題下拉選單
   */
  new SlimSelect({
    select: '#selectTheme',
    searchingText: 'Searching...',
    searchText: 'No results, you can click right button to add new one if you want!',
    placeholder: 'Choose one',
    ajax: function (search, callback) {
      if (search.length < 3) {
        callback('Need 3 characters')
        return
      }

      // Perform your own ajax request here
      fetch('https://api.wordpress.org/themes/info/1.1/?action=query_themes&request[search]='+ search +'&request[per_page]=99')
        .then(function (response) {
          return response.json()
        })
        .then(function (json) {
          let data = []
          for (let i = 0; i < json.themes.length; i++) {
            data.push({ value: json.themes[i].slug, text: json.themes[i].name })
          }
          callback(data)
        })
        .catch(function (error) {
          callback(error)
        })
        
    },
    addable: function (value) {
      // return false or null if you do not want to allow value to be submitted
      if (value === 'fuck') { return false }

      // Return the value string
      return value // Optional - value alteration // ex: value.toLowerCase()
    }
  });

Tags:

Video player with custom play button

Thumbnail

.uk-position-relative(style="padding-top: calc(700 / 1280 * 100%)")
  a.uk-position-center.btn-video-control(href="#" style="background-image: url(<?php echo get_template_directory_uri(); ?>/assets/img/home-video_play-btn.svg);z-index: 20;")
  video.uk-position-center.uk-width-1-1(src="<?php echo esc_url(get_field('core_video')['url']); ?>" uk-video="autoplay: false" loop="" poster="<?php echo get_template_directory_uri(); ?>/assets/img/default_image.png")
.btn-video-control { display: block; width: 147px; height: 147px; background-position: 0 0; background-repeat: no-repeat; background-size: cover; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; }
.btn-video-control.active { background-position: 0 -147px; opacity: 0; }
.uk-position-relative:hover .btn-video-control.active { opacity: 1; }
@include mq(640px){
  .btn-video-control{width: 50px; height: 50px;}
  .btn-video-control.active {background-position:0 -50px}
}
const is_mobile = window.matchMedia("(max-width: 640px)"),
  is_tablet = window.matchMedia("(max-width: 960px)");

Array.from(vars.btnVideoControl).forEach(element => {
  element.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    let video = e.currentTarget.parentNode.querySelector('video');
    (video.paused) ? video.play() : video.pause();
    if (!is_mobile.matches) { e.currentTarget.classList.toggle('active') }
    e.preventDefault();
  })
});

Single Post Navigation

Thumbnail

// <PageNav>
.uk-margin-top.uk-margin-bottom
  .uk-grid-collapse.uk-padding.uk-padding-remove-horizontal.uk-child-width-1-2.uk-grid-divider.grid-divider-secondary(uk-grid)
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-left.uk-text-secondary(uk-icon='icon:chevron-left; ratio: 2;' style='left: -.5rem;')
          .uk-grid-small.uk-margin-left(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') PREV | 上一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') PREV | 上一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') AA
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-right.uk-text-secondary(uk-icon='icon:chevron-right; ratio: 2;' style='right: -.5rem;')
          .uk-grid-small.uk-margin-right(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m padding-remove-left-s')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') NEXT | 下一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') NEXT | 下一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') BB
// </PageNav>
.uk-grid-divider.grid-divider-secondary > :not(.uk-first-column)::before {
  border-color: $global-secondary-background;
}

<div class="uk-margin-top uk-margin-bottom">
  <div class="uk-grid-collapse uk-padding uk-padding-remove-horizontal uk-child-width-1-2 uk-grid-divider grid-divider-secondary" uk-grid="">
    <div>
      <?php if(get_previous_post()): ?>
      <a href="<?php echo esc_url(get_previous_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-left uk-text-secondary" uk-icon="icon:chevron-left; ratio: 2;" style="left: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-left" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_previous_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">PREV | 上一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">PREV | 上一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_previous_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
    <div>
      <?php if(get_next_post()): ?>
      <a href="<?php echo esc_url(get_next_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-right uk-text-secondary" uk-icon="icon:chevron-right; ratio: 2;" style="right: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-right" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_next_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m padding-remove-left-s">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">NEXT | 下一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">NEXT | 下一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_next_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
  </div>
</div>

Responsive fullwidth navbar

Thumbnail

// <pageNav>
.scrollbar-hide(style='overflow: scroll')
  ul.uk-flex.uk-flex-left
    each j in i.nav
      li(style='width: 260px;')
        a.uk-text-bold.uk-display-block.uk-button.button-gray.uk-text-nowrap(class=j.class href=j.href style='letter-spacing: 1.6px; ')=j.text
// </pageNav>
.button-gray {
  background-color: #edeff1;
  line-height: 50px;
  font-size: 1rem;
  border-right: 1px solid #d7d9db;
  &:hover {
    background-color: $global-secondary-background;
    color: #fff;
  }
}
.button-active {
  background-color: $global-primary-background;
  color: #fff;
}

Footer with mega menu

Organize sub menu with menu_item_parent.

Thumbnail

// <footerNav>
.uk-background-primary
  p.uk-text-center.text-white.uk-padding-default-top
    a(href='#top' uk-scroll)
      img.text-white(src='img/icon-backtotop.svg' uk-svg)
  .uk-container.uk-padding
    // <nav>
    .uk-grid-match.grid-divider-first.uk-margin-medium-bottom(uk-grid class='uk-child-width-1-5@m uk-child-width-1-2')
      each i in footer
        each j in i.nav
          div
            section
              h3.text-medium.uk-text-bold.text-white(style='letter-spacing: 1.8px; margin-bottom: 25px;')=j.title
              ul.uk-list()
                each k in j.navItems
                  li.uk-margin-default-bottom
                    a.text-small.text-white.link-secondary(href=k.href style='letter-spacing: 1.4px')=k.text
    // </nav>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <navPolicy>
    nav.uk-navbar-container.uk-flex-wrap(uk-navbar="")
      .uk-navbar-left
        ul.uk-navbar-nav.navbar-divider
          each i in footer
            each j in i.navPolicy
              li
                a.text-white.link-secondary(href=j.href style='letter-spacing: 1.6px;')=j.title
      .uk-navbar-right
        ul.uk-navbar-nav
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:facebook;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:twitter;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:linkedin;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:youtube;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:pinterest;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:google;ratio:1.2')
    // </navPolicy>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <copyRight>
    .uk-flex.uk-padding-small.uk-padding-default-top.uk-padding-remove-bottom.uk-flex-middle.uk-flex-wrap(class='uk-flex-between@s uk-flex-center')
      a(href='#')
        img(src='img/logo.jpg')
      p.uk-display-block(class='uk-hidden@s' style='width:100%;') &nbsp;
      p.uk-text-right.text-white.text-xsmall(class='uk-text-right@s uk-text-center') Copyright © Pools Corp. All rights reserved.
    // </copyRight>
// </footerNav>
.footer {
  .uk-navbar-container {
    padding: 62px 0;
    @include mq-m{
      padding: 30px 0;
    }
  }
  .uk-navbar-container:not(.uk-navbar-transparent) {
    background: transparent;
  }
  .uk-navbar-nav>li>a {
    min-height: auto;
    padding:0 26px;
    @include mq-s{
      padding: 0 10px;
    }
    @include mq(375px){
      font-size: rem(12px);
    }
  }
  .uk-navbar-right{
    .uk-navbar-nav>li>a {
      padding: 0 11px;
    }
  }
  @include mq-s {
    .uk-navbar-left,
    .uk-navbar-right {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

<div class="uk-grid-match grid-divider-first uk-margin-medium-bottom uk-child-width-1-5@m uk-child-width-1-2" uk-grid="">
  <?php foreach(wp_get_nav_menu_items('footer') as $nav): ?>
  <?php if($nav->menu_item_parent === '0'): ?>
  <div>
    <section>
      <h3 class="text-medium uk-text-bold" style="letter-spacing: 1.8px; margin-bottom: 25px;">
        <a class="text-white" href="<?php echo esc_attr($nav->url); ?>"><?php echo esc_attr($nav->title); ?></a>
      </h3>
      <ul class="uk-list text-white">
        <?php foreach(wp_get_nav_menu_items('footer') as $i): ?>
        <?php if($i->menu_item_parent != 0 && $nav->ID == $i->menu_item_parent): ?>
        <li class="uk-margin-default-bottom"><a class="text-small text-white link-secondary" href="<?php echo $i->url; ?>" style="letter-spacing: 1.4px"><?php echo $i->title; ?></a></li>
        <?php endif; ?>
        <?php endforeach; ?>
      </ul>
    </section>
  </div>
  <?php endif; ?>
  <?php endforeach; ?>
</div>

Tags:

User Login Modal

Thumbnail

Pug
// <ModalLogin>
#modalLogin.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close, style='color: #222')
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 會員登入
      div.uk-width-5-6.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key.svg', uk-svg, style='opacity: .3;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px; font-size: 1rem; font-weight: bold') 立即登入
        .uk-margin
          p.uk-text-center.text-xsmall 或
          p.uk-text-center.text-xsmall 使用以下社群帳號登入
          .uk-margin
            a.uk-button.uk-button-large.uk-width-1-1.uk-flex.uk-flex-middle.uk-flex-center(style='color: #fff; background-color: #254D90;')
              span.uk-margin-small-right(uk-icon='icon:facebook;ratio:1.2', style='color: #fff;')
              span.text-white(style='font-size:1rem;') Facebook 登入
            a.uk-button.uk-button-large.uk-width-1-1.uk-margin-small-top.uk-flex.uk-flex-middle.uk-flex-center(style='color: #fff; background-color: #D33C26;')
              span.uk-margin-small-right(uk-icon='icon:google-plus;ratio:1.2', style='color: #fff;')
              span.text-white(style='font-size:1rem;') Google 登入
        .uk-margin
          p.uk-text-center.text-xsmall.uk-margin-small-bottom.text-gray.text-small-spacing 還不是會員?
            a.text-dark.link-underline.text-remove-spacing(href='#modalSignUp', uk-toggle) 我&nbsp;要&nbsp;註&nbsp;冊
          p.uk-text-center.text-xsmall.text-gray.text-small-spacing 我曾經註冊過,但我
            a.text-dark.link-underline.text-remove-spacing(href='#modalPassword', uk-toggle) 忘&nbsp;記&nbsp;密&nbsp;碼
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalLogin>

// <ModalSignup>
#modalSignUp.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close, style='color: #222')
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 會員註冊
      .uk-width-5-6.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key.svg', uk-svg, style='opacity: .3;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='確認密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key2.svg', uk-svg, style='opacity: .9; right: -5px;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px;') 加入會員
        .uk-margin
          p.uk-text-center.text-xsmall.text-small-spacing.text-gray 我已經註冊過,
            a.text-dark.link-underline.link-secondary-reverse.link-underline.text-remove-spacing(href='#modalLogin', uk-toggle) 直&nbsp;接&nbsp;登&nbsp;入
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalSignup>

// <ModalPaswword>
#modalPassword.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close)
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 忘記密碼
        p.uk-text-center.uk-margin-small-top.text-xsmall.text-red.uk-margin-remove-bottom(style='letter-spacing: .2rem; text-indent: .2rem;')
          |輸入您的註冊過的Email
          br 
          | 索取新密碼
      div.uk-width-4-5.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px;') 索取新密碼 
        .uk-margin
          p.uk-text-center.text-xsmall.text-small-spacing.text-gray 還不是會員?
            a.text-dark.link-underline.link-secondary-reverse.text-remove-spacing(href='#modalSignUp', uk-toggle) 立&nbsp;即&nbsp;註&nbsp;冊
        p &nbsp;
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalPassword>

// <modalPrivacy>
#modalPrivacy(uk-modal)
  .uk-modal-dialog.uk-modal-body.modal-radius.uk-overflow-hidden.uk-margin-auto-vertical(class='uk-width-4-5@m', style='padding-right: 20px;')
    button.uk-modal-close-default(type='button', uk-close)
    h3.uk-h4.uk-text-center.heading-green.uk-text-bold 隱私權條款
    ul.uk-list.list-margin-medium-bottom.text-line-height.scrollbar(style='padding-right: 20px;')
      li 
        | 親愛的朋友您好,非常歡迎您光臨(以下簡稱本網站)。
        br
        | 本公司相當重視客戶對我們的信任,為了讓您能夠安心的使用本網站的各項服務與資訊,特此向您說明本網站的隱私權保護政策,以保障您的權益,請您詳閱下列內容: 
// </modalPrivacy>

Header with full-height nav items

Thumbnail

.uk-container.uk-container-xlarge
  .navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m')
    each i in header
      each j in i.navbar  
        div(uk-grid)
          .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left
            h1
              a(href='/')
                img(src=j.src)
          .uk-width-expand.uk-position-relative
            ul.uk-flex.uk-flex-stretch.uk-flex-right.navbar(style='height: 100%;')
              each k,index in j.nav
                if index===0
                  li.uk-active
                    a.text-medium.uk-text-bold(href=k.href)=k.text
                else
                  li
                    a.text-medium.uk-text-bold(href=k.href)=k.text
              each l,index in i.navButton
                if index===0
                  li
                    a.uk-button.uk-button-secondary.uk-border-pill.uk-box-shadow-small(href=l.href uk-toggle)
                      img(src=l.src uk-svg)
                      span=l.text
                else
                  li
                    a.uk-button.uk-button-primary.uk-border-pill.uk-box-shadow-small(href=l.href)
                      img(src=l.src uk-svg)
                      span=l.text
.navbar {
  li {
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    a {
      width: 100%;
      font-size: 1rem;
      text-align: center;
      letter-spacing: 0.8px;
      white-space: nowrap;
      &:not(.uk-button){
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:hover {
        background: $global-secondary-background;
        border-color: $global-secondary-background;
        color: #fff;
      }
      &.uk-button {
        width: 144px;
        margin-left: 10px;
        line-height: 40px;
        white-space: nowrap;
        padding: 0 10px;
        img + svg {
          position: relative;
          top: 3px;
          margin-right: 7px;
        }
        span {
          font-weight: bold;
        }
      }
    }
    &.uk-active {
      a {
        background: $global-primary-background;
        color: #fff;
      }
    }
  }
}

@include mq(1200px){
  .navbar li a { letter-spacing: 0; font-size: 14px; }
  .navbar li a.uk-button { width: 120px; }
}

Upload media in frontend

DOMJSPHP
<form class="uk-margin" action="" method="post">
  <div class="uk-margin" uk-form-custom style="width:100%;">
    <input type="file" class="btnUpload" id="user_brand_banner" accept="image/*" style="opacity: 0" />
    <button class="uk-position-relative uk-border-rounded link-opacity" style="background-color: #F3F1F3; width: 100%; height: 300px; border: 2px dashed #ccc;">
      <div class="uk-position-center uk-text-center text-height text-default"><i uk-icon="icon:cloud-upload;ratio:3"> </i><br>點擊上傳你的作者頁Banner</div>
      <div class="uk-background-cover uk-position-top-left" id="imgBannerPreview" data-src="<?php echo get_field('user_brand_banner','user_'.wp_get_current_user()->ID); ?>" uk-img style="width: 100%; height: 100%;"></div>
    </button>
    <p class="uk-margin-small-top uk-text-center">尺寸建議:1200 x 300px,檔案大小不得大於 300kb</p>
  </div>
</form>
var $ = jQuery.noConflict();
 
  $('.btnUpload').on('change', prepareUpload);

  function prepareUpload(event) { 
    var file = event.target.files;
    var id = $(this).attr('id');
    var security = $('#security').val();
    var data = new FormData();
    data.append("action", "upload_image");
    data.append("security", security);
    if( id === 'user_brand_banner'){
      $.each(file, function(key, value){
        data.append("user_brand_banner", value);
      })
    } else {
      $.each(file, function(key, value){
        data.append("user_brand_logo", value);
      })
    }

    $.ajax({
      url: '<?php echo admin_url("admin-ajax.php");  ?>',
      type: 'POST',
      data: data,
      cache: false,
      dataType: 'json',
      processData: false, // Don't process the files
      contentType: false, // Set content type to false as jQuery will tell the server its a query string request
      success: function(data, textStatus, jqXHR) {	
        if( data.response == "SUCCESS" ){
          var preview = "";
          if( data.type === "image/jpg" 
            || data.type === "image/png" 
            || data.type === "image/gif"
            || data.type === "image/jpeg"
          ) {
            if( id === 'user_brand_banner'){
              $('#imgBannerPreview').attr('data-src',data.url);
            } else {
              $('#imgLogoPreview').attr('data-src',data.url);
            }
          } else {
            preview = data.filename;
          }
        } else {
            alert( data.error );
        }
    }

    });

  }
add_action('wp_ajax_upload_image', 'upload_handle' );

function upload_handle() {

	$nonce = $_POST['security'];
  if (!wp_verify_nonce($nonce, 'ajax-upload-nonce')) { 
		wp_send_json_error(array('code' => 500, 'data' => '', 'msg' => '錯誤的請求'));
	}

  $current_user = wp_get_current_user();
	$usingUploader = 2;
	$fileErrors = array(
		0 => "There is no error, the file uploaded with success",
		1 => "The uploaded file exceeds the upload_max_files in server settings",
		2 => "The uploaded file exceeds the MAX_FILE_SIZE from html form",
		3 => "The uploaded file uploaded only partially",
		4 => "No file was uploaded",
		6 => "Missing a temporary folder",
		7 => "Failed to write file to disk",
		8 => "A PHP extension stoped file to upload" );
	$posted_data =  isset( $_POST ) ? $_POST : array();
	$file_data = isset( $_FILES ) ? $_FILES : array();
	$data = array_merge( $posted_data, $file_data );
	$response = array();
	if( $usingUploader == 1 ) {
		if(isset($data['user_brand_banner'])){
			$uploaded_file = wp_handle_upload( $data['user_brand_banner'], array( 'test_form' => false ) );
		} else {
			$uploaded_file = wp_handle_upload( $data['user_brand_logo'], array( 'test_form' => false ) );
		}
		if( $uploaded_file && ! isset( $uploaded_file['error'] ) ) {
			$response['response'] = "SUCCESS";
			$response['filename'] = basename( $uploaded_file['url'] );
			$response['url'] = $uploaded_file['url'];
      $response['type'] = $uploaded_file['type'];
		} else {
			$response['response'] = "ERROR";
			$response['error'] = $uploaded_file['error'];
		}
	} elseif ( $usingUploader == 2) {
		if(isset($data['user_brand_banner'])){
			$attachment_id = media_handle_upload( 'user_brand_banner', 0 );
		} else {
			$attachment_id = media_handle_upload( 'user_brand_logo', 0 );
		}
		
		if ( is_wp_error( $attachment_id ) ) { 
			$response['response'] = "ERROR";
      $response['error'] = $fileErrors[ $data['user_brand_banner']['error'] ];
		} else {
			$fullsize_path = get_attached_file( $attachment_id );
			$pathinfo = pathinfo( $fullsize_path );
			$url = wp_get_attachment_url( $attachment_id );
			$response['response'] = "SUCCESS";
			$response['filename'] = $pathinfo['filename'];
			$response['url'] = $url;
			if(isset($data['user_brand_banner'])){
				update_field( 'user_brand_banner',$url,'user_'.wp_get_current_user()->ID );
			} else {
				update_field( 'user_brand_logo',$url,'user_'.wp_get_current_user()->ID );
			}
			$type = $pathinfo['extension'];
			if( $type == "jpeg"
			|| $type == "jpg"
			|| $type == "png"
			|| $type == "gif" ) {
				$type = "image/" . $type;
			}
			$response['type'] = $type;
		}
	}
	echo json_encode( $response );
	die();
}

Tags:

Login/Sign up Form ajax

// Login
form.height-form.uk-flex.uk-flex-middle.uk-padding-s.uk-padding-medium.uk-background-default.uk-box-shadow-medium(action='' method='post' style="border-radius: 20px; border: 1px solid #19233C")
  .uk-width-1-1
    h3.uk-text-center.text-large.uk-text-primary.uk-margin-medium-bottom.text-small-spacing 
      img.uk-margin-small-right.uk-position-relative(src='img/icon-user-circle.svg' style='top: 8px; width: 30px;') 
      span.text-medium-weight 會員登入
    .uk-margin-top
      input.uk-input.input-outline.uk-border-rounded#username(type='text' placeholder='輸入使用者名稱 or Email')
    .uk-margin-small-top
      input.uk-input.input-outline.uk-border-rounded#password(type='password' placeholder='密碼')
    p.uk-text-right.uk-margin-small-top
      a.text-xsmall.link-primary(href='#') 忘記密碼?
    .uk-margin-small-top
      a.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom#btnLogin 登入
      a.uk-padding-remove.uk-width-1-1.uk-button.button-outline.uk-border-rounded.uk-text-primary 還沒有帳號?點我註冊
    .uk-margin-medium-top
      p.text-xsmall.uk-text-center.uk-margin-small-bottom.uk-heading-line
        span 或使用社群帳號登入
      a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #1877f2;')
        i.uk-position-center-left.uk-position-small(uk-icon='facebook')
        | Facebook 登入
      a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-secondary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #ea4235')
        i.uk-position-center-left.uk-position-small(uk-icon='google')
        | Google 登入
        
// Sign Up
form.height-form-register.uk-flex.uk-flex-middle.uk-padding-s.uk-padding-medium.uk-background-default.uk-box-shadow-medium(action='' method='post' style="border-radius: 20px; border: 1px solid #19233C")
  .uk-width-1-1
    h3.uk-text-center.text-large.uk-text-primary.uk-margin-medium-bottom.text-small-spacing 
      img.uk-margin-small-right.uk-position-relative(src='img/icon-user-circle.svg' style='top: 8px; width: 30px;') 
      span.text-medium-weight 免費申請
    .uk-margin-top
      input.uk-input.input-outline.uk-border-rounded.text-small(type='text' placeholder='使用者名稱')
    .uk-margin-small-top
      input.uk-input.input-outline.uk-border-rounded.text-small(type='email' placeholder='Email')
    .uk-margin-small-top
      input.uk-input.input-outline.uk-border-rounded.text-small(type='text' placeholder='手機號碼')
    .uk-margin-small-top
      input.uk-input.input-outline.uk-border-rounded.text-small(type='password' placeholder='密碼')
    .uk-margin-small-top
      input.uk-input.input-outline.uk-border-rounded.text-small(type='password' placeholder='確認密碼')
    p.uk-text-right.uk-margin-small-top
      a.text-xsmall.link-primary(href='#') 已經有帳號了?點我登入
    .uk-margin-small-top
      a.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom#btnRegister 立即註冊
    .uk-margin-medium-top
      p.text-xsmall.uk-text-center.uk-margin-small-bottom.uk-heading-line
        span 或使用社群帳號註冊
      a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #1877f2;')
        i.uk-position-center-left.uk-position-small(uk-icon='facebook')
        | Facebook 註冊
      a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-secondary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #ea4235')
        i.uk-position-center-left.uk-position-small(uk-icon='google')
        | Google 註冊

// reset password
form.uk-margin-medium-top(action="<?php echo home_url(); ?>/wp-login.php?action=lostpassword" method="post")
  .uk-margin.uk-position-relative
    input.uk-input.uk-padding-small.uk-text-small(type="email" placeholder="電子郵件" required name="user_login")
    img.uk-position-small.uk-position-center-right(src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-mail2.svg" uk-svg="" style="opacity: .9;")
  .uk-margin
    button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type="submit" style="padding-left: 40px;") 索取新密碼
 // Login
<form class="ajax-auth height-form uk-flex uk-flex-middle uk-padding-s uk-padding-medium uk-background-default uk-box-shadow-medium" style="border-radius: 20px; border: 1px solid #19233C" action="login" method="post" id="login">
  <div class="uk-width-1-1">
    <h3 class="uk-text-center text-large uk-text-primary uk-margin-medium-bottom text-small-spacing"> <img class="uk-margin-small-right uk-position-relative" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-user-circle.svg" style="top: 8px; width: 30px;"><span class="text-medium-weight">會員登入</span></h3>
    <p id="messageLoginError" class="uk-background-secondary uk-padding-small uk-text-center uk-border-rounded text-small text-white" style="display:none;"></p>
    <div class="uk-margin-top">
      <input class="uk-input input-outline uk-border-rounded text-small" type="text" name="username" id="username" required placeholder="輸入使用者名稱 or Email" maxlength=50>
    </div>
    <div class="uk-margin-small-top">
      <input class="uk-input input-outline uk-border-rounded  text-small" type="password" id="password" name="password" required placeholder="密碼" maxlength=50>
    </div>
    <p class="uk-text-right uk-margin-small-top"><a class="text-xsmall link-primary" href="<?php echo home_url(); ?>/reset">忘記密碼?</a></p>
    <div class="uk-margin-small-top"><button type='submit' class="uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom" id="btnLogin">登入</button><a href="<?php echo home_url(); ?>/register" class="uk-padding-remove uk-width-1-1 uk-button button-outline uk-border-rounded uk-text-primary">還沒有帳號?點我註冊</a></div>
    <div class="uk-margin-medium-top">
      <p class="text-xsmall uk-text-center uk-margin-small-bottom uk-heading-line"><span>或使用社群帳號登入</span></p><a class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #1877f2;" alt="Login with Facebook" title="Login with Facebook" onclick="theChampInitiateLogin(this)"><i class="uk-position-center-left uk-position-small" uk-icon="facebook"></i>Facebook 登入</a>
      <!-- <a alt="Login with Google" title="Login with Google" onclick="theChampInitiateLogin(this)" class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-secondary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #ea4235"><i class="uk-position-center-left uk-position-small" uk-icon="google"></i>Google 登入</a> -->
    </div>
  </div>
  <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
  
// Sign Up
<form class="ajax-auth height-form-register uk-flex uk-flex-middle uk-padding-s uk-padding-medium uk-background-default uk-box-shadow-medium" action="register" method="post" id="register" style="border-radius: 20px; border: 1px solid #19233C">
  <div class="uk-width-1-1">
    <h3 class="uk-text-center text-large uk-text-primary uk-margin-medium-bottom text-small-spacing"> <img class="uk-margin-small-right uk-position-relative" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-gift-circle.svg" style="top: 8px; width: 30px;"><span class="text-medium-weight">免費申請</span></h3>
    <p id="messageSignupError" class="uk-background-secondary uk-padding-small uk-text-center uk-border-rounded text-small text-white" style="display:none;"></p>
    <div class="uk-margin-top">
      <input class="uk-input input-outline uk-border-rounded text-small" type="text" pattern="[A-Za-z0-9]{1,}" title="請輸入英文或阿拉伯數字" placeholder="使用者名稱,限英數" id="signonname" name="signonname" required maxlength=50>
    </div>
    <div class="uk-margin-small-top">
      <input class="uk-input input-outline uk-border-rounded text-small" type="email" placeholder="Email" id="email" name="email" required>
    </div>
    <div class="uk-margin-small-top">
      <input class="uk-input input-outline uk-border-rounded text-small phone-format" type="text" placeholder="手機號碼" id="phone" name="phone">
    </div>
    <div class="uk-margin-small-top">
      <input class="uk-input input-outline uk-border-rounded text-small" type="password" placeholder="密碼" id="signonpassword" name="signonpassword" required maxlength=50 minlength=5>
    </div>
    <div class="uk-margin-small-top">
      <input class="uk-input input-outline uk-border-rounded text-small" type="password" placeholder="確認密碼" id="password2" name="password2" oninput="check(this)" required maxlength=50>
    </div>
    <p class="uk-text-right uk-margin-small-top"><a class="text-xsmall link-primary" href="<?php echo home_url(); ?>/login">已經有帳號了?點我登入</a></p>
    <div class="uk-margin-small-top"><button type="submit" class="uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom" id="btnRegister">立即註冊</button></div>
    <div class="uk-margin-medium-top">
      <p class="text-xsmall uk-text-center uk-margin-small-bottom uk-heading-line"><span>或使用社群帳號登入</span></p><a class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #1877f2;" alt="Login with Facebook" title="Login with Facebook" onclick="theChampInitiateLogin(this)"><i class="uk-position-center-left uk-position-small" uk-icon="facebook"></i>Facebook 登入</a>
      <!-- <a alt="Login with Google" title="Login with Google" onclick="theChampInitiateLogin(this)" class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-secondary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #ea4235"><i class="uk-position-center-left uk-position-small" uk-icon="google"></i>Google 登入</a> -->
    </div>
  </div>
  <?php wp_nonce_field('ajax-register-nonce', 'signonsecurity'); ?>
</form>

// reset password
<form class="uk-margin-medium-top" action="<?php echo home_url(); ?>/wp-login.php?action=lostpassword" method="post">
  <div class="uk-margin uk-position-relative"><input class="uk-input uk-padding-small uk-text-small" type="email"
    placeholder="電子郵件" required name="user_login"><img class="uk-position-small uk-position-center-right"
    src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-mail2.svg" uk-svg="" style="opacity: .9;"></div>
  <div class="uk-margin"><button
    class="uk-button uk-button-primary uk-button-large uk-width-1-1 text-small-spacing text-white"
    type="submit" style="padding-left: 40px;">索取新密碼 </button></div>
</form>
function check(input) {
  if (input.value != document.getElementById("signonpassword").value) {
    input.setCustomValidity("密碼必須符合!");
  } else {
    input.setCustomValidity("");
  }
}

jQuery(document).ready(function ($) {

  var redirectURL = window.location.href;
  
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 4) {
      $(this).val(curval + "-");
    } else if (curchr == 8) {
      $(this).val(curval + "-");
    } else if (curchr == 12) {
      $(this).attr('maxlength', '12');
    }
  });

	$('form#login, form#register').on('submit', function (e) {
    e.preventDefault();
		ctrl = $(this);
		$('.uk-alert').fadeOut();
		$('#btnLogin').text('登入中...');
		$('#btnRegister').text('註冊中...');
		
    if ($(this).attr('id') == 'register') {
      document.getElementById('messageSignupError').style.display = "none";
      action = 'ajaxregister';
      username = $('#signonname').val();
      password = $('#signonpassword').val();
      phone = $('#phone').val();
      email = $('#email').val();
      security = $('#signonsecurity').val();
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: {
          'action': action,
          'username': username,
          'password': password,
          'email': email,
          'phone': phone,
          'security': security
        },
        success: function (data) {
          if (data.loggedin == true) {
            document.location.href = redirectURL;
            $("#btnLogin").text("轉頁中...");
          } else {
            ctrl.prev().fadeIn("fast");
            document.getElementById('messageSignupError').textContent = data.message;
            document.getElementById('messageSignupError').style.display = "block";
            $("#btnRegister").text("立即註冊");
          }
        }
      });
    } else {
      action = 'ajaxlogin';
      username = $('form#login #username').val();
      password = $('form#login #password').val();
      security = $('form#login #security').val();
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: {
          'action': action,
          'username': username,
          'password': password,
          'security': security
        },
        success: function (data) {
          if (data.loggedin == true) {
            document.location.href = redirectURL;
            $("#btnLogin").text("轉頁中...");
          } else {
            ctrl.prev().fadeIn("fast");
            document.getElementById('messageLoginError').textContent = data.message;
            document.getElementById('messageLoginError').style.display = "block";
            $("#btnLogin").text("登入");
          }
        }
      });
    }
	});
});
<?php

function ajax_auth_init(){ 

    wp_register_script('ajax-auth-script', get_template_directory_uri() . '/assets/js/ajax-login.js', array('jquery'), null,true ); 
    wp_enqueue_script('ajax-auth-script');

    wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => wp_get_referer(),
        'loadingmessage' => __('登入中...')
    ));

    // Enable the user with no privileges to run ajax_login() in AJAX
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    // Enable the user with no privileges to run ajax_register() in AJAX
    add_action( 'wp_ajax_nopriv_ajaxregister', 'ajax_register' );

}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_auth_init');
}
  
function ajax_login(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    // Call auth_user_login
    auth_user_login($_POST['username'], $_POST['password'], '登入成功!'); 
    
    die();
}

function ajax_register(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-register-nonce', 'security' );
        
    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_nicename'] = $info['first_name'] = $info['user_login'] = sanitize_user($_POST['username']) ;
    $info['nickname'] = $info['display_name'] = sanitize_text_field($_POST['nickname']) ;
    $info['user_pass'] = sanitize_text_field($_POST['password']);
    $info['user_email'] = sanitize_email( $_POST['email']);
    
    // Register the user
    $user_register = wp_insert_user( $info );
    if ( is_wp_error($user_register) ){ 
        $error  = $user_register->get_error_codes() ;
        if(in_array('empty_user_login', $error))
            echo json_encode(array('loggedin'=>false, 'message'=>__($user_register->get_error_message('empty_user_login'))));
        elseif(in_array('existing_user_login',$error))
            echo json_encode(array('loggedin'=>false, 'message'=>__('該帳號已被註冊')));
        elseif(in_array('existing_user_email',$error))
        echo json_encode(array('loggedin'=>false, 'message'=>__('該郵件已被註冊')));
    } else {
        $headers = 'From:  Sender<service@mail.com>' . "rn";
        $message = '';
        auth_user_login($info['user_login'], $info['user_pass'], '註冊完成!');
        update_field('user_phone',$_POST['phone'],'user_'.$user_register);    
        update_field('user_status','paid','user_'.$user_register);    
    }

    die();
}

function auth_user_login($user_login, $password, $login){
    $info = array();
    $info['user_login'] = $user_login;
    $info['user_password'] = $password;
    $info['remember'] = true;
    
    $user_signon = wp_signon( $info, false );
    if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('帳密有誤!請重新輸入')));
    } else {
        wp_set_current_user($user_signon->ID); 
        echo json_encode(array('loggedin'=>true, 'message'=>__($login.' 轉址中...')));
    }
    
    die();
}

Tags:

Responsive Facebook page plugin

SCSS
#fb-root {
  display: none;
}
.rwd {
  .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
  }
}

.fb_iframe_widget_fluid_desktop iframe { width: 100%!important; }