I spent days researching free keyword tools. The list is segmented between SEO keyword generator tools and keyword research tools. I focus on my top 5 which I use all the time but I also included 6 additional keyword tools that are worth mentioning but fall short IMO.

Best Free Keyword Generator Tools

Use the following free tools to get keyword phrases for your main SEO keyword and supporting keywords:

1. Keyword Sheeter
2. Infinite Suggest
3. Google Keyword Planner

#1 Keyword Sheeter

Do you need SEO keywords – a lot of keywords? Then this is your tool. Keyword Sheeter uses Google Suggest/Autocomplete to generate a huge list of keywords.

FYI, I used the phrase “Free SEO Keywords” for each keyword tool on this page.

How Keyword Sheeter Works

Perhaps you know this trick:

• You type your keyword phrase into the Google search box
• Then you hit the spacebar and type “a”
• That will show your phrase and then suggestions with the next word starting with the letter “a”
• Then you have to manually write down those phrases
• Then repeat for letter “b”… then letter “c”, etc.

That’s a lot of work. This tool saves you a lot of time by programmatically doing that for you and returning long-tail keywords. The downside is that long-tail keywords tend to be low-volume but they are easier to rank for.

You do not get any extra fields like monthly search volume, Cost-Per-Click (CPC), or Keyword Difficulty/Competition (KD). Free things don’t have the bells and whistles of paid tools.

You can stop the generator tool at any time and copy the keywords into a document. This is a great way to come up with future blog posts or shorter social media posts.

Overview of the free SEO keyword tool Keyword Sheeter

• It finds long tail keywords by simulating an Autocomplete search on Google.
• Start with your keyword then it goes through each letter of the alphabet.
• Click the “Start sheeting” button.
• Click “Stop” when the results start getting too broad or into unrelated keywords.
• Copy/paste the results for content ideas.

Options

• Search type: Classic (standard Google search), YouTube, Products, News, Images, Books.
• Country selector: Choose a US state and city.
• Language selector.
• Positive filter: Any word you add here includes that word in the keyword phrase limiting your results. I added “tool” which greatly reduced the overall count. I suggest starting with a 2 or 3-word phrase and then adding 1 or 2 words in the positive filter field.
• Negative filter: Add words you don’t want. It’s best to look at your first set of results and look for keywords that you never want in your output.

Once you find your top keyword phrases, use one of the free keyword research tools below to pick the best SEO keyword for your posts.

#2 Infinite Suggest

Infinite Suggest also uses Google Suggest to return long-tail keywords but the keyword list count is much lower. I would hope they somehow filter to return the “best” keywords, but I would have to research every keyword on a short list to determine if that is true or not.

The tool has options for the language and Google for various countries such as google.co.uk for the United Kingdom. There is an Export button (named infinite-suggest-export.csv) and you can choose to “Save” or “Hide” any keyword before exporting. If you do not click Save or Hide, then all the keywords are exported.

The only valuable column is the keyword column. There are no other important values like search volume or keyword difficulty.

NOTE: The “More Data Column” has a link labeled “View Keyword ->”. It opens the RankTank page but RankTank is NOT free.

#3 Google Keyword Planner

Open up Keyword Planner and click the “Discover new keywords” button/card.

Enter your keyword in the field under “Start with keywords” then click “Get results”.

Here is a screenshot of the results but the UI is horrible. My search yielded 800+ records which I exported as a .csv file and opened in LibreOffice Calc. The search volume numbers seem bogus so this tool is only good for generating keywords.

This keyword tool is free but you would think Google would provide something more useful. Look for my article on using the Google Search Console API to get better data from Search Console.

Best Free Keyword Research Tools

The following two resources are the best free keyword tools for researching the keywords found with the tools listed above:

1. Moz Keyword Explorer
2. Wordtracker Search Tool

#4 Moz Keyword Explorer

Enter your keyword phrases, select your language then click the “Analyze” button.

The important stats are Monthly Volume and Difficulty. If you are just starting out then “Minimum Domain Authority” does not matter. You will never rank unless you get in the game. If you have a good idea for an article then just right the article. In time your website domain will increase.

