Jonnie Grieve Digital Media: Website Blog.

Archived Posts: CSS Archives – Jonnie Grieve Digital Media posts.

Testing Crayon Syntax Highlighter

 

Testing Crayon Syntax Highlighter plugin with WordPress 4.8

dfdfddfdgdfgdf


Random JavaScript

A bit of fun with modifying arrays.

When you want to modify a simple array, you generally want to add values to it or remove items.  There are 4 common methods in the PHP arsenal that will do this.

There’s

  • push()
  • pop()
  • shift()
  • unshift();

Now these are 4 easy methods to write, but when you have a learning disability like I do the struggle to remember what each of them does is eternal. I know that I either want to add something to an array or remove it.  Does push do that? Or pop? Pop sounds like something that would separate or remove one thing from another right?

Good hunch!  But which end?  According to the documentation the value at the end of a given array will be removed.

So the array should now return

$sport = (‘Hockey’,’Cricket’);

And the array now has only 2 elements and array_pop is the method that removes a value or values from the end of an array.

So how then do you remove an element from the beginning of an array?

which would return…

So for removing elements from an array, pop() deals with the end of an array but shift removes them from the beginning.

which will return

For this we have the methods for push and shift. These methods will add one or more elements to a given array.

returns

In conclusion the methods can be summarised below.

array_unshift()  Removes an element from the beginning of an array
array_shift()  Adds an element from the end of an array
 array_pop()  Removes an element from the end of an array.
 array_push()  Adds an element to the beginning of an array.

Getting started with PostCSS

I’ve done Sass and seen the benefits of using that to write modular CSS.

But I’ve also recently managed to get familiar with something called PostCSS which is a PostProcesser to Sass’s PreProcessor.

Explaining PostCSS

PostCSS is a processing tool for writing CSS. But more than that, with added plugin functionality you can write CSS in new, as yet unsupported syntax that gets passed to the processing tool and returned as a format that the browser can understand. This works in much the same way that Sass works but it doesn’t do this on it’s own. It requires the use of plugins to provide the additional functionality.

What PostCSS does is it takes in a source file, and outputs a final file for use in deployment on web projects.

It uses a number of technologies to serve this technology, but one of the most popular is using the JavaScript Gulp Taskrunner.

Setting up PostCSS

By using Gulp you can add a serving gulpfile.js task runner in your project to work with your CSS files. There’s no need to use a different type of file. It all works with standard CSS files.

npm install -g gulp
npm install -g gulp-postcss

I’ve seen examples where the following npm installation commands work

npm install –save-dev gulp

But saving the dependencies globally worked for me.

I’m able then to verify that PostCSS is installed by adding two folders to my project. One directory for the source CSS that I write CSS and another for the processed files that I use to link to the website I deploy.

To make sure that PostCSS works first I require post CSS in the gulpfile

var post = require(‘gulp-postcss’);

Then I’ll write an gulp task that contains an empty array which will later contain arguments for each and every PostCSS plugin there is.

