Category Archives: Development

WordPress – Making a custom type not have a url

Posted in WordPress on October 2, 2018 by rowej83.

Custom post type should have below settings:

‘rewrite’ => false,
‘query_var’ => false,
‘publicly_queryable’ => false,
‘public’ => false

Explanation of each:

rewrite Triggers the handling of rewrites for this post type. To prevent rewrites, set to false.

query_var ‘false’ – Disables query_var key use. A post type cannot be loaded at /?{query_var}={single_post_slug}

publicly_queryable Whether queries can be performed on the front end as part of parse_request().

public ‘false’ – Post type is not intended to be used publicly and should generally be unavailable in wp-admin and on the front end unless explicitly planned for elsewhere.

Go to Permalinks Settings and without changing anything – save change. It will rebuild your “routing”.

Source: https://stackoverflow.com/questions/19747096/remove-url-structure-for-custom-post-type

Default WordPress htaccess to enforce SSL

Posted in WordPress on April 11, 2018 by rowej83.

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

RewriteEngine On

RewriteCond %{HTTPS} !=on

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# BEGIN WordPress

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

To have a redirect to non www with https can do the following:

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]

RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %{HTTPS} !on

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Notes for Udemy Course “The Complete React Web Developer Course (with Redux)”

Posted in Javascript on February 23, 2018 by rowej83.

Notes for Udemy Course “The Complete React Web Developer Course (with Redux)” – https://www.udemy.com/react-2nd-edition/

React uses jsx and ES6 which means it requires Babel ( requires node ). Two scripts are required to work with React in the browser. React and ReactDOM. Below is a sample React component that has toggle visibility functionality.

import React from 'react';
import { render } from 'react-dom';
// required to work with React in the browser

// Any component must extend React.Component and have at the very least a 
// render() method.

class VisibilityComponent extends React.Component {
// constructor for component really only needs to use super(props) instead of super() 
// if you need to reference the props in the constructor

  constructor(props) {
    super(props);
    // We bind all methods so that it references the correct this instance.   
    this.setVisibility = this.setVisibility.bind(this);
    // set the initial state variables
    this.state = {
      visibility: false
    };

  }
  // method that toggles the visibility state variable.
  setVisibility() {
  // updating setState should be a function that returns a new object.
  // if the previous state's value is needed, add prevState ( can be named anything )
  // to the this.setState method's parameter.
    this.setState((prevState) => {
      return { visibility: !prevState.visibility }
    }
    );
  }
  // return jsx that can be inclosed by ( ) 
  render() {
    return (
      <div>
        <button onClick={this.setVisibility}>Toggle visibility</button>
         // if statement checking visibility state value 
         // shows 'it is shown' if true, 'not shown' if it is false.
        {this.state.visibility ? 'it is shown' : 'not shown'}
      </div>

    )

  }

}

// finally, use render function from ReactDOM to attach the app to the DOM.
render(<VisibilityComponent />, document.getElementById('root'));

import React from 'react';

import { render } from 'react-dom';

// required to work with React in the browser

// Any component must extend React.Component and have at the very least a

// render() method.

