Archie Makuwa

Category: Wordpress (page 1 of 5)

How to integrate FontAwesome with Nuxt.js using Yarn

I recently started working with Vue.js and I fell in love with the Nuxt.js framework. Coming from a Php and Bootstrap, the closest and most popular free icons framework happened to be FontAwesome – which I believe is the very same reason you ended up on this page.

Definitions

  • Bootstrap –  is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • FontAwesome – is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap and later was incorporated into the BootstrapCDN.
  • Vue.js – is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
  • Nuxt.js – is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps. Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development.

Getting Started: 

I am assuming you already have your Nuxt.js set up, running and you are simply looking to integrate the FontAwesome library.

I am also assuming that your Nuxt project uses Yarn. Here is Nuxt boilerplate based on Yarn: https://github.com/nuxt/nuxt.js/

In this example, I am making of the Vue FontAwesome library which can be downloaded here: https://github.com/FortAwesome/vue-fontawesome

Step 01: Install the fon

Step 02: Inside your Nuxt.js project add a plugins/fontawesome.js file.

Step 03: Modify nuxt.config.js adding to the css and plugins sections.

Step 04: Usage / Example

You are not sorted. To use the Font Icons (including the brands, e.g. Instagram, Twitter, etc), simply refer to the emails below (brand and general usage):

 

FontAwesome icon reference: 

https://fontawesome.com/icons

Overwrite WordPress’ wp_admin from email address

Have you ever wanted to change the “from:” in WordPress using the CODE? See below for a quick solution (snippet).

 

Automatically remove a canceled order in WooCommerce [UnTested]

Based on a question on StackExchange, please find a solution below. We have not tested this, but it was a quick solution by: the_dramatist and kinda looks right. Please test!

 

List all WordPress Categories and their IDs

These few lines can save your life if you are “stupid” like me:

 

WordPress | Get content from a specific post using post_id

Hi,

This is really simple to understand:

 

 

Good bye!

Bootstrap3 Carousel in a WordPress loop…

For starters, this is not sure and we assume you have created a custom post type for the carousel loop.

Read more about WordPress custom post types here: https://codex.wordpress.org/Post_Types

In this instance, we assume the custom post type name is slides:

 

How do I determine if I’m on the very first page of pagination in WordPress?

Well… this is how:

 

Disable additional contact fields (Aim, Jabber, etc) from WordPress User

Copy this code into your functions.php

But there are fileds that will require jQuery to be removed as per the source: http://wordpress.stackexchange.com/questions/26238/extending-the-user-profile

Blah blah blah… adding more content to page:

 

WordPress – Restrict dashboard access to non-admin users and remove admin bar on the front-end

This is how you restrict non-admin users access to the WordPress dashboard:

 

 

This is how you remove the admin login on the front-end of your website:

 

How to disable WordPress Emoticons using a function

Assuming you are a developer or at least you have some form of access to your theme’s functions.php, you can add the following snipped to disable WordPress emoticons:

 

Olderposts

Copyright © 2019 Archie Makuwa

Theme by Anders NorenUp ↑