Jonnie Grieve Digital Media: Website Blog.

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

View my latest blogs on Medium

I’m trialing blog writing on medium for the time being.  If you like you can view my first blogs here,

https://medium.com/@jg_digitalMedia/i-joined-medium-last-night-f21a26e029b4

and here!

https://medium.com/@jg_digitalMedia/android-blog-debugging-an-android-app-fc0ab95ebeac

 

Making a WordPress Theme #4

The theme I’ve been building uses 3 main template files.

These are:

home.php – which we already have set up. it lists blogs that are generated as separate posts in the admin area. Additionally, the template can also be selected as blog template.
single.php – single blog template. This is the template that controls what a single blog post page looks like.
archive.php – which is a template file that WordPress sets aside as a template for a categorised list of blogs. Every time you set a blog category for your blog posts, it gets added as a clickable list of post categories.

Making a blog, a blog!

That’s all great, but when I last left the blog, the blog didn’t have the look of a WordPress blog about it. All it did was generate one blog post after the other… the whole blog for each blog post, and this isn’t necessarily what we’re after. It would be good to have a brief and more structured list of blogs for the blog listing page and some way for users to make comments on the page. What would also be good is to have a clickable title for each log listed on home.php that would take us to that blog post.

Thankfully, WordPress has a whole host of built-in functions that can accomplish this.

These functions are

the_excerpt()
get_avatar()
get_the_author_meta()
the_author_posts_link()
the_category()
the_date()
the_time()
the_post_thumbnail()
the_permalink();

So we could do something like…

<h1>
<a href="<?php the_permalink ?>the_title();</a> </h1>

   <p><?php the_excerpt() ?></p>

</h1>

…just to make sure to make sure each title has a clickable link that would then take you to the appropriate blog. WordPress is then smart enough to know which page is supposed to link to which permalink.

the_excerpt(), cuts off display of text in a blog post at a certain point. This makes sure the blog listing page is consistent and has a nicer feel. One blog is likely to be much bigger than another and having this function in place is a great way to get around that.

wordpress-post-1

You can further customise when this cut off will take place on the blog index. By putting the following function in the functions.php file.

function wpt_excerpt_length($length) {
return 16;
}
add_filter('excerpt_length', 'wpt_excerpt_length',999);

Simply edit the return value, which is stored as a single argument of the function. The 999 number simply ensures the function doesn’t conflict with another in the file by changing its action priority so it runs at a certain point.

Next attention turns to identifying the post author. That is a glaring omission for any blog post. We get the blog author by using the following php function.

<?php echo get_avatar( get_the_author_meta('ID'), 24); ?> get_the_author_meta()

This will display the author of the post to the screen. The retrieve the associated Gravatar you use the get_the_author_meta(‘ID’), 24) with the size of the retrieved image passed in as an argument.

Then to finish off the blog makeover, the list of categories associated with the blog post we simply use the function the_category(). In order to list the categories in a visually pleasing manner, we pass in a separator as a parameter.

And then we just have to find a way to structure it using markup and then of course, CSS. Using lists is a great way to do this. And, in just a few lines of code, we’ve successfully added WordPress blog elements to go along with the WordPress Loop.

<ul class="post-meta">

     <li>Posted by: <a href="">
        <?php echo get_avatar( get_the_author_meta('ID'), 24); ?></a>
        <?php the_author_posts_link(); ?> on <?php the_time('F j, Y'); ?>
     </li>
     <li>
         With the following post categories: <?php the_category(', '); ?>
     </li>
</ul>

wordpress-post-2

Finally you may have noticed the time function included with some strange-looking letters passed in as a parameter. These are date formatting arguments. But doesn’t display a time. We could use the_date() function for this but the reason I opted for time is so that each post displays a date regardless of whether 2 or more blogs have been posted on the same day, so a post doesn’t look out-of-place.

And that’s it. We have a blog.

But there’s a few other “housekeeping” things I wanted to explain before I close the blog

Condition Statements.

Blog post templates are made more powerful when combined with condition statements. We could use one for example to check if a post has what is called a featured image. At the moment, I haven’t coded WordPress to show one

But if I wanted to I’d have to check one exists by using a simple statement like this.

<?php if (the_post_thumbnail() ) : ?>

   markup

<?php ?>;

   markup

<?php endif; ?>

