Learn Python – Lesson 1

Python is an object oriented high level programming language. It is primarily used for developing web applications and programs involving complex mathematical calculations. It is also used for systems scripting.

Python is highly portable and Python programs can be developed under any Operating System. But this series is for windows users only – Windows 7 and above.

Continue reading “Learn Python – Lesson 1”

Custom Post Type Menu as Sub-menu in WordPress Admin Panel

Ok this needs a bit of more explanation. When you create a custom post type in wordpress, the menu link for this custom post type appears at the top-level in dashboard.

For example – i have a custom post type ‘Intros’ which has a menu link at the top level. But what if i do not want this menu link at the top level – but want it as a sub-menu for another top level menu?

Continue reading “Custom Post Type Menu as Sub-menu in WordPress Admin Panel”

How to Add Bootstrap 4 to an Angular 6 App

Depending on your preference there are several methods to add bootstrap styling to Angular 6 app.

Method 1: This is the simplest way using CDN links for bootstrap core files and required Javascript.

Get bootstrap compiled assets:
https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn. 

Copy the links to the main app file or index.html of your angular project as shown below

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Demo Angular App</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>

Save and you are done! Remember that bootstrap 4 needs Popper JavaScript library to work. You have to add the link before bootstraps own JavaScript file.

Method 2: Install bootstrap, jquery and popper (required for bootstrap 4) using node packet manager (npm).

Run the following command 

npm install bootstrap jquery popper.js

Optionally you can also install font-awesome to go with bootstrap theme.

npm install font-awesome

Once installed, all these dependencies are available in node_modules folder of your application directory.

Next open angular.json file located in your application root. (previously it was angular-cli.json)

Find the “styles” and “scripts” tags and place the following code:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/popper.js/dist/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Save and you are ready to use bootstrap on your angular project!