class VisibilityComponent extends React.Component {

// constructor for component really only needs to use super(props) instead of super()

// if you need to reference the props in the constructor

constructor(props) {

super(props);

// We bind all methods so that it references the correct this instance.

this.setVisibility = this.setVisibility.bind(this);

// set the initial state variables

this.state = {

visibility: false

};

}

// method that toggles the visibility state variable.

setVisibility() {

// updating setState should be a function that returns a new object.

// if the previous state's value is needed, add prevState ( can be named anything )

// to the this.setState method's parameter.

this.setState((prevState) => {

return { visibility: !prevState.visibility }

}

);

}

// return jsx that can be inclosed by ( )

render() {

return (

<div>

<button onClick={this.setVisibility}>Toggle visibility</button>

// if statement checking visibility state value

// shows 'it is shown' if true, 'not shown' if it is false.

{this.state.visibility ? 'it is shown' : 'not shown'}

</div>

)

}

// finally, use render function from ReactDOM to attach the app to the DOM.

render(<VisibilityComponent />, document.getElementById('root'));

If components are nested, data as props can only be sent down – not up. So, on the parent component a method can be passed to the child component as a prop in order to send the information back to the parent.

Stateless functional components

Another type of component that can be reduced to a single function call because they do not have any state to handle of their own. Mostly used for “presentation” type components. They can use props but aren’t accessible through *this* .

This type of component is “faster” as it has less overhead as it doesn’t handle state.

// Stateless functional component example
// The name of the variable will be the component name
// i.e. <User />

const User = (props) => {
// like regular components, it has a render method but it is
// just the body of the function itself

return (
  <div> Any valid JSX will work here {props.name} </div>
);
};

// Can setup defaults for props using below:
User.defaultProps({
name="default name if not given one"
});

ReactDOM.render(<User name="Jason Rowe"/>,document.getElementById('root');

// Stateless functional component example

// The name of the variable will be the component name

// i.e. <User />

const User = (props) => {

// like regular components, it has a render method but it is

// just the body of the function itself

return (

<div> Any valid JSX will work here {props.name} </div>

);

};

// Can setup defaults for props using below:

User.defaultProps({

name="default name if not given one"

});

ReactDOM.render(<User name="Jason Rowe"/>,document.getElementById('root');

Small tricks for conditional rendering

// Below will only show the h2 tags if the title is not empty
{this.props.title && <h2>{this.props.title}</h2>}

1 2	// Below will only show the h2 tags if the title is not empty {this.props.title && <h2>{this.props.title}</h2>}

For the arrow function, if you are return just an object you can use the following syntax:

this.setState(() => ({ options:[] }));

// key difference is that following the arrow it must include () so 
// it knows it is an object rather then the normal opening and
// closing brackets of the arrow function

this.setState(() => ({ options:[] }));

// key difference is that following the arrow it must include () so

// it knows it is an object rather then the normal opening and

// closing brackets of the arrow function

In React, methods to update a parent component are passed down to child components via props.

Lifecycle methods

Methods are available to hook in to when a class based component is added/removed/updated in React. Common ones to use are componentDidMount() for fetching initial data, and componentDidUpdate(prevProps, prevState) for saving updated changes back to the db.

When using componentDidUpdate, make sure the prevState and current state are not equal ( !==) so that a save to db/localStorage is not called that is not needed.

Localstorage Notes

// valid commands
localStorage.setItem('name', 'Jason');

localStorage.getItem('name');

localStorage.removeItem('name');

// localStorage can only store strings. Will automatically convert 
// a number i.e. 26 to "26" . To make best use, we use JSON methods

// below will turn a javascript object to a string that
// we can store in localStorage
JSON.stringify(Object); 

// below will turn a string back to a javascript object
JSON.parse(String);

// valid commands

localStorage.setItem('name', 'Jason');

localStorage.getItem('name');

localStorage.removeItem('name');

// localStorage can only store strings. Will automatically convert

// a number i.e. 26 to "26" . To make best use, we use JSON methods

// below will turn a javascript object to a string that

// we can store in localStorage

JSON.stringify(Object);

// below will turn a string back to a javascript object

JSON.parse(String);

When within a method that was attached to a onClick event ( or any other similar method ), you can reference the field/value by the following type of example:

<form onSubmit={this.handleAddOption}>
 <input type="text" name="option" />
 <button> Add option </button>
</form>

// Within handleAddOption(e) can use the following to reference the 
// input field's value. It uses the name field for what you would reference.
// in the case, name="option"

e.target.elements.option.value;

<button> Add option </button>

</form>

// Within handleAddOption(e) can use the following to reference the

// input field's value. It uses the name field for what you would reference.

// in the case, name="option"

e.target.elements.option.value;

Children props ( slots )

Dynamic content that be added between a components tag can be added to be placed within the layout of the components it’s self. For example:

const Layout = (props) => return (
  <div>
   <h1> Random Header </h1>
   {props.children} 
   // above will add what was put between the <Layout> </Layout> tag
  </div>
);

ReactDOM.render(<Layout><p> This content will be added as a child prop </p></Layout>, document.getElementById('root');

// The <p> </p> content will be added within the Layout component

const Layout = (props) => return (

<div>

<h1> Random Header </h1>

{props.children}

// above will add what was put between the <Layout> </Layout> tag

</div>

);

ReactDOM.render(<Layout><p> This content will be added as a child prop </p></Layout>, document.getElementById('root');

// The <p> </p> content will be added within the Layout component

Simple form value/onChange practice:

Can create a single handleChange method to handle all form values and updates that are used in state.

handleChange = event => {
   //uses a object deconstructor to create name / value variables from
   // the even.target object

    const {name, value} = event.target;

    this.setState({
        [name] : value
    });
}

handleChange = event => {

//uses a object deconstructor to create name / value variables from

// the even.target object

const {name, value} = event.target;

this.setState({

[name] : value

});

}

Now we can use same method for all form fields:

render() {
    const { name, job } = this.state; 

    return (
        <form>
            <label>Name</label>
            <input 
                type="text" 
                name="name" 
                value={name} 
                onChange={this.handleChange} />
            <label>Job</label>
            <input 
                type="text" 
                name="job" 
                value={job} 
                onChange={this.handleChange}/>
        </form>
    );
}

render() {

const { name, job } = this.state;

return (

<form>

<input

type="text"

name="name"

value={name}

onChange={this.handleChange} />

<input

type="text"

name="job"

value={job}

onChange={this.handleChange}/>

</form>

);

}

Misc React Notes

In JSX, all normal html attributes such as onclick and onchange MUST be camel case.. i.e.e onClick and onChange

All components must start with a capital letter.

JSX conditional rendering :

ternary operator is accepted i.e. true ? ‘show this if true’ : ‘ value if false’

if/else can not be used in {} jsx since it is a statement and not an expression.

&& AND Operator

{user.age>18 && <p>{user.age}</p>}

// If the first value is true (user.age is greater than 18)
// then the second value is returned.
// This is useful to only show something if a certain value is true.

{user.age>18 && <p>{user.age}</p>}

// If the first value is true (user.age is greater than 18)

// then the second value is returned.

// This is useful to only show something if a certain value is true.

Notes for using Ajax in WordPress

Posted in WordPress on January 25, 2018 by rowej83.

While in WordPress admin area.. the variable named ajaxurl is available for javascript scripts to use for the url for ajax. Every call must at the very least have an “action” data property passed to WordPress in order for it to know which function will be used on the back-end to complete the ajax request.

// when in the WordPress admin area. the variable "ajaxurl" is available that
// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.
// also wp_ajax_nopriv action must also have the php ajax function tied to it 
// in case the user that is visiting is not logged in.

var datasent={
'action':'method_that_handles_the_ajax_request',
'address':'555 street'
};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script 

$.post(ajaxurltowp, datasent,function(response){
// response is what is sent back from the server for the ajax request.

});

// when in the WordPress admin area. the variable "ajaxurl" is available that

// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.

// also wp_ajax_nopriv action must also have the php ajax function tied to it

// in case the user that is visiting is not logged in.

var datasent={

'action':'method_that_handles_the_ajax_request',

'address':'555 street'

};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script

$.post(ajaxurltowp, datasent,function(response){

// response is what is sent back from the server for the ajax request.

});

The associated php that would be needed to process above :

<?php

function handle_request(){
$address=$_POST["address"]; // grab field sent via ajax
//do something here
// all functions that handle ajax must die() at the end of the function.
die();

}

//adding action assuming not in a namespace.
add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in
add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

<?php

function handle_request(){

$address=$_POST["address"]; // grab field sent via ajax

//do something here

// all functions that handle ajax must die() at the end of the function.

die();

}

//adding action assuming not in a namespace.

add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in

add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

Any ajax request must be handles by a function which has to be added via add_action

Note that any action you specify in the ‘action’ field for the data sent to the server will have ‘wp_ajax_’ prepended to the actions name.

Also need to bind to the action prefix ‘wp_ajax_nopriv’ so that the ajax will still work for visitors who are not logged in.

So the action ‘method_that_handles_the_ajax_request’ will have to be added in php as ‘wp_ajax_method_that_handles_the_ajax_request’ as seen in the php snippet.

If the action can not be found by admin-ajax.php the response returned from the ajax request will be an integer of zero ( 0 ).

If you created an ajax action method properly and you keep receiving a 0 response…confirm that your ajax action method was added.

//if were in a namespace would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

//if were in a namespace would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

Any function in php that handles a ajax request MUST end with die();

Within the php function, any post variable that is passed via the ajax data field, in our case the ‘address’ or ‘action’ field, is available via $_POST[“address”] or $_POST[“action”]

wp_localize_script

Used to add data to javascript that is normally only available on server side. Has to be used after an enqueue of a script and use the same “handle”. It will make the variables passed via localize_script available to the rest of the javascript that was enqueued.

Typically, this is used for nuances

Example of adding the nuances

<?php

// Register the script
wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data
// ajaxurl is passed in manually in case the visitor
// is not logged in - wordpress does not automatically
// populate ajaxurl if the user is not logged in

$sites_variables = array(
	'site_nonce' => wp_create_nonce('site_nonce'),
         'ajaxurl'=> admin_url( 'admin-ajax.php' ) 
	);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.
wp_enqueue_script( 'the_handle' );

<?php

// Register the script

wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data

// ajaxurl is passed in manually in case the visitor

// is not logged in - wordpress does not automatically

// populate ajaxurl if the user is not logged in

$sites_variables = array(

'site_nonce' => wp_create_nonce('site_nonce'),

'ajaxurl'=> admin_url( 'admin-ajax.php' )

);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.

wp_enqueue_script( 'the_handle' );

Another way to add it when there are times where an additional script isn’t needed could be done in the following way.

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>
    <script type="text/javascript">
        var site_variables = {
        'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>
        };
    </script><?php
}
add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>

var site_variables = {

'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>

};

</script><?php

}

add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

Now we can update the javascript to use the nonce to pass back to WordPress to check for nonce validity.

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={
"action":"method_that_handles_the_ajax_request",
"address":"555 street",
"site_nonce":sites_vars.site_nonce;
};

$.post(ajaxurl, data_sent,function(response){
// response is what is sent back from the server for the ajax request.

});

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={

"action":"method_that_handles_the_ajax_request",

"address":"555 street",

"site_nonce":sites_vars.site_nonce;

};

$.post(ajaxurl, data_sent,function(response){

// response is what is sent back from the server for the ajax request.

});

Now that the nonce is created and is being passed from javascript to WordPress.. we setup below in php in the action that the ajax requests to process it’s integrity.

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){
// nonce is missing or is bad. Cancel request

die('Permission check failed');
}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:


// site_nonce has to be passed since it was 
// the handle we used when creating the nonce
// i.e. wp_create_nonce('site_nonce');

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){

// nonce is missing or is bad. Cancel request

die('Permission check failed');

}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:

// site_nonce has to be passed since it was

// the handle we used when creating the nonce

// i.e. wp_create_nonce('site_nonce');

Good notes for ajax usage: https://developer.wordpress.org/plugins/javascript/enqueuing/

check_ajax_referer( 'nonce' ); This function will check nonce and if it fails will automatically kill the action it was ran within

wp_send_json() will send back appropriate header and json back to javascript as well as wp_die() for the action it was called in.

Python script to scrape array of urls and create an excel spreadsheet

Posted in Development, Python on August 31, 2017 by rowej83.

I created this in order to have a bootstrap for wanting to create a script to generate an excel spreadsheet from scraped information from an array of urls. Comments within the script indicate which values/columns/headers need to be updated.

import xlsxwriter
import numpy as np
import os
import contextlib
from bs4 import BeautifulSoup
import requests

# Empty array of urls to be parsed
arrofurls = []
# would then call getvaluesperurl with above arrofurls.

# Empty multi-dimension array- only initial values are the headers
arrofitems = [['NAME', 'ADDRESS', 'CITY']]

# Deleting any existing spreadsheet before performing operation
with contextlib.suppress(FileNotFoundError):
    os.remove('Scrape-output.xlsx')

# Create a workbook and add a worksheet.
workbook = xlsxwriter.Workbook('Scrape-output.xlsx')
worksheet = workbook.add_worksheet()

# Increment row to start at 1 for loop since headers were added
# Start from the first cell. Rows and columns are zero indexed.
row = 0
col = 0
# Iterate over the data and write it out row by row. - need to change name1, address1 etc for what column values will be
for name1, address1, city1 in (arrofitems):
    worksheet.write(row, col, name1)
    worksheet.write(row, col + 1, address1)
    worksheet.write(row, col + 2, city1)
    row += 1

# Write a total using a formula. Commented out since not needed for the example
# worksheet.write(row, 0, 'Total')
# worksheet.write(row, 1, '=SUM(B1:B4)')
workbook.close()


# function that goes through urls and grabs values to add in main array
# values and size o main array depends on the information needed
# below is just an example of a single value being
def getvaluesperurl(arrayofurls):
    for url in arrayofurls:
        r = requests.get(url)
        data1 = r.text
        soup = BeautifulSoup(data1, "lxml")
        # go thru each value and find via select and check if not none
        valueofitem = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem is None:
            valueofitem = 'NA'
        valueofitem2 = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem2 is None:
            valueofitem2 = 'NA'
        valueofitem3 = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem3 is None:
            valueofitem3 = 'NA'

