Pagename: programming - Programming
Category:Array
Post Count: 5Category:Wordpress
Pagename: programming - Programming

WordPress – Moving wordpress installation to subfolder

After installing wordpress into home directory (ie public_html ) I realised it is not as clean as one would want when working with numerous addon domains. Far better, in my opinion, to have the wordpress folders and files in a separate sub-folder for the sake of tidyness.

Sites I used for this information were:

askwpgirl – move-wordpress-from-subdirectory-to-root-directory

The steps I took are:

1. Create sub-folder to use
2. Move wordpress folders & files to new sub-folder
3. Logged into the wordpress console using the url with the sub-folder included (ie example.com/sub-folder/wp-admin)
4. Specify sub-folder in wordpress’s general settings:

Steps taken to move from home folder to separate sub-folder:

Leave a Reply Cancel reply

Category:Programming
Pagename: programming - Programming

CSS – Responsive design basics

Responsive layout needs to be able to handle the different widths of different devices.

Appropriate break points for the most popular devices…phones, tablets/laptops & PCs are:

Smart phone < 768px < Tablet < 1023px < Desktop

Rules are written using the @media rule.

Example:

@media only screen and (max-width: 768px){

/* CSS rules to apply to smart phones goes here */

}

This is read as… ‘apply these rules to screens that are less than 768 pixels‘. I find this syntax to be quite painful to read. It is clearer for me to reverse the logic. I read it as ‘Apply these rules if this is NOT false‘. Hence the above rule becomes, ‘if the width is NOT larger than 768 pixels, apply these rules‘.

Leave a Reply Cancel reply

Category:Javascript
Pagename: programming - Programming

jQuery – list all class names

While overhauling a site, I ended up with many obsolete rules in classes that are no longer applied. To help clean up the CSS stylesheet I wanted to list all class names so I could do a comparison. This answer from stackoverflow did 90% of what I needed:

How to make list of all classes in the page using jQuery?

var classes = []; 
$('[class]').each(function(){ 
$($(this).attr('class').split(' ')).each(function() { 
if (this.length>0 && $.inArray(this.valueOf(), classes) === -1) 
  { 
    classes.push(this.valueOf()); } }); 
  }); 

console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END"); 

To run this in a wordpress site I had to enqueue the jQuery library and replace the ‘$’ signs with jQuery so it became:
var classes = []; 
jQuery('[class]').each(function(){ 
jQuery(jQuery(this).attr('class').split(' ')).each(function() { 
if (this.length>0 && jQuery.inArray(this.valueOf(), classes) === -1) 
  { 
    classes.push(this.valueOf()); } }); 
  }); 

console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END");

Leave a Reply Cancel reply

Category:Programming
Pagename: programming - Programming

.gitignore for wordpress development

Without a correctly set .gitignore file during site development using wordpress, thousands of files are unnecessarily tracked. WordPress and wordpress plugins can be updated frequently, often with updates a site developer has no concern in keeping track of. Most site development occurs in the ‘wp_content/themes’ folder. Inserting a .gitignore file to specify files/folders to ignore is an obvious first step.

GitKraken’s .gitignore wordpress template is a good basis to start with… GitKraken .gitignore template for wordpress

I make some modifications to match my workflow. I have found that tracking plugin development should be done separately and so I ignore all folders except the theme(s) I am working with. Plugins get their own separate repositories…

Here is a .gitignore file that I have modified to suit:

# ignore everything in the root except the "wp-content" directory.
/*
!wp-content/

# ignore everything in the "wp-content" directory, except:
# "themes" directory
wp-content/*
!wp-content/themes/

# ignore specific themes
wp-content/themes/twenty*/
!wp-content/themes/current-custom-theme/

# ignore node dependency directories
node_modules/

# ignore log files and databases
*.log
*.sql
*.sqlite

It is best to get the .gitignore file set up early on (ie the first step) when initiating git. If files are accidentally included, they will still be included until they are removed. To remove incorrectly tracked files, all files are cleared and then ‘re-added’. Hence the importance of getting it correctly setup initially. Here is an example of clearing the tracked files in git and re-adding them:

git rm -r --cached .
git add .
git commit -m ".gitignore is now working"

Leave a Reply Cancel reply

Category:Programming
Pagename: programming - Programming

GitKraken .gitignore template for wordpress

GitKraken’s .gitignore wordpress template is a good basis to start with…

# ignore everything in the root except the "wp-content" directory.
!wp-content/

# ignore everything in the "wp-content" directory, except:
# "mu-plugins", "plugins", "themes" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/

# ignore these plugins
wp-content/plugins/hello.php

# ignore specific themes
wp-content/themes/twenty*/

# ignore node dependency directories
node_modules/

# ignore log files and databases
*.log
*.sql
*.sqlite

I make a few modifications to this which I have put here: .gitignore for wordpress development