The following screenshot shows your keyword along with related keywords. So there are more keywords you can use plus you can see the monthly search volume and difficulty for each keyword. Choose wisely!

You can export the results as a .csv file but it appears you only get 10 searches per month: “10 of 10 queries available until 05/31”.

If you have to use a different device or even the computer of a friend or family member. Keep in mind, that if you are doing this by yourself, it is hard to write more than 1 blog post per week. Shorter social media posts are a different story.

#5 Wordtracker Search Tool

Enter your keyword into the text field and choose your “Territory” then click the “Search” button. Here are my results:

This keyword tool shows 100 keywords with volume, competition, and another field labeled KEI (Keyword Effectiveness Index). Hover over the circle “i” for more information on that field.

The problem with this tool is that you can not export the results so look for your optimum keyword then start writing your post!

Alternate Free Keyword Research Tools

I spent many days researching free SEO keyword tools and literally tried dozens of them. The 5 listed above are the only ones I use now, but here are 6 more you should look into:

#6 KWFinder

• Only 1 search per day, only 15 results.
• Includes search volume, CPC, and KD.

#7 HOTH Keyword Planner

• It’s pretty good but you need to do 2 reCaptcha image tests.
• The results include search volume, CPC, competition, and KD.
• You can export the results as a .csv file but you only get 50 records.

#8 Ubersuggest

• You can export the results as a .csv file but only 20 or so records are exported.
• The results include search volume, CPC, and Search Difficulty (SD).

#9 SearchVolume by SEO.ai

• You have to supply a list of keywords and all you get is monthly search volume, and you have to solve 2 reCaptcha image tests.
• You can choose 1 of 10 countries as the source.

Alternate Free Keyword Generator Tools

Here are 2 more sources to get a list of keywords:

#10 Keyword Tool

• Enter your keyword and language but this tool only shows keywords, everything else is blurred out.

#11 ChatGPT

I use ChatGPT as a starting point for various prompts but I do not 100% trust what I get back from the AI tool. I used the following prompt:

Give me a list of keywords for the phrase “free SEO keyword tools”

Here are the keywords it gave me:

• Free SEO tools
• Keyword research tools
• SEO keyword research
• SEO tools for free
• Best free SEO tools
• Free keyword planner
• Free keyword tool
• Keyword suggestion tool
• SEO keyword generator
• Keyword research software

As you can see, that only resulted in 10 keywords, so I asked for 30 more keywords. The total list looked “okay” but 25 of the initial 30 phrases all started with “Free”. That’s why AI tools should be used as a resource and not as the primary tool.

Final Thoughts

I’m sure there are other free keyword tools but I wonder if they are better than the ones in this list. Feel free to contact me if you find a great tool and I will add it to this page.

The post 11 Free Keyword Tools for SEO Ranking appeared first on Kernix Web Design.

In this article, I cover 7 methods that are used by both arrays and strings. Learn these 7 methods and you actually have learned 14 JavaScript methods. I also cover an additional 7 methods that use different method names for the same or opposite purpose.

String and Array methods in common

The easiest set of methods to learn is the methods that work for both arrays and strings. There are 5 methods that have the same name and same effect for both strings and arrays. There are also two “properties” in common to both strings and arrays.

The string and array slice() method

Use slice to return a copy or a portion of a string or array without mutating the original.

Use str.slice() to return a copy of the string.

Use arr.slice() to return a copy of the array.

Both methods can be used without any arguments, with a start index only, or with both a start and ending index. For more information on the methods check out MDN String Slice and Array Slice pages.

The string and array concat() method

The concat method concatenates, or merges, two or more strings or arrays together by adding the value in the parentheses to the end of the calling string/array. Check out MDN String concat and Array concat for more information.

Use str.concat(str2, str3, …) to join 2 or more strings and return a copy of the joined strings.

Use arr.concat(arr2, arr3, …) to join 2 or more arrays and return a copy of the joined arrays.

NOTE: Using the + and += assignment operators used with strings accomplishes the same effect as concat(). It is strongly recommended to use the assignment operators instead of the concat() method with strings.

The string and array includes() method

The includes method is extremely useful, especially as a condition in if statements. Take a look at MDN string includes and array includes for syntax and examples.