gulp.task(‘css’, function() {
      var processors = [

      ];

};

In this task we need to return the source and destination folders so Gulp knows which files to watch and process PostCSS.

return gulp.src(‘./src/*.css’)
     .pipe(postcss(processors) )
     .pipe(gulp.dest(‘./dest))l

});

In order to watch files constantly without running the Gulp task over and over in the console, you run the Gulp watch method in the default task.

gulp.task(‘default’, function() {
      //watch the css folder for changes in css file extension
      gulp.watch(‘./src/*.css’, [‘css’]);
});

Now I can run all my postCSS with as many edits to the CSS code I need without having to worry about running tasks all the time.

Fun with PostCSS

One of the great things about PostCSS is that it gives you a great incentive to use new CSS syntax so you can be prepared should it become available and supported in browsers. You won’t have to worry about browser support because you can write it and Gulp will convert the new syntax to regular CSS.

So you can safely play with the new CSS color function such as this example that uses the colour function to style hyperlinks.

In order to use the following Syntax we have to add the plugin to the gulpfile. This is as simple as requring the files in the same way that we required PostCSS as the top of the file

var cssnext = require(‘postcss-cssnext’);

And then add the argument to the prcoessorts array.

var processors = [

     cssnext

];

Now we can start to use some of the new syntax.

a:hover {
     color: rgba(70, 130, 180, 0.9);

}

which converts to the much m to ore well known RGBA function

a:hover {
     color: rgba(70, 130, 180, 0.9);

}

There’s also a new syntax out there for working with CSS media queries.

@media (768px <= width <= 1024px) {
        .container {
               max-width: 1024px;

        }

}

converts to

@media (min-width: 768px) and (max-width: 1024px) {
      .container {
      max-width: 1024px;

    }

}

I’ve love learning new things and there’s still a long way to go in learning what PostCSS can do, I’m exciting that I now have a new front end tool in my arsenal and I know I can easily develop websites in the newest CSS syntax without worrying about browser support.

Fun with WooCommerce update.

In a previous post, I shared about some work I was doing with WooCommerce and my attempts to make a WordPress theme compatible with the plugin, so we could sell products from it. More on that shortly but firstly an apology. I’m not always as proactive as I should be on my own social media platforms. I work on my own and sometimes work takes priority and my social media/work activity can at times appear dead.

It’s not. I am always here.  🙂

In fact this financial year has started off more profitably than any other since I started in business and I’ve been working hard adding more strings to my bow.

One of these things is using WordPress to create more dynamic websites and even learn to create websites that sell things.

I already got my hands dirty with that with an Open Cart solution for Lil’s Craft Shop. An “out of the box” but more than useful solution for quickly making websites that sell products.

It was a little different this time. This time I’m working on a project to sell products via a custom theme; a design inspired by my client’s specifications but created by myself.

I made it clear from the start of this project that I just don’t have the time or the capacity to do those sorts of jobs on the fly myself. That requires computer programming wizardry that I can only dream to possess.

But with WooCommerce these templates and mechanisms are bundled in by developers so once I know how to set it up. All I have to worry about is how to make it look nice on the front end.However over the past few weeks I’d hit a brick wall. Despite installing the plugin properly to WordPress and tinkered with the the numerous behind the scenes settings and sat for far too long looking at the code, the shopping cart features that WooCommerce provides did not show up. I asked around everywhere I could think of, Googled the same websites numerous times but could find nothing that fixed my problem.

I even emailed my client at Crook2Hook Crochet to to say to the effect of, “I’m sorry, I’ve done all I can. We’re going to have to try another way”.I was defeated.But I wasn’t satisfied with that. Every time I decided the job was above my skill set I couldn’t help but poke my nose back in.

Without going into too much technical detail about what was going wrong, nothing was working because I wasn’t telling WooCommerce to pull in the information it needed dynamically. I stuck so rigidly to tutorials not fit for my purpose I was leading myself down the wrong path.

However, once updated I cannot describe the relief I felt to finally have achieved my goal.

I didn’t think I could do it. I did it!

Integrating WooCommerce with a custom WordPress Theme

Alright,

I’ve searched high and low for answers to this but I am a newbie when it comes to Woocommerce development. For all I know I’m approaching this in completely the wrong way and it;s not possible to to simply design a theme and then integrate WooCommerce into it. But then, why do other out of the box WooCommerce themes that you can get work so effortlessly with the plugin?

The last thing I want to do is use an out of the box solution. Mainly because I’ve spent a lot of time developing the theme prior to WooCommerce but with WooCommerce in mind. It has to be a custom theme.

Which then of course means I need to customise the front end which is fine, I expect that but I can’t see for the life of me why I don’t get any output at all and why it defaults automatically to the page.php file. I’ve done all the right things as far as I can see to hook up WooCommerce to the theme including follwing the instructions here.

https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

Here’s my functions.php code.

<?php

add_theme_support( 'menus' );
add_theme_support( 'widgets' );

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}

/*To dom_import_simplexml

Theme Development Tasks
----> Remove version numbers from file front end
----> "Hot off the hook" front page images - Maybe use as Custom Post Type?
----> Download plugins - Custom Post Type UI and Advanced Custom Fields
----> Maybe we don't need the modal form for adding to the cart. -- Woocommerce will drive form filling
----> Add pagination on main product page. https://codex.wordpress.org/Pagination

WooCommerce Tasks
*/

/****ENQUEUE SCRIPTS AND STYLES****/
function c2h_scripts() {

/*
//second parameter is an array of dependents for js files array('')
//third parameter - version number of enqueued file (optional)
//final parameter - location of file path in front end - header or footer. True to appear in footer, false for header
*/
wp_enqueue_script('main-jquery', get_template_directory_uri() . '/js/jquery-min.js', array('jquery'),'', false);
wp_enqueue_script('jquery-migrate', get_template_directory_uri() . '/js/jquery-migrate-min.js', array('jquery'),'', false);
wp_enqueue_script('slick_js', get_template_directory_uri() . '/js/slick.js', array('jquery'),'', false);

}

function c2h_styles() {

wp_enqueue_style('normalize', get_template_directory_uri() . '/styles/normalize.css');
wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css');
/*wp_enqueue_style('modal', get_template_directory_uri() . '/styles/modal.css');*/

}

add_action('wp_enqueue_scripts', 'c2h_scripts');
add_action('wp_enqueue_scripts', 'c2h_styles');

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
   echo '<ul class = "list">';
}

   function my_theme_wrapper_end() {
      echo '</ul>';
   }
?>

As well as adding

<ul class=”list”>
     <?php woocommerce_content(); ?>
</ul>

It’s a tricky one for a rookie WordPress developer like me but I’m sure there’s an answer and I’m determined to find it for my own sake and for that of my client.

A simple web page with Bootstrap 4

Here’s a new piece of  content I just uploaded to my website.  To my very pleasant surprise, a new Treehouse course was unveiled in the course roadmap and released in as little as 2 weeks. And I’m excited because it covers the up to date version of the front end framework, Bootstrap.

I created a new web page on my portfolio site that covers this. A simple holding page for a fictitious tourist page for my village.  It’s a little bland at the moment but the point is, I created it in next to no time at all thanks to Bootstraps capabilities. Simply by adding classes to HTML elements I can add colour, and spacing and even javascript elements to any page that is linked to Bootstraps core files.

I’ll be adding to it as I go along so please keep checking back as the new site grows.

Making a WordPress Theme #2

By this point, we’ve linked the CSS and JS files and created default WordPress templates so the website takes some semblance of shape.

The problem is it is empty of content and, depending on what text has been entered into the admin area via pages and posts and there’s no means of getting around the site. No links.

But we can’t just display static data on a WordPress site. In order to update content and make sure changes we make to our content update on the website, it must be pulled in dynamically via the WordPress Loop.

But there’s a little more to it than that. We also have to dynamically pull in other pieces of content too, such as the website title and any permalinks so that pages link together correctly. Basically, any content that changes from page to page needs a WordPress function or a custom function to show the appropriate content.

Before we go into the WordPress loop, I’ll explain some of these functions.

Pulling in Dynamic Content

Remember now that all the design work is contained in php template files. That is how WordPress Works and unique content is generated in the admin area via Pages and Posts.

But there are smaller functions that echo out content sni  ppers outside the scope of the WordPress loop.

In header.php common ones are

wp_title();
wp_head();
bloginfo();

As we go through the markup there are certain things that need to be changed. Otherwise the same data will be displayed each time header.php and footer.php are called. So instead of static text inside for example the title tag. wp_title() is used, inside a separate PHP block.

Example: header.php
<!doctype html>
<head>
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>

wp_head() is a small piece of code that accomplishes a lot of tasks. It is this function that is responsible for enqueing the files we linked to in the functions.php file. All the styling, all the functionality via the javascript, if we didn’t have wp_head(); none of this would work.

<a href=”<?php bloginfo(‘url’); ?>”>
<img src = “<?php bloginfo(‘template_url’); ?>/img/jgdmLogo.png” id = “jgdmLogo” alt = “<?php bloginfo(‘name’); ?>
An independent web design business covering North East England and Beyond” />
</a>

the bloginfo(); function takes specific parameters as strings e.g. url, name and description, in order to display content to the screen. Another parameter, “template_url” is an argument that grabs the path to the template directory, wherever that lives of your WordPress installation. It can be used to generate a path to an image file that hasn’t been uploaded via the WordPress admin area.

<?php bloginfo(‘url’); ?>
<?php bloginfo(‘template_url’); ?>
<?php bloginfo(‘name’); ?>
<?php bloginfo(‘description’); ?>
Example: footer.php
<?php echo date(‘Y’); ?> – dynamically load copyright data.
<?php wp_footer(); ?> – loads wp menu bar

In this example there are 2 key functions that generate unique content. date() with a parameter displays a dynamically date to the screen based on a certain timestamp.

wp_footer(); works in a similar way to wp_head(). It will enqueue any files set in functions.php to loading the footer of the code as well as the JavaScript files that load the WordPress menu bar.

The WordPress Loop

In order to get the main content for any WordPress website the WordPress loop must be used. It can be used in one or two ways but the format below is in my opinion is the simplest;

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!– content –>
<?php endwhile; else : ?>
//alternative text if no posts found.
<p><?php _e( ‘Sorry, no posts matched your criteria.’ ); ?></p>
<?php endif; ?>

This performs a simple check to see if there is content to be found and to display the text while there is content. It only needs to be used once because WordPress is smart enough to know which content is assigned to which permalink.

So that’s the syntax. Let me post my example of how the loop is used.

<section class = “mainContent”>
<article class=”content-area”>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; else : ?>
<!– –>
<p>Sorry, found no content.</p>
<?php endif; ?>

First you have your opening HTML markup that your CSS will select. It’s important to get this right because there’s no facility in the admin area to affect how the text displays in the admin area, beyond the controls in the text editor. For absolute control you use CSS.

The first line of PHP checks for content from the admin area but doesn’t display it. To display the content we need at the very least a WordPress function called the_content(); This will echo out the text typed into the Admin area text editor. It will generate markup that can be picked up by CSS.

The rest of it is simply closing out the while and if portions of the loop.

Hooking in the Navigation

The WordPress loop pulls in content for all individual pages and posts of your website. Unfortunately it doesn’t do a single thing for displaying your navigation. It’s completely separate to it.

Fortunately, hooking up your websites navigation is fairly straight forward. I’ll go through the steps.

First, in functions.php we need to add support for menus to WordPress because it is not available by default. This is as simple as writing the following below.

<?php add_theme_support($feature, $arguments); ?>

$feature is a list of strings which add certain features. In this example we need to add ‘menus’s as a string parameter. $arguments is optional parameter.  Now, WordPress knows that you want to add a navigation area to your website.

The next thing we need do is let WordPress know that there exists in this theme one or more menus. This is stored as an array in the function register_nav_menus which is in itself stored in a function.

function register_theme_menus() {
register_nav_menus(
array(
‘primary-menu’ => __(‘Primary Menu’)
)
);
}

We then give this a function call the WordPress way making sure we do so whenever the page is loaded.

//when wordpress is initialising, call the above function
add_action(‘init’, ‘register_theme_menus’);

Finally we then find a specific location in our theme template for this menu to do. This is a skill in WordPress because you’ll have a specific format in your static markup and certain CSS styling.

<?php
$defaults = array(
‘container’ => false,
‘theme_location’ => ‘primary-menu’,
‘menu_class’ => ‘nav-collapse’,
);

wp_nav_menu($defaults);
?>

In my example I struggled for longer than I’d care to admit for how to get this to properly style in a WordPress template. It was in the right location but not all of the styling was being picked up. Further complicated by the fact I was trying to use a specific class that was used with a jQuery file.

Eventually I just did this

<nav class = “nav-collapse main-nav”>
<aside class=”hamburger”><img src=”<?php bloginfo(‘template_url’) ?> img/menu.png” /></aside>

<?php

$menu_args = array(
‘container’ => false,
‘theme_location’ => ‘primary-menu’,
‘menu_id’ => ‘navLinks’

);

wp_nav_menu($menu_args);
?>

</nav>

I wrapped the php function in HTML markup (why did I not do this before) and the problems disappeared. I let the markup do the work and in an instant, the navigation was there. Just as I wanted it.

Summary

So now I have a fully functional theme. I have my navigation working. I have one page that will pull in blog posts and the rest of my pages run from the page.php template meaning they display the right content for the appropriate page.

As I write this (14th March 2016) to I could deploy the website now if I wanted. But there’s a bit more to developing a WordPress theme. On my mind at the moment is how I can use and display WordPress widgets. That’ll be my focus in my next blog.