The first line checks if featured images exist and then if it does displays it. If not, the else (the only alternative option in this condition statement is run instead. the_the_post_thumbnail() in the markup

using strip_tags()

In some cases it may be necessary to strip the front end of certain tags that WordPress might add. To do this you simply pass the post content, as a parameter of the strip tags function.

<article class="post">
   <h1>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h1>
   <h2><?php strip_tags(the_excerpt() ); </h2>
</article>

Now any extra HTML elements that WordPress adds in will be stripped out, so you’ll have changes made via the Admin editor and elements coded in your template files but nothing else.

Checking Formatting styles for blog.

Now there was one more check I wanted to do. I wanted to write some CSS for every possible formatting scenario that might exist when writing a blog post or new page.

So, I added a new post with every possible formatting example the WYSIWYG editor on WordPress provides

wordpress-blog

Some of the formatting wasn’t picked up via the CSS because there were no CSS selectors for it. I had heading elements, list items and preformatted text that wasn’t picked up. No problem, Now the confidence is there that the text will be used no matter what formatting is applied.

wordpress-blog-2

Conclusion

This concludes all of the ddevelopmentI wanted to cover for my WordPress theme. It is a pretty standard theme and there is a lot more to learn, but this theme I think will serve me well as I can now write blog posts directly into my website, which means plenty of opportunities for great unique content.

There is much more that can be done with a WordPress theme. I could investigate and use use a framework like Genesis for example. But this is for another day.

In my final blog post for this series I’ll cover how I transferred the website from where it currently lives (on localhost) to my web domain.

Managing projects with Git

Up until very recently, in fact not even a week ago Git was still very far from my mind.  I was all set up with Git Powershell and the GUI application for Windows but it was still a forgotten about icon on my desktop. But something, always keeps dragging me back.   Repetition. I keep seeing Git projects sourced online.  If I find a web application or project online that’s good for anything it will be hosted on GitHub.

Everyone I have asked tells me that every web application worth their salt is run via  Version Control software and the most popular of these is Git. So just before last weekend I got back into it to try and flex my git muscles and try and get over any bugs in the system that have put me off in the past.

I wanted to answer a number of questions.

  • Firstly I’ve been trying to work out what makes Git work, where the files live.   One annoying thing is that some of the file paths weren’t visible in Windows Explorer in the Windows environment.
  • I didn’t quite understand how Git knows where to send files to and how it authenticates usernames and remote repositories; basically how does Git know
  • How projects of upwards of thousands of “commits” are managed.
  • Can I get over this hang up I have in my mind about Git Merge conflicts
  • Can I get into the habit of using Git in a large scale project despite having worked all my professional like without VCS.

All this and more has in the past stopped me from working with Git regularly.

To answer the first point, it is perfectly natural for Git to work with files “under the bonnet” as it were so they don’t show up in Windows Explorer or Konquerer, or any other file system you use for your platform. But they’re always visible with Git  

ls -a

which will show the behind the scenes files that git uses to track changes..

In terms working out how the command line links with GitHub I’ve made some recent breakthroughs.  I was scratching my head, endlessly flicking through Gitub, the command like and the documentation when inspiration struck.

I was able to locate the path to Git by opening the file location and seeing the application in the AppData folder which isn’t openly visible.  Therefore I was able to copy the file path.

Path to Git: C:\Users\PC2\AppData\Local\GitHub

Another important file path was the ca-bundle CRT file.  In the Git Powershell the path given on my system is this.

http.sslcainfo=/path/to/Git/mingw64/ssl/certs/ca-bundle.crt

I noticed that one of the directories was mingw64. I didn’t have that. I only had mingw32.  I didn’t know if that would mean anything in terms of being able to set up cloning of repositories. All that fishing around for the core Git files didn’t seem to help.

But earlier on something weird and unexpected happened. I got an email in my associated GitHub email account telling me a new public key was added.

I didn’t have a clue how that happened or what it meant, but earlier on I had opened the GitHub GUI application and had a poke a round.  A cleaned out a couple of redundant repositories and scanned for the latest ones.

As a test, I attempted to clone a remote repository on Github.

C:\path\to\repo> git clone http://github.com/username/repo.
git
Cloning into 'ugliestcss'...
remote: Counting objects: 37, done.
remote: Compressing objects: 100% (26/26), done.
remote: Total 37 (delta 10), reused 36 (delta 9), pack-reused 0
Unpacking objects: 100% (37/37), done.
Checking connectivity... done.

I gasped with excitement  I’d just successfully cloned a GitHub repository .

So I pressed on.  If I’ve been able to get on to GitHub and fork a repository to my computer, surely I’ll be able to put my local repository onto my remote. If I’m right, here I next needed to set up the local files to be pushed up to GitHub.

cd new_repo
C:\path\to\repo\new_repo [master]> git remote add origin https://github.com/jg-digital-media/new_repo.git
fatal: remote origin already exists.

Not exactly encouraging; I didn’t quite know what that meant. but I took a leap of faith. I think it’s telling me that the files are ready to pushed to GitHub. A link to the remote repository as it were

So I just tried the next step

C:\path\to\repo\new_repo [master]> git push origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 787 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/jg-digital-media/new_repo.git
* [new branch]      master -> master
C:\Users\PC2\Documents\GitHub\new_repo [master]>

And sure enough the repository, just a simple file at the moment is now up on GitHub.

So what was it that made it work? Opening the GUI application automatically sending an SSH key?  I believe so. I’m reliably informed that behind the scenes the GUI application that ships with Git/GitHub communicates with your GitHub account to create a connection, for each repository so you don#’t have to input a username and password every time you push and pull changes to your work.

In the last few days I’ve created small repositories with dummy/test work, broken things and started a fresh with new repositories. With practice, I’m getting there and the foggy areas of the Git workflow for me are clearing.

git remote add origin https://github.com/jg-digital-media/new_repo.git
git push origin master

Where the first command creates a connection to a repository called origin (this could in fact be any name you give) the second command actually looks for the repository and sends the updated files to Github, branch by branch with the master branch being the default branch.  You’d have to specify a different branch if you wanted to update the contents of that branch.

So what about large scale projects like WordPress websites or game/software development? Well I suppose that will only come with time spent and self confidence.  The thing to remember about scrolling through the commits is to make them identifiable and memorable.  So long as we make fast and frequent comments to the work the work history will always be there.

Making a WordPress Theme #3

The third stage of making a WordPress Theme I wanted to concentrate on is Widgets; and it is trickiest area to work with to date. Not in terms of the technicalities of making WordPress recognise widget areas, but of simply finding a place for the widget to go. Because at the time I didn’t know if I wanted widget areas in my theme I didn’t think so far ahead as to prepare a widget area in my static theme. For the most part, I planned for the site will be free of widget areas visually but I did find I wanted a couple of widgets in the top and bottom of my blog content i.e. the home.php template. In terms of finding getting widgets to work it is quite straight forward.

The basic process is as follows

  1. Create a widget area in functions.php
  2. Find a place in your templates for the widget to actually go.

As a WordPress Developer, you are in complete control of where your widgets appear. This is how I did it for my theme.

“Hello WordPress, I’m adding a widget area to this theme”

There are 2 main functions that WordPress uses to create Widget areas. These are create_widget and inside it, register_sidebar. Sidebar is WordPress speak for a widget area. I suspect, although I’ve not researched it, that’s simply a throwback to early days WordPress terminology.

What happens here is that  an array of objects by using some parameters.   These control the name. id and the description of the widget area; so customisable strings that describe the widget and what it will do.

The ID key doesn’t go in the admin area.  It is merely a unique identifier for the individual widget.  This is the id or slug that WordPress will use to distinguish it from another.

Then the function is then called and the values for the parameters passed in. You’d then see this values in the Widgets page of the admin area. That’s all you need to make the widget area appear in the admin area. There are a few other customisable options such as using dynamic HTML classes as containers for your widgets but these are optional.

Once added, all the widgets are available and can be dragged into the widget areas via admin area.  But much like we did with the menu area for WordPress, all we’ve really done is let WordPress know that a widget area exists.  The next stage is to let WordPress know where in the template it is.

Now WordPress, here’s the place for my widget

WordPress uses a specific template file for widgets that is used to store the widget markup. So this is where the building blocks of the widget will go.

We generate a widget by first checking that a widget with a certain id exists. If it doesn’t we generate some markup telling us that there is a problem. But if everything does work we should see the widgets below.

wordpress-widgets

How did I get it there?

I carefully placed  a function call anywhere in the desired template file to finally display the widget.  I used a WordPress function called get_sidebar that directly called the sidebar.php function.

That is how to use the function in its simplest form.  And that’s all that is needed to display the widget in this case. But there are a couple of issues regarding using the function I think are worth talking about.

First of all, if you wanted to retrieve a widget that’s been given a particular id you simply pass in that widget id as a string.

Whereas

will call the contents of sidebar.php you can also pass in a string like this.

Currently all I have is the sidebar.php that has my widget, because that is the widget with the id of blog, but if I put it in its own template such as sidebar-blog. So if “blog” was the ID of the widget, WordPress would call that template file sidebar-blog.php.

The second point is that if you’re using get_sidebar() function it can only be called once. For example if you were to have a function call at the bottom of the template and another at the top then only the one at the top will work.

There is however a work around that I utilised to show 2 copies of the same widget.

I went into my home.php template and first used the standard WordPress function to call the widget and the top and secondly called the sidebar.php file directly rather than using a function. I called it using an include, using a path to the template folder and the adding the file as a string argument. This was the result.

 

wordpress-widgets-2

Conclusion: What’s next?

So now I have my design, navigation, blog and widgets set up for my theme.

But there’s still some work that can be done with the blog. At the moment, it only displays a certain amount of posts, there’s no pagination or anything that indicates that the blog looks like a WordPress blog.  That needs changing, and this is what I’ll focus on next.

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.