tailpress

Installation

• Install the wordpress in LocalWP by downloading this blue print and copy it to ~/Library/Application Support/Local/blueprints (mac) or %AppData%/Roaming/Local/blueprints (window). Then, setup the new wordpress website using blueprint. These plugins are included.
  • Advanced Custom Fields PRO - Licensed
  • Advanced Editor Tools
  • Search & Filter Pro
  • Rank Math SEO with AI Best SEO Tools
  • SVG Support
  • Wordfence Security
  • WP All Import - ACF Add-On
  • WP All Import Pro
  • WP Mail SMTP
  • WP Migrate - Licensed
  • WP Rocket
  • WPForms - Licensed
  • WPForms Multilingual
  • WPML Multilingual CMS
  • WPML String Translation
  • Yoast Duplicate Post

Development

• Fork this Git (use the fork icon under gitlab and create new project).
• Clone the Git.
• Start the website in LocalWP
• Copy env.sample to .env and replace WP_URL
• Run npm install
• Run npm watch

Get updates from the wordpress-tailwind-base-theme

• Follow this guide from Gitlab to get update from the fork

Fix the syntax highlighting in css

• Place the below code into .vscode/settings.json

{
    "files.associations": {
        "*.css": "tailwindcss"
      }
}

Resusable

Libraries

• SwiperJS for the slider function.
• AlpineJS@3.13.8 for the reactivity and reusable javascript state & components.
• AlpineJS Morph@3.13.8 - morphdom plugin to morph the genereated dom from php, use it in listing pages and other pages.
• TailwindCSS

PHP

• resources/php/generate-breadcrumb.php to generate the breadcrumbs, it will cover most of the cases.
• resources/php/disable-wpform-confirmation.php to disable WPForm confirmation page replacing the form in AJAX.
• resources/php/share-links.php to get share link for social media platforms.
• resources/php/get-reading-time.php to get the reading time of the content.
• resources/php/update-dashboard-logo.php to update the backend login page's logo.

Javascript

• resources/js/directives/header-base.js register the new directive x-header and add --header-height css variable to body style and global header state.

Development

Guideline

• All fonts need to use fluid font style to ensure the responsive.
• All containers need to calculate using maximum and padding calcuation flow.
• All styles need to import under app.css in order to work.
• All common styles must be placed in common.css.
• All common script must be placed in common.js.
• All component related css and javascript must be same with component name, for example, if you're writing for header-base.php block, then it should be header-base.js or header-base.css
• All Alpine JS directives must be imported in directives.js to work.
• All JS except Alpine JS must be imported in app.js to work.
• All vector images should be used .svg extension such as Logo

Checklist

• Update the favicon (ask from designer).
• Confirm the WPML - language slug with client through PM (Malaysia).
• Ready all content before two weeks of deadline by client through PM (Malaysia) including multi language.
• SEO Meta Title, Description mush be ready before two weeks of deadline.

Deployment

These steps only need to do in first time deployment

• Setup the wordpress default in the server and configure the database.
• Install WP Migrate with license key and allow push from it
• Push it directly from the most updated LocalWP setup. Please select like below.
  • Database and keep as default
  • Media Folder
  • Theme (Don't select it, as we will git pull from the server)
  • Plugins
• After that, please go to <WODPRESS_DIRECTORY>/wp-content/themes and git pull your projects
• Build the CSS and Javascript in your computer and upload to <WODPRESS_DIRECTORY>/wp-content/themes/<THEME>

Follow these steps for continous updates and deployment

• Git pull from <WODPRESS_DIRECTORY>/wp-content/themes/<THEME>
• Build the CSS and Javascript in your computer and upload to <WODPRESS_DIRECTORY>/wp-content/themes/<THEME>

Live Checklist

• All payments must be linked with client accounts. This is the most important step.
• Under Settings > Reading and uncheck Discourage search engines from indexing this site
• Enable Rank MATH SEO.
• Update the theme name to be client website name.
• Update the theme folder client to be client name and reactivate it Dashboard.
• Replace the screenshot with client logo.
• Enable WP Rocket if there is optimization in Project Quotation.
• Disable WP Cron Job and enable CPANEL Cron JOB to optimize the website. See this link.
• Enable Wordfence and configure it.
• Update the backend login url to be letadminin. Can use WPS Hide Login.
• Update the backend login logo to client logo. Use resources/php/update-dashboard-logo.php and change the background-image.
• Configure SMTP to use client email with WP Mail SMTP # wp-tw-sections

wp-tw-sections