Use str.includes(value) to perform a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.

Use arr.includes(value) to determine whether an array includes a certain value among its entries, returns true or false.

The string and array indexOf() method

The indexOf method is also extremely useful for various purposes. Check out MDN string indexOf and array indexOf for more examples and syntax.

Use str.indexOf(value) to return the first index at which a given element can be found in the string, or -1 if it is not present.

Use arr.indexOf(value) to return the first index at which a given element can be found in the array, or -1 if it is not present.

The string and array lastIndexOf() method

The lastIndexOf method works as the indexOf method but searches starting at the end of the string or array. Check the string lastIndexOf and array lastIndexOf methods on MDN.

Use str.lastIndexOf(value) to return the last index at which a given element can be found in the string, or -1 if it is not present.

Use str.lastIndexOf(value) to return the last index at which a given element can be found in the array, or -1 if it is not present.

Two properties in common: length and bracket notation

The following two techniques are not methods but are common to both strings and arrays. Both .length and bracket notation are very useful and you probably are already aware of them, but I wanted to include them all the same.

Use str.length and arr.length to return the length of the string and array respectively.

Use str[index] and arr[index] to return the string character and array value at the specified index respectively.

String and Array methods with different names but with similarities

Here are some other methods that have different names but have the same or opposite results. Personally, I do not use the first two methods and have only occasionally used the substring method.

charAt and at methods

Using str.charAt and arr.at returns the value at the index similar to bracket notation. There are reasons why you would use the arr.at() method over bracket notation (see MDN array at method), but I fail to see the application for the string charAt method.

Use str.charAt(index) to return the character at the index.

Use arr.at(index) to return the array item at the index.

Substring and splice (and slice) methods

Splice, slice, and substring all extract a part of an array or string. Substring and slice are identical with the exception of edge cases.

Use str.substring() to return a part of a string.

Use arr.splice() to return part of an array.

Slice and substring do not mutate the original source, but arr.splice() does. Check out MDN substring and array splice pages for more information. You should use all 3 methods on strings and arrays where applicable to understand the differences.

Split vs. Join methods

The split method is fantastic when working with strings. I believe I have only used the array join method in conjunction with split.

Use str.split() to turn a string into an array of substrings.

Use arr.join() to turn an array into a string.

NOTE: These two are often used in tandem. A common problem you will see is to turn a page or blog post title into a URL slug with a dash (-) as a separator. freeCodeCamp has an intermediate algorithm called Spinal Tap for that scenario but with some tricky test cases.

Check out the MDN pages on string split and array join for more information.

Final Thoughts

Hopefully, comparing JavaScript string and array methods like this has made learning JavaScript a little easier.

There are a handful of other string methods you should learn, and a lot more array methods as well. Let this article start you on the road to improving your understanding of JavaScript.

I have a repository on Github called JavaScript Cheat Sheet though it is way bigger than a cheat sheet, and is still a work-in-progress. Take a look at it and start building your own JavaScript cheat sheet to help you get coding better and faster!

The post Learn JavaScript: String and Array Methods appeared first on Kernix Web Design.

In this Markdown cheat sheet, I will show you the basic Markdown syntax to create your first README.md files followed by some intermediate and advanced syntax to make your repos look professional.

Basic Markdown

If you found this article then you already know what markdown is and that you need to learn it. I will not cover what it is, why you need it, who invented it, etc. Let’s get into it.

Below are some of the most common styling that you would want in your README files. Consider cloning or forking my markdown-cheatsheet repo on GitHub to see examples of what you can do.

By the way, you can preview markdown in VS Code without an extension, although some markdown does not display such as footnotes. Look at the red arrow in the image below – just click on that. It helps to toggle the sidebar and been reduce the markdown file.

Headings and paragraphs

Paragraphs are just regular text with 2 line breaks needed between each paragraph and other elements.

There are 6 heading sizes in markdown like there is in HTML, though I never use h5 or h6 for my pages. You just use 1 through 6 hashtags for heading1 through heading6.

NOTE: There is an automatic horizontal rule added when you use syntax for H1 and H2.

# Heading1 ## Heading2 ### Heading3

Blockquotes