        # after finding all values, add to the main array
        temparr = np.array([[valueofitem, valueofitem2, valueofitem3]])
        arrofitems = np.concatenate((arrofitems, temparr), axis=0)

import xlsxwriter

import numpy as np

import os

import contextlib

from bs4 import BeautifulSoup

import requests

# Empty array of urls to be parsed

arrofurls = []

# would then call getvaluesperurl with above arrofurls.

# Empty multi-dimension array- only initial values are the headers

arrofitems = [['NAME', 'ADDRESS', 'CITY']]

# Deleting any existing spreadsheet before performing operation

with contextlib.suppress(FileNotFoundError):

os.remove('Scrape-output.xlsx')

# Create a workbook and add a worksheet.

workbook = xlsxwriter.Workbook('Scrape-output.xlsx')

worksheet = workbook.add_worksheet()

# Increment row to start at 1 for loop since headers were added

# Start from the first cell. Rows and columns are zero indexed.

row = 0

col = 0

# Iterate over the data and write it out row by row. - need to change name1, address1 etc for what column values will be

for name1, address1, city1 in (arrofitems):

worksheet.write(row, col, name1)

worksheet.write(row, col + 1, address1)

worksheet.write(row, col + 2, city1)

row += 1

# Write a total using a formula. Commented out since not needed for the example

# worksheet.write(row, 0, 'Total')

# worksheet.write(row, 1, '=SUM(B1:B4)')

workbook.close()

# function that goes through urls and grabs values to add in main array

# values and size o main array depends on the information needed

# below is just an example of a single value being

def getvaluesperurl(arrayofurls):

for url in arrayofurls:

r = requests.get(url)

data1 = r.text

soup = BeautifulSoup(data1, "lxml")

# go thru each value and find via select and check if not none

valueofitem = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem is None:

valueofitem = 'NA'

valueofitem2 = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem2 is None:

valueofitem2 = 'NA'

valueofitem3 = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem3 is None:

valueofitem3 = 'NA'

# after finding all values, add to the main array

temparr = np.array([[valueofitem, valueofitem2, valueofitem3]])

arrofitems = np.concatenate((arrofitems, temparr), axis=0)

Online Journal

My online journal about design and development related topics and what I've learned.

Category Archives: Development

WordPress – Making a custom type not have a url

Default WordPress htaccess to enforce SSL

Notes for Udemy Course “The Complete React Web Developer Course (with Redux)”

Notes for using Ajax in WordPress

Python script to scrape array of urls and create an excel spreadsheet