If you are just getting started and wondering what is a Post Loop in WordPress development, then this post will be a help. The loop can be a little confusing at first so we have decided to convert it into a visual model infographic to help explain what goes on, line per line. Please feel free to share.
Teal-Grey-Photo-Cycle-Diagram-Chart
When building your WordPress websites have you ever wanted to display recent posts from a specific category without going under the hood and editing the theme files? Diving into the code isn’t for everyone especially if you only want to implement this on a small area of the website such as a widget area. In this post, you are going to learn how to achieve this quickly and easily.
When showing recent posts in WordPress, this can usually be achieved using the recent posts widget, however, this does not allow you to target in on specific categories. There are third party plugins out there, but sometimes its good to be able to implement your own snippets of PHP without using a multitude of plugins for each task. Just use one plugin and implement your own code within it.
For this, to work a customized text widget called PHP Code Widget by Otto needs to be installed. It looks very similar to a text widget but accepts PHP which an ordinary text widget can’t do. Place this widget in any widget area available for the installed theme.
Once the PHP widget is in place, the following code needs to be pasted into it. This code is a basic WordPress Loop that runs through all the posts and identifies the category for each post. The title and link are then displayed.
<?php $catquery = new WP_Query( 'cat=11&posts_per_page=3' ); ?>
<ul>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata();?>The only areas of code that need amending are the category id and number of posts to display within the widget. In this case, three posts will be displayed. In order to identify the category number, head over to the posts category tab from within the dashboard and hover the mouse over a category. The ID will be displayed in the URL as shown below.
In the bottom left-hand corner of the screen, a URL will be displayed. The news category for this website is ’11’. This number will be different for every website. Once implemented, head over to the front end of the website and the latest three news category post titles show display like below. The only other difference here is the choice of CSS such as color, fonts, and arrows which will need to be added separately.
In this post, we learned how to manually add PHP and display recent posts from a specific category in a WordPress widget without going into the theme files. By doing this you can add PHP without worrying about messing the theme up. This is also good for small fixes and will help people learning to code grasp some important WordPress PHP fundamentals such as ‘The Loop’.
Learning how to join a background image and background color together using CSS is a valuable skill. Have you ever been given the task of converting a PSD file into HTML and found the image assets did not always fit your needs?. This will often require the intervention of custom CSS to solve the problem.
The example below shows this in action. The background image provided was a brown notch triangle, but the requirements were that this needs to stretch along with the page on a hover state to produce a menu arrow.
This required the need for adding custom CSS to extend the triangle to produce the desired effect without using a second image. The background color has been given a different shade to highlight the join.
The code below sets up the grey container area as well as the three H2 headings and font settings
<div class="container">
<div class="headings">
<h2 class="heading-1">HEADING ONE</h2>
<h2 class="heading-2">HEADING TWO</h2>
<h2 class="heading-3">HEADING THREE</h2>
</div>
</div>.container {
background-color: lightgrey;
border: 1px solid darkgrey;
padding: 20px 0;
margin: 0 auto;
width: 50%;
}
.headings h2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.1rem !important;
color: #993408;
margin: 30px 0px;
padding-left: 10px;
}
The CSS hover selector is used to select elements when hovered over by a mouse. The code below allows the triangle notch PNG to display to the right-hand side of the container and H2 heading selected.
By giving this image width of 4% and height of 100% the image will adapt to match the 96% width background and maintain ratio responsively.
.heading-1:hover, .heading-2:hover, .heading-3:hover {
background: url(https://robdoylecreative.com/wp-content/uploads/2020/02/brown-notch.png) no-repeat right;
background-size: 4% 100%; /*width and height of the notch image*/
position: relative;
padding-left: 10px;
color: #fff !important;
z-index: 1;
right: 0;
}
In order for the CSS color background to appear and join the background image, a special Pseudo-Element needs to be used called ::before. This allows content to be applied before a selected element which in this case is the triangle image.
The CSS below shows this in action. To find the color of an image, all that is needed is to use a service like https://imagecolorpicker.com/ . In this case the hex value of the image color is #E97820.
By giving this a width of 96% to add to the 4% image width the background color will also show on hover but before the image.
Z-index will need to be adjusted to allow the background color to sit behind the heading text, which in this case is z-index: -1.
.heading-1:hover::before, .heading-2:hover::before, .heading-3:hover::before {
content: "";
background-color: #e97820;
background-position: left;
position: absolute;
left: 0;
z-index: -1;
font-size: 1rem;
width: 96%; /*width of the css background*/
height: 100%;
}See the Pen Background image and color join with CSS by Rob Doyle (@RobertMDoyle) on CodePen.
As demonstrated above, merging background images and colors together is a useful skill that can be used in many scenarios such as putting icons before elements on a web page. Menus are also a place where this can be implemented easily.
There is also ::after Pseudo-Element which as you may have guessed targets after a selected element. These methods are also responsive when the screen is re-sized.
Are you a freelancer on Upwork and get frustrated when you see a job that you feel qualified to do but then realize that 30 other people have already submitted proposals that kick you out of the running?.
The main reason why this happens is that you have spotted the job too late. The key to Upwork is getting your proposal in as soon as possible after it goes live. The client will most probably look at the first dozen proposals then hire one of those freelancers in order to get things moving.
If you only check Upwork two times a day, then you are missing out on some good opportunities. The trick is to get notified quickly and maximize your chance of landing the job.
In this post, we are going to look at a few ways of delivering notifications using the Upwork RSS feed. Two using an RSS feed reader and the other IFTTT.
In order to make this work you first need a targeted RSS feed based on a particular search term. That may be “WordPress” or “CSS” or whatever your specialty is as a freelancer. To do this head over to Upwork and search for your keywords.
Once you see a list of relevant results, look to the left of the page on desktop and you will see a small RSS icon. Click on this and the feed will be displayed. Copy the URL of this feed. If “CSS HTML” was entered then only CSS and HTML jobs will be displayed.
Feedly is a news aggregator that runs in different web browsers and mobile devices. If you are working on your desktop computer then the Feedly Notifier Google chrome extension is a good choice. You can also get apps for Android and iOS that do exactly the same thing.
It is very beneficial to get notifications on a mobile phone as it goes where you go. This is a screen for the Feedly Android app:
To get things working paste the RSS feed URL from Upwork into the application. You may want to give your feeds specific names to identify them with your query. Once this is done you will see a list of the most recent jobs coming from Upwork. The only caveat to the free version of Feedly is that the feeds are updated periodically every couple of hours and not as every job is released. Never-the-less this keeps running 24/7 and keeps you posted which will be enough for many people. The paid version updates more often, as do all premium RSS readers which then brings this method up another level.
Inoreader is very similar to Feedly and also has chrome and mobile apps. The notable difference the free version of Inoreader has over Feedly is that it fetches feeds more often. Usually around every 30 mins. It is very easy to add feeds with the use of the chrome Inoreader companion app.
Once you click on one of the job links, such as “Upwork CSS Worldwide” it will take you to the Inoreader desktop app where you can view the jobs more clearly.
When using the Inoreader mobile app, the feed outputs as a simple text list for easy scanning, which then links to Upwork to view the original job posting.
IFTTT stands for “If This Then That”. It uses applets to automate tasks with what they call “Recipes”. Recipes run many tasks that could be looked upon as repetitive for a human to do manually.
For this task, we are going to use an IFTTT recipe called “RSS Feed to Email“. This is extremely easy to set up. All that is needed is to set up a free IFTTT account and click connect. Paste in the Upwork RSS feed URL when asked and any new jobs that go live on Upwork will get emailed to you. This may be a more preferable notification method depending on the individual.
IFTTT is also fast as like Inoreader, as it checks, feeds every 30 minutes and then sends out an email of any jobs that have gone live during that interval. You can change the titles of your emails to suit your needs from within the IFTTT app dashboard.
In this post, we learned how to use the Upwork RSS feed to get real-time job notifications. The first methods looked at was the Feedly RSS news reader and Inoreader. There are many other RSS readers out there. another one to mention is RSS Feed Reader which is also very good. These readers have great companion apps and are well supported. Because of the faster RSS fetch speed, Inoreader is the winner here.
We then looked at IFTTT which uses recipes to run tasks. IFTTT has been around for a number of years now and can do many different things. It links up well with Google applications like calendar and docs. For this task, a simple applet was being run to send new jobs added to the Upwork feed to email. This is very useful as email is often the thing people check most throughout the day.
Whichever method you choose, you will now be in a better position when it comes to getting your proposal in earlier rather than later.
In this post, we are going to learn how to create a vertical slick slider with custom dots and arrows using your own icons to replace the default buttons provided by slick.
Before we start the slider, files need to be installed into your working project. These can be downloaded from the official site Here.
This file structure shows the folders that need to be in place. This includes the newly downloaded slick folder as well as folders to hold your custom CSS and images. The extra folders and files here are for bootstrap CSS and JavaScript which is an optional step. The main working files for this project will be index.html and css/custom.css.
The first step is to point to the slick and custom CSS files by adding style sheets to the <head> section of the index.html file. This is followed up by creating the markup for the slider structure and content. In this example, three slides are being created with a div for each image and a nested div for the content.
<head>
<!-- Slick Slider -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
</head> <!-- Slider Section -->
<section id="slider" class="container-fluid">
<div class="container slick-slider">
<div class="slide">
<img src="images/slider-image1.jpg">
<div class="slide-content">
<h4>Slide Title 1</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore,Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<div class="slide">
<img src="images/slider-image2.jpg">
<div class="slide-content">
<h4>Slide Title 2</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloreLorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<div class="slide">
<img src="images/slider-image3.jpg">
<div class="slide-content">
<h4>Slide Title 3</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
</div>
</section>The JavaScript section mainly consists of one function with various values that can be added to enhance the functionality of the slider. By adding vertical: true this makes the slides scroll vertically. The arrows and dots are also enabled by changing the values to true.
To customise the arrows, a div needs to be added as a value to prevArrow & nextArrow. This is to allow a class to be declared in order to connect to the custom CSS.
In order for the dots to show as an active state for each slide, a customPaging function is added to point to the active and non-active dot images located in the images folder.
<!-- Slick Slider Script -->
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider').slick({
vertical: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: true,
prevArrow: '<div class="slick-prev"></div>',
nextArrow: '<div class="slick-next"></div>',
dots: true,
customPaging : function(slider, i) {
return '<a href="#"><img src="images/slide-dot.png" /><img src="images/slide-dot-active.png" /></a>';
},
});
});
</script>The CSS is a little more involved but fairly easy to follow. The slider has a light grey border and is full width with a position of relative so that the content can be absolute positioned with opacity on the right-hand side. The .slick-dots class mainly consists of the styles for positioning the dots on the right-hand side of the slider using Flexbox CSS. The CSS :nth-child() Selector works in conjunction with the JavaScript customPaging to allow the active red dot to show with the current slide.
With the .slick-prev & .slick-next classes declared in the JavaScript, the CSS can hook on to display the arrows and position them. The background-size needs to be set to “contain” and a position of absolute. The CSS :hover Selector is used allowing the arrow to change to the colour red whenever a mouse hovers over it.
/* Slider Section */
.slick-slider {
border: 10px solid lightgrey;
width: 100%;
padding: 0;
position: relative;
top: 5%;
}
#slider {
background-color: grey;
height: 100%;
padding: 2% 10%;
}
#slider img {
width: 100%;
margin: 0;
padding: 0;
}
.slide {
position: relative;
border: none;
}
.slide-content {
position: absolute;
top: 0px;
right: 0%;
height: 100%;
width: 35%;
background-color: #000;
opacity: 0.8;
color: #fff;
text-align: center;
padding: 25px 70px 25px 25px;
text-align: left;
}
/* Slick Dots */
.slick-dots {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
list-style: none;
text-align: center;
margin: 0px 3px;
padding: 11% 1% 11% 1.5%;
border-left: 3px solid lightgrey;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.slick-dots li img:nth-child(1) {
display: block;
}
.slick-dots li img:nth-child(2) {
display: none;
}
.slick-dots li.slick-active img:nth-child(1) {
display: none;
}
.slick-dots li.slick-active img:nth-child(2) {
display: block;
}
/* Slick Arrows */
.slick-prev, .slick-next {
height: 20px;
width: 20px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
.slick-prev {
background-image: url('/images/slider-up-arrow.png');
/* place button top right */
top: 2%;
right: 1%;
z-index: 10;
}
.slick-next {
background-image: url('/images/slider-down-arrow.png');
/* place button bottom right */
right: 1%;
bottom: 2%;
z-index: 20;
}
.slick-prev:hover {
background-image: url('/images/slider-up-arrow-hover.png');
/* place button top right */
top: 2%;
right: 1%;
z-index: 10;
}
.slick-next:hover {
background-image: url('/images/slider-down-arrow-hover.png');
/* place button bottom right */
right: 1%;
bottom: 2%;
z-index: 20;
}As you can see, learning how to create a vertical slick slider with custom dots and arrows is not a difficult task. Most of the work is done in the CSS, but once you understand the process, versatile and custom sliders can be created quickly.
JavaScript Multidimensional arrays are not supported natively with a specific syntax but they can still be created by placing arrays within arrays. This means that the elements within an array consist of more arrays.
The code example below shows how a JavaScript multidimensional array can be constructed to hold questions and answers for a quiz.
Working inwards, the outer array holds all the questions and can have more than one if comma separated. The next array holds all the elements for one specific question. These become their own comma-separated arrays. This includes the question array, an array with all the answer choices, a correct answer array and finally an array to state how many answers were considered correct. Remember arrays are zero-based.
const questions =
[
[ [ "What does alt text stand for?" ], //Enter Your Question
[
"Alter ego text", //Multiple Choice Answer (A)
"Alternate text", //Multiple Choice Answer (B)
"Alternator text", //Multiple Choice Answer (C)
"Alternating text" //Multiple Choice Answer (D)
],
["B"], //Correct Answers
[1] ], //How Many Correct Answers for This Question
];As an example, to access the correct answer manually and print it to the console, all that would need to write is:
console.log(questions[0][1][1]);
"Alternate text", //Multiple Choice Answer (B)This method of holding data can be coded up to create a very advanced quiz application. The purpose of this post is just to show you what a JavaScript multidimensional array is and how it is constructed.
JavaScript Multidimensional arrays can be very useful, especially in a scenario like a quiz as so much information can be very neatly held together whilst producing short, clean and concise code that is easy to access.
Do you know how to make an animation using CSS only and no JavaScript?. Today we are going to dive into a fun little CSS3 Animation demo that will show you exactly how easy it is to do.
Sometimes when you visit websites you may see some cool animations to help get a message across. This could be for branding, enhancing the website or just for fun. This example is just a fun way to show you how easy it is to implement without JavaScript.
CSS3 has a great feature in it called Keyframes which specifies different values along the different stages of an animation cycle. These are initiated using the @keyframes rule.
Below we are creating an empty div with a class of “box”. This will be targeted within the CSS to show a 100px logo box within the browser.
<div class="box"></div>Here is the @Keyframes rule that contains all the action points between 0% and 100%. In this example, the action points are 25%, 50%, 75%, and 100%. The comments in the code explain in detail what each action point is doing, but this is allowing the box to move to all four corners of its container anti-clockwise starting top left and finishing top left.
@keyframes circleThePage {
0% { /* top left starting point */
left: 0;
top: 0;
}
25% { /* bottom left 2nd point */
left: 0;
top: calc(100% - 100px); /* 100% from top minus height of box */
}
50% { /* bottom right 3rd point */
top: calc(100% - 100px); /* 100% from top minus height of box */
left: calc(100% - 100px); /* 100% from left minus width of box */
}
75% { /* top right 4th point */
left: calc(100% - 100px); /* 100% from left minus width of box */
top: 0;
}
100% { /* back to top left starting point */
left: 0;
top: 0;
}
}This rule is targeting the “box” class and giving it a size, background image and declaring the @Keyframes rule created called “circleThePage” within “animation-name”. Other CSS properties are used to help control the animation such as duration, fill-mode, direction, iteration-count, and timing.
.box {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-image: url('https://robdoylecreative.com/wp-content/uploads/2019/12/header-logo.png');
animation-name: circleThePage;
animation-duration: 8s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear; /* or ease etc.. */
}The CodePen below shows the animation in action. These settings can be changed to allow all sorts of cool effects and customization.
See the Pen CSS3 Animation Mini Project – Skim the Edge by Rob Doyle (@RobertMDoyle) on CodePen.
Knowing how to make an animation using CSS only is a useful skill. Normally you would expect JavaScript to be hiding somewhere within this sort of code. Not in this case. Its just CSS3 and one empty div.
When you visit some websites, have you ever wondered how text can be transparent over an image or background, or there is a transparent box with text?. Well, this is not as difficult to do as it seems, we just need to apply a few lines of HTML and CSS. Read on as I show you how it’s done.
In this example, I am going to use an image as a background and show you how to add a transparent text box over an image using CSS.
First, we need some HTML markup. Here we are creating a wrapper div and within it is the background image and another div for the text box. Nested within the text box is yet another div containing the text content. In this case an H2 heading and a paragraph of text.
<html>
<div id="wrapper">
<img src="images/nature.png">
<div id="textbox">
<div id="content">
<h2>Let's Explore the Great Outdoors</h2>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</div>
</html>
Next, we need to add the CSS for the wrapper, text box and content. The wrapper needs to be given a position of relative so that the text box can have a position of absolute. The text box can then be moved using ‘top’ and ‘left’ CSS properties. The box is then given a grey background with an opacity setting. In this case 0.8. The text is centered using ‘text-align: center’
As the text content is nested within the text box, all that is added with CSS in this scenario is padding. Here is the CSS:
#wrapper {
width: 640px;
margin: 0 auto;
position: relative;
}
#textbox {
margin-top:50px;
background-color: lightgrey;
position: absolute;
width: 300px;
height: 400px;
opacity: 0.8;
top: -12px;
left: 35px;
text-align: center;
border: 2px solid silver;
}
#content {
padding: 100px 30px;
}
As you can see learning how to add a transparent text box over an image using CSS is very easy to understand with minimal code and no JavaScript. Doing this on your websites can really make your message stand out. Try it for yourself and see.
So I’ve been looking at a lot of blog, forum and social media posts lately and seeing many people talking about learning to code in their 30s, 40s and 50s and beyond. These people are looking for support but often are met with negative comments saying that they shouldn’t bother or they are too old. Now it would be silly and nieve to think that agism does not exist in all different kinds of industries because it does. However, it doesn’t have to be that way for you. You just need to get the message across that you can do the job or service and that you can provide plenty of value in the process.
Age can be a social stigma but a lot of good employers are really only interested in who can do the job as opposed to whether you fit into a certain social category. There are company cultures which might frighten off older coders from applying for jobs due to the fact that they may be working with younger developers who may not have the same interests as you. This may be an issue but it really doesn’t matter because at the end of the day it should be about what you can do and not how old you look. Commitment should go without saying.
I am 50 this year and I don’t have a background in computing or coding I used to work in the printing industry for 25 years and then I decided I wanted out to go to university to do a business computing degree. After 3 years I came out with the first degree with honours and realised that yes I can learn to code and work alongside students half my age who did not judge me for my age. If anything there was mutual respect and we all became friends and helped each other out. I found that University was a very rewarding experience which I would recommend to anybody because of the confidence you can build as well as the soft skills that you can learn from such an experience.
After leaving University I decided to become more specialised in the skills that would be required to be a freelance front-end web developer and focus my attention more towards WordPress JavaScript HTML CSS and frameworks. I have now launched myself as a freelance front-end web developer specialising in WordPress theme development and deploying websites for clients. This has all been achieved through focus and determination, self-drive and belief that you can achieve what you want by taking no notice of any of the trolls out there who would say otherwise.
If you believe that you can do the job then don’t let anybody stop you from living your dreams. If you are an older developer don’t worry about seeing yourself as the stereotypical developer typically out there as you can learn to code at any age. Sure certain opportunities might not arise for you due to ageism, and this is just part of the game. Just give these clients and employers a wide birth as they are not worth your time or working for anyway.
For me, freelancing is proving to be the best fit. This gives me the freedom to work the hours that I choose that fits in with my lifestyle. The year 2020 will be an exciting year for me as I grow as a freelance web developer. I will be continuing to develop my skills because one thing is for sure if you can accept that you’ll never be an expert but always a student to web development and that technologies and languages are always changing you can remain a humble developer who knows that this will always be a work in progress and that every day is a school day (no room to be big-headed here).
Development is an ocean of information that can easily overwhelm anybody learning how to do this whatever age you are so it is my recommendation that you specialise and focus on a set of skills and in doing so so you will gain greater confidence in taking the leap to do the professional service that you know you can offer. For me, that is front-end development, but more specifically WordPress as that fits in very well as a freelancer.
If anybody is reading this is worried about learning to code later in life, then stop right there because there is nothing you can do about that. There is no elixir of life or time machines, so stop worrying about it. Just look in the mirror and say “I can do this”, I can provide value. To be older can offer extra value and soft skills that a younger person can’t offer. Feel the fear but do it anyway, you may just surprise yourself.
If you are an older person learning how to code and you have any opinions or experiences with this subject then please leave a comment below and let’s discuss it because I feel what I’ve overcome the major obstacles that were holding me back although I must say I’ve had my ups and downs along the way. Nothing is easy but it is all very doable.