This would be useful to quote someone you are contributing with. Use a greater than sign (>) to show a blockquote. Use 2 for nested blockquote but who does that?

> This is a quote > > Try an empty line like above > > > Or use a nested blockquote

Bold text

Use either 2 asterisks or 2 underscores before and after the text for bold styling. The preferred syntax is to use asterisks for bold: **bold text** or __bold text__.

Italic text

Use a single asterisk or underscore before and after text to display it as italic. The preferred syntax is to use an underscore for italic: *This is italic text* and _So is this_.

Bold & italic text

Use either 3 asterisks before and after the word(s) or 2 asterisks and an underscore:

***This is bold and italic text*** **_This is ALSO bold and italic text_**

Strikethrough text

Use two tildes (~~) before and after the text you want to display as strikethrough. I have never used strikethrough but maybe you do:

~~Strikethrough text~~

Horizontal rules

The way I prefer to make a horizontal rule is with 3 dashes with a space between them, but you could use 3 dashes without a space or 3 asterisks with or without spaces:

- - - --- * * * ***

NOTE: Make sure to hit ENTER twice if you intend to use 3 asterisks without spaces or it will set the text above it to an H3 tag.

Inline Code

You can use code in a sentence and highlight it by using a single backtick before and after the code such as <div class=”row”>:

`<div class="row">`

Code blocks

For multi-line code blocks use 3 backticks before and after the code block:

        ```
        pre span {
          display: inline-block;
        }
        ```

External Links

Links have 2 parts to them with an optional parameter. The link text goes between square brackets [ ], and the URL goes inside parentheses ( ). You can also add a title for the link that will display when a user hovers over the link. To do that you would and a space after the URL and then inside a set of double-quotes add a link title:

[Kernix Web Design](https://kernixwebdesign.com 'Home page')

Anchor links

By “anchor” links, I mean links that go to a section of the page as opposed to another page or website.

This can be done in at least two different ways. For all the links in the table of contents in my repo (see link at top), I use the easy method. But for the Back to Top link, I use an actual <a> tag.

You need to use the same syntax of square brackets and parentheses for links with both methods: [Link text](URL).

The first method is to add an empty <a> tag with an id attribute that matches the hashed URL link:

<a name="top_anchor"></a> [Back To Top](#top_anchor)

The second method is more common especially for table of contents links in README files. You put the exact text that you want to link to in the square brackets with the same case. In the parentheses you start with a hash symbol followed by the exact text all in lowercase and connected with dashes:

[Exact words in target link](#exact-words-in-target-link)

Images

The syntax for an image is identical for a link with the exception of adding an exclamation mark (!) before the opening square bracket. Also, replace the link text with alt text:

![alt text](https://via.placeholder.com/150)

Lists

You can use either an asterisk or a dash followed by a space to make a bulleted list. I prefer using a dash since you do not need to use the SHIFT key. For nested lists, use the SPACEBAR key to align directly beneath the first character in the parent list item to create a nested list:

    - List item one
    - List item two
      - Child item one

Use a number followed by a period (1., 2., 3. etc.) to create an ordered list. For a nested ordered list, do the same as for nested unordered lists – align the number to be below the first character of the parent item.

    1. List item one
    1. List item two
        1. Child item one

NOTE: By using “1” for each list item, you can cut & paste to change the order of items and the numbering will change to match the new order.

More advanced Markdown

Use the following markdown syntax for “fancy pants” markdown files.

Code blocks with code highlighting

A really nice feature for code blocks is to have basic syntax highlighting by adding the language after the first set of triple backticks. Here are the languages I have tested but check out my repo for examples: md, html, css, js, json, php, sql, xml, svg, python, apacheconf, …

```css
    pre span {  display: inline-block; } ```

I did not create any CSS to show you the styling for most of the fancier markdown features so check the repo to see what it looks like.

Diff code blocks

These are really nice for highlighting changed values and the new values. Use diff after the opening triple backticks, then a minus sign (-) and space for what was changed, and a positive sign (+) and a space for the new text/code.

```diff - this code or text is the old version + this is what it was changed to ```

Comments

This is a nice way to add a comment in the editor view of your markdown file. This would be good for teams members editing a documentation page for a new section. The best way is to use HTML syntax:

<!-- HTML comments work best IMO -->

Tasks

You can create what looks like checkboxes and display completed tasks with a checkmark. It takes the form of an unordered list with the first characters being a set of square brackets [ ] which MUST have a space in them. For a completed task, add either a lower or uppercase “X” inside the square brackets [x].

- [ ] incomplete task - [x] completed task  - [ ] incomplete subtask  - [x] completed subtask

Tables

I only used this for the Pull Requests and Issues I opened on freeCodeCamp. That table is a list of common prefixes to include in your titles (check out my Beginner Git Commands repo). Here is a generic table.

Pay attention to the syntax that is creating the column divisions and alignment. The pipes create the columns and the colons determine the alignment.

    | Left aligned | Center aligned | Right aligned |
    | :----------- | :------------: | ------------: |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |

Footnotes

I assume footnotes would be useful in a very technical or long README file. Use square brackets where you want a footnote link to appear and use a caret symbol (^) followed by the number of the footnote. Then below that area add the same syntax followed by a colon and the note itself. That will make the footnote text appear at the bottom of your file.

Here is what your text with the footnote syntax will look like:

Footnote.[^1] Another footnote.[^2]

Here is the syntax for the actual footnote:

[^1]: This is footnote number one. [^2]: Here is the second footnote.

Final Thoughts

There is a lot more you can do with your markdown files like actually using HTML tags. I have seen <a>, <p> and <span> tags in profile MD files, but I have not done much research into what you can and cannot use. I have also seen videos in markdown files so that would be something to look into for your GitHub profile.

Also note that all the syntax can be used in Discord and Slack, though slack has editor buttons for them, whereas Discord does not. I also see markdown used in forums and support tickets for some websites and hosting companies.

Here are some additional links that you can use to build your own Markdown cheat sheet:

1. Daring Fireball: Check out the Markdown Basics and Syntax tabs.
2. Complete list of github markdown emojis
3. GitHub emoji list

Here is a markdown cheat sheet in table version (basic code only):

The post Markdown Cheat Sheet for Beginners appeared first on Kernix Web Design.

Graphic design tips grouped by category

The following 3 categories include 90% of graphic design tips for beginners. Use the keywords for each category to cement in your mind the core concepts when creating your designs.

Structure and limitation category

Keywords: limitation, structure, form, restriction, order

If you take a photography course, you will learn that there should be nothing in your photo that doesn’t belong there. The same goes for graphic design! Use any of the keywords above to remember these 9 graphic design tips:

• Keep it simple: Use only 1-2 fonts, and…
• Keep colors, shapes & frames to a minimum.
• Use white/empty space: Leave negative space in your design to help avoid a cluttered design.
• Limit sentence and paragraph size: Each line should have no more than 30-40 characters
• Use lines as “separators” between elements to anchor items and create a sense of order. Use half-lines on either side of an element, or a line above and/or below elements.
• Aligning and ordering objects properly will clean up a design and eliminate the messiness or sloppiness that can occur when elements are placed randomly.
• Repetition & Consistency: Use the same design (images, colors, contrast, etc.) for a series of elements or designs. That ties together different elements and helps with organization.
• Structure: Create a hierarchy, make sure elements are correctly aligned, enough white space to give design features room to breathe, etc.
• Related elements should be grouped together to create a relationship.

Perfection and analysis category

Keywords: perfection, meticulous, detail-oriented, organization, analytical

You need to study, research and plan your designs. Use the keywords above to remember these 6 graphic design tips:

• Study, read, & research to guarantee a more thought-out design.
• Planning: Know what you want to accomplish before you start.
• Keep a notebook for notes or ideas.
• Have a swipe file: examples of great craftsmanship, skill, and of what works.
• Be meticulous with each element (reason & purpose).
• Use italics carefully & precisely.

Beauty and balance category

Keywords: Beauty, aesthetics, balance, harmony

At the end of it all, the question is “Is my design beautiful, average, or ugly?” Use any of the keywords above to remember these 3 graphic design tips:

• Choose beautiful colors that compliment your purpose.
• Take a step back and look at your design – make sure it is visually attractive.
• Find a common color palette or theme for your design: Primary, secondary, and neutral.

Final Thoughts

There are other graphic design tips and tricks but they fall into different categories. I just wanted to show the 3 categories that have the highest number of tips that correspond to them. If you are interested, here are 2 of my other categories:

Symmetry & contrast: 1. Use symmetry and contrast in your colors, fonts, font sizes, text over graphics, etc. 2. Choose a color scheme that contrasts & complements each other. 3. Use font-family variants.

Form & function: Let form follow function: make sure you know the function of your design. Match typeface (form) with your intent or purpose (function). Form = expression, words, structure, your design. Function = emotions, embodiment, will, purpose, intent.

You most likely will not include all of these tips in your designs, but try your best to use most of them. Help make the internet beautiful!

The post 18 Graphic Design Tips for Your Website appeared first on Kernix Web Design.

Copywriting tips grouped by category

I am going to list three categories of tips that account for anywhere from 75% to 90% of the tips you will see in articles about this subject. You should do your own web search for copywriting tips so you can see the individual tips for yourself.

What I did was find the tips and tricks that go together so that I could remember them easier as I write.

Action and power category

Keywords: action, power, energy/energetic, direct, assertive, straightforward, assertive, demanding, forceful

Don’t be wishy-washy or wimpy. Have the energy of a bull and hit them over the head with your words! Use any of the keywords above to remember these 10 copywriting tips:

• Use Active Voice as opposed to passive voice
• Use imperatives: Give direct commands, warnings, and instructions. Use words like “will”, “can”, “do”, “must”, “initiate”, “start”, “conquer”, “overcome”, “demand”, etc.
• Use action & power verbs: Action verbs fuel your content and drive people to do things.
• Be Direct: Make your intent obvious, communicate clearly, be straightforward, tell your readers what you’d like them to do, etc.
• Have or Show a confident and forceful personality. That indicates authority in the subject.
• Refine your Headline(s): Write your article first, then use the strongest phrases as headlines and subheadings.
• Lead with your strongest point: Put your best idea or strongest point first. Make your first point a benefit or solution for the reader.
• Make your first sentence powerful: It has to immediately grab your audience’s attention and create a desire to read your article. Also, shorten your sentences, particularly your first sentence.
• Opt for straightforward, simple headlines over tricky or clever ones.
• Have strong & assertive Call-To-Actions (CTAs): Always close with a CTA if possible or relevant.

Helpful and analytical category

Keywords: Meticulous, perfection, analytical, detail-oriented, conciseness, helpful, specific

Don’t speak in general terms. Facts and figures will convince people of your points. You want to present useful information to the user and do it as concisely as possible. Use the keywords above to remember these 7 copywriting tips:

• Satisfy your readers: Give your audience what they want and what they want is the answer to their question(s).
• Don’t be clever, instead focus on being clear and concise.
• Track down the right word for your most important headings and sentences.
• Back up your claims and be specific: Prove your case with reliable data, proof, and facts. Include statistics, methodologies, testimonials, case studies, success stories, etc.
• Don’t lead with analytical proof. Instead, use data in support of your claims.
• Use specific examples and include specific numbers.
• Cut sloppy or unclear phrases. Ask yourself for each sentence: “What does this mean?” Cut or rephrase until your text is concrete and meaningful.

Personality and positivity category

Keywords: Entertaining, attitude, personality, positivity

Show off who you are and make the readers like you. Use any of the keywords above to remember these 6 copywriting tips:

• Use your distinct personality: Let the reader feel that they know you. Use your own unique voice, style, word choice, values, etc.
• Be entertaining and exciting: if your reader is bored, they will leave.
• Tell stories and anecdotes: This is an aspect of being entertaining and backing up your claims mentioned above.
• Be positive in your tone: Make your tone is upbeat, has a “feel-good” vibe, etc.
• Be very personal and speak directly to the reader.
• Use positive words like “yes”, “fantastic”, “love”, “perfect”, etc.

Final Thoughts

There are other copywriting tips and tricks but they fall into different categories. I just wanted to show the 3 categories that have the highest number of tips that correspond to them. If you are interested, some of my other categories are:

Purpose & credibility: 1. Write with a purpose, 2. give reasons for what you are suggesting, 3. communicate trust, and 4. list your credentials that pertain to your topic.

Beauty & benefits: 1. Make your copy visually appealing through whitespace, using bold or italic text when necessary, using lists and quotes, structure with headings, etc. 2. Make every feature you mention lead to a benefit, and 3. stress the value of what you are offering or suggesting.

Uniqueness: 1. Break the rules, 2. try a unique angle or hook, and 3. think outside the box.

Personal: 1. Write in a personal, relaxed, and one-on-one conversational style. Also, 2. use “you”, “your”, “yours” at least twice as much as “I” or “we”.

You most likely will not include all of these tips in your writing, but try your best to use most of them. Have fun writing!

The post 23 Copywriting Tips for Bloggers appeared first on Kernix Web Design.

WordPress recent posts using custom queries

The two methods I found best to display the 3 most recent posts were to use get_posts and WP_Query.

Here is a custom query using WP_Query. You can use this custom query inside or outside of the loop. The first code block calls WP_Query and 3 posts in the code category while excluding sticky posts. It also selects ‘posts’ post types as opposed to pages or custom post types, but you could choose those as well.

You can query on any database field that you need. For me, I wanted to display the 3 most recent published posts in my Code Snippets category.

Lines 10-12 uses the new instance of WP_Query ($query) to query the specific posts from the database.

        <?php
        
         $query = new WP_Query( [
           'post__not_in' => get_option( 'sticky_posts'),
           'post_type' => 'post',
           'post_status' => 'publish',
           'category_name' => 'code',
           'posts_per_page' => 3,
         ] );
        
         if ($query->have_posts()) {
           while ($query->have_posts()) {
             $query->the_post(); ?>
      

The code block below is the HTML for the post details along with some necessary PHP functions. Since WP_Query works both inside and outside of the loop, you’ll need to decide if it’s best used in the loop or outside of it.

Don’t forget to use wp_reset_postdata or it may mess up the page below the query or break the page.

        <div class="recent-row">
           <?php the_post_thumbnail() ?>
           <a class="recent-posts-link" href="<?php the_permalink(); ?>" 
           rel="bookmark"><h4><?php the_title(); ?></h4></a>
      
           <?php get_template_part( 'template-parts/content', 'author' ); ?>
      
           <?php the_excerpt(); ?>
           <div class="recent-post-widget"></div>
           <a class="recent-posts-button" href="<?php the_permalink(); ?>">
           Read more...</a> <?php
           }
         }
         wp_reset_postdata();
         ?>
      

However, if you are on a page that has the loop, then you might as well take advantage of the post data. The loop is fetching the database fields for $post, so use either WP_Query or a get_posts() query while in the loop.

The get_posts query does not work unless it is inside the loop. Here is the code for get posts that returns the same data as WP_Query.

        if ( have_posts() ) :
         while ( have_posts() ) :
         the_post();
           get_template_part( 'template-parts/content', 'front-page' ); ?>
      
         <aside class="bgcolor4"></aside>
           <div class="container"></div>
           <h3 class="custom-title">
             <?php esc_html_e('Latest Articles ', 'tower') ?>
           </h3>
           <div class="row"></div>
           <?php
             $posts = get_posts([
               'post_type' => 'post',
               'category_name' => 'code',
               'posts_per_page' => 3,
             ]);
        
         foreach ($posts as $post) {
           setup_postdata($post); ?>
        
           <div class="recent-row">
      

Lines 6-9 are the HTML elements and classes to be output for the container of the posts, then the custom get_posts query starts on line 10 and continues to line 18. You should notice the div.recent-row which starts the HTML in the code block above for WP_Query.

Final thoughts

Using a custom query to pull the most recent posts is best done in a plugin. I put mine directly into my template files since it’s my theme and my website, though I will be creating a plugin for the recent posts (look for that article).

There are a number of different parameters you can query other than the ones I used (post_type, category_name, posts_per_page). Go to the WP_Query developer’s page to see other parameters you can use.

The post WordPress Recent Posts using a Custom Query appeared first on Kernix Web Design.