Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
If you are a WordPress website owner, there is a lot of stuff to take care of. Constantly updating your blog content, adding new products, changing prices, and we do not even mention regular plugins update, providing a dev with access and doing many more things as a part of daily WordPress routine. Sometimes, if […]
The post Time Saving SQL Queries for WordPress appeared first on WPExplorer.
It is rubber duck season! As we all spend a lot more time on our own, team CodePen and the CodePen community are squashing bugs with the "rubber ducking" technique for breaking down complex problems. Goofy name, but it really works!
Did you know? You can get a free .design domain name for your website! .design lets everyone — especially your clients or future employers — know what you do before they even arrive to your website. Unlike .com or .net, it’s more relevant to what you do as a designer and it helps with your branding. It looks great on resumes, business cards, or as your professional email address (e.g. you@website.design). Right now you can get a free .design domain name. Your .design domain name comes with free email hosting, SSL certificates, & a free site builder.
The post #266: Rubber Ducking appeared first on CodePen Blog.
Wherever you are in the branding process, a web presence is going to be a necessity at some point. Before you compose your first blog post or create the ultimate product, you’re going to need a reliable place to host your website. New businesses and those making the transition to eCommerce may be short on […]
The post Reasons Why You Should Avoid Free Hosting Services appeared first on designrfix.com.
Andrew Brogdon from the Flutter team chats with Marie and Alex about the new Flutter editor on CodePen.
Jetpack is full of features. If you have had the feeling that you’re paying for more than you need, you’re in luck, Jetpack is starting to have features you can buy individually. Jetpack Backup is one of them, the best way to backup a WordPress site there is. If that’s the only paid feature you need, you got it. Just $3 a month for daily backups or $20 a month for realtime backups.
The post #265: Flutter appeared first on CodePen Blog.
How To Update Your Old Blog Posts For Maximum Traffic Read More →
Chase McCoy wrote a nifty post about the “gap problem” when making a grid of items. His argument might be summarized like this: how should we space elements with margins in CSS? He notes that the gap property isn’t quite ready for prime time when it comes to using it with flexbox, like this:
.grid {
display: flex;
gap: 10px;
}Right now, using gap with flexbox is only supported in Firefox and I’ve already caught myself forgetting about that in a few projects. So watch out for that.
Anyway, the part about Chase’s blog post that I love is where he mentions Andy Bell’s technique for creating a responsive layout with no media queries, like this:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}This CSS is doing the following:
The nifty thing about all this is that our grid is now effectively responsive because of minmax — if you resize the browser, then the grid will snap down into fewer columns, just like this:
No media queries at all! Although sure, there’s a few other ways that you could get this to work but I think this is neat not just because we’re avoiding media queries — instead, it’s because it teaches us to think in a new way when designing and building components.
Chase continues:
With this technique, instead of using breakpoints to specify the screen size where your items should stack, you specify the minimum size an element should be before it stacks. I like this because it encourages developers to think about responsive design in terms of behaviors instead of screen sizes.
“Behaviors instead of screen sizes” is such a great way to think about component design! A lot of the problems I’ve encountered when making components for a design system is when I’ve been thinking about screen sizes — mobile, tablet, desktop, etc. — and trying to make those components fit within those constraints.
Thinking in behaviors is always more effective because there are so many things that can impact a component beyond what screen or device width we’re working with. Perhaps we want that component to fit inside another component. Or we want to align some helper text to the side of it for comparison.
Either way, thinking about behaviors instead of screen sizes isn’t really going to be fully impossible until we have container queries, as Chris writes:
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that.
The post Thinking in Behaviors, Not Screen Sizes appeared first on CSS-Tricks.
3 Tips For Managing Your WordPress Blog Read More →
Creating child pages in WordPress is simple to do. The only problem is, creating a child page doesn’t do anything for the front end of your blog and your viewers. You can’t just easily check a box or two and display child pages automatically on the parent page. This leaves your homepage, well… childless. Read on for the simple solution.
This article is rated PG, meaning that — like a parent — I’ll be offering some guidance on how you can better index your child pages with the help of some free WordPress plugins.
More specifically, showing you how to get a list of Child Pages to appear both on a Parent Page, and also in your sidebar.
By the time you read this article, you’ll have a nice idea of several options to set up your WordPress site and child pages.
From there you’ll be able to make a grown-up decision on what works best.
Having an option to showcase your child pages on your website is important if you have some vital information that you want prominently displayed.
Why?
If you don’t, many viewers might not realize a lot of what you want them to see is accessible.
If child pages are in the future for you, your life, er — website — is about to change.
Like a good parent, a good plugin can raise your child pages to be well-displayed.
Not only that, but they can also simplify the process, assist with customization, and – as you’ll see – much more.
These free child page plugins each have various features and benefits. I’ll be going over all of them in detail.
Plus, I have a “bonus” plugin that I’ll mention that deals with a child of a different magnitude.
CC Child Pages by Caterham Computing is a simple plugin that can display child pages on your homepage with a shortcode.
It’s so easy to use, even a child can add child pages to their WordPress website.
Everything is achieved by using a shortcode. The shortcode is relatively simple and can be used wherever you’d like the child pages to appear (e.g. the homepage).
The child pages are displayed in responsive boxes, which include a page title, excerpt, and even a “Read more…” link.
I like how you can choose your layout with this plugin. It can be 1, 2, 3 or 4 columns.
If you choose to go with a three or four-column layout, it will resize to two columns on mobile devices, which makes them easy to read when viewing on the go.
You can also choose the depth of pages to be displayed. All of this can be configured as a widget in the Sidebar area.
Once you have edited it how you’d like, it’s ready to go! You just paste the shortcode wherever you want to display it on your site.
Though there’s not a ton of customization options, the simplicity of this plugin makes it efficient and does the job.
With over 10,000 downloads and a solid 5-star review, this plugin has what it takes to add your child pages to your WordPress site.
Advanced Sidebar Menu by OnPoint Plugins is another basic and easy to use free plugin for child pages on your site.
It uses the parent and child relationship of your WordPress pages or categories and generates menus in specific areas.
You just assign a page or category to a parent and the plugin does the rest for you.
This plugin has solid reviews along with good support.
Let’s check it out!
To set it up, it’s all located in the widgets area from your dashboard.
Here you can add a title, display the highest level parent category, display menu, and use built-in styling.
Everything is located here and there are no additional places to customize.
Once you have configured it the way you want, it’s ready to go.
It is as simple as that.
There’s not much when it comes to additional customization, but like our previous plugin, it might not be necessary to suit your needs.
They have an option to Go Pro, which features advanced styling, priority support, custom link text, excluding pages, and more.
However, for just the basics, the free version does the trick.
Though there are not many advanced options, if you have some CSS knowledge, you can customize as much as you’d like in your theme’s style sheet.
This plugin is great when it comes to including a clean and usable menu for child pages.
It’s nice to be able to feature only what you want and have full control over your options. Plus, the ease of use makes for a quick fix when adjusting your website.
The Content Views – Post Grid & List for WordPress by Content Views is a fantastic option for anyone looking for an extremely easy fix for adding child pages or grids for posts.
It’s a well-updated plugin that’s 100% responsive and mobile-friendly. I love how you can customize almost every Aspect of the pages; including arranging by keyword, images, recent pages, and more.
The layout of this plugin in your dashboard is a breeze to figure out.
It gives you an option for either a page or post right in the dashboard under Content Type.
Everything is clearly labeled and you can quickly set up your child pages however you’d like.
From the dashboard, you can choose what to include, exclude, and limit. There are also more advanced options for sorting and display.
The Display Settings has all the options you need for setting it up the way you want it to look.
You have options for layout, format, and field settings. It also goes as far as allowing you to set up excerpts, HTML tags, pagination, opening child pages in the current tab or a new tab, and more.
Once you have your child pages display all set up — you’re all set!
There’s a simple shortcode to embed it into your website. You can use it in a widget or for a theme file. They give you both options.
When you save your new view, it’s listed on the dashboard. You can easily retrieve the code from there, too.
Want to see it in action? Here is a quick set up I created from a basic WordPress website.
Like a lot of the other plugins, there is a Pro option. If you upgrade, you can get advanced customization options, more layouts, and options for Google Adsense.
I found the free version suitable as-is. The clean layout, design, and ease of functionality make this a pretty amazing free plugin for child pages.
I told you I had a “bonus” — and this is it.
The Child Theme Configurator by Lilaea Media is something else to consider. It goes beyond just pages and tackles child themes.
I think it’s worth including because sometimes users want to edit a child theme. Or, you might not even be aware that this is an option for your WordPress site.
And since we’re talking about child stuff, well…why not include it?
Let’s dive in and take a look.
Once uploaded into your dashboard, you have four options to choose from:
One great quality of this plugin is how it’s step-by-step. There’s no overly complicated language or confusion, making configuring very simple.
You can customize however you’d like.
This includes where to save the stylesheet, ensuring plugins work with specific themes, and verifying the theme directory.
This plugin has a lot to offer and it’s worth exploring for yourself if you’re interested in child themes.
There is an upgrade option that includes customizable plugin stylesheets, quick preview, color palettes, new styles, adding child theme files, and tutorials.
Depending on your skill level, it might be worth the upgrade. The free version is quite impressive as is.
Now even though we’re mostly talking plugins in this article, with a little bit of coding knowledge, you don’t need a plugin to create child pages that are displayed on your homepage.
An example of this is adding the below code to your theme’s sidebar.php file.
Code for setting up child pages.
From there, you can edit accordingly by resizing, adding fonts, colors, etc.
Of course, if this is a bit too complicated and CSS isn’t your thing (by the way, we can help you with that), a plugin is the easiest way to go.
Plus, a plugin can give you more options for functionality, displays, and features.
To avoid problems with your site’s viewers seeing your content, a great child page plugin will do the trick. As you can see, you have a lot of options.
Each plugin is uniquely different, but they all make setting up child pages on a parent page much easier than, let’s say, parenting.
And if you need babysitting, we have 24/7 support, hosting, and security to keep your WordPress site and child plugins in good hands.
How To Choose A Domain Name For Your Blog: A Beginner’s Guide Read More →
I got a bunch of questions from a "Head of Customer Success" at a company that does developer education recently. They had some great questions about how CodePen could be used in their online courses1. The answers might benefit anyone in this situation, so here's exactly what I was asked and what I answered.
Here's one way instructors/students can use CodePen for a course. The instructor has a curriculum for the course. Part of that includes coding exercises for the students. Those coding exercises can take the form of a pre-created Pen on CodePen. Maybe like this. The students then Fork that Pen and try to complete it, and they send the instructor their attempts.
Here's another way instructors can use CodePen. They teach live using the CodePen editor. Maybe it's projected onto the front of a classroom using Presentation Mode, or the students follow along on their own computers using Professor Mode. Those two features are PRO, so the instructor would need a PRO account.
Here's another. The instructor (or school) gets a Team Account. All the students are invited as members of the Team. That makes everyone involved have a PRO account, so they can do things like make Private Pens and share uploaded assets like images. As a new cohort comes in the students can be removed from the team and new students added.
We offer monthly or annual billing on any of our plans (but not quarterly).
We bill the second you sign up, and then at intervals based on that day. For example, if you sign up on March 14th and choose a monthly plan, you'll be charged again April 14th. If you picked a yearly plan, you'll be charged again March 14th the following year.
Plans are mostly fixed. If you go with a Team Account, Teams are charged based on the number of seats, so you can increase or decrease those seats at any time and are re-billed accordingly.
Only Team Accounts are billed on a per-user basis. Team Accounts are $12-per-person if billed annually or $19-per-person if billed monthly. If what worked better for you was only having the instructor with a PRO account, for example, that's a single user with a single fixed cost.
Yes, you can cancel and re-activate on a monthly basis if you choose the monthly plan.
Our dedicated page for CodePen and Education is probably also worth a read.
1 - This kind of thing is sometimes a sign that the design of your site doesn't help answer these questions well enough. In this case, I'm not that worried about that. I think we do OK there, although this is good research for the next time we're tackling those areas.
The post CodePen for Education Questions, Answered appeared first on CodePen Blog.
You might notice a smidge of extra visual activity happening down in the Pen Editor footer lately. We're trying to show you a bit more information about what the Pen Editor is actually doing.
Here's an example (5 second video) where I'm editing some HTML to include an <em> tag or not, and the editor is doing stuff to make that happen for me:
The idea is to show you (and us!) what is happening in the Pen Editor as we do it. Like sometimes code needs to get processed. Sometimes the preview needs to get rebuilt. Sometimes your code is off being linted or formatted. There is a bunch of stuff that might be going on in the editor, and we wanted a dedicated place to be clear about that rather than having it be a silent mystery.
The post Editor Activity Indicator appeared first on CodePen Blog.
Why make your blog boring using standard fonts? Let your blog talk about your vibrant personality and the topics you cover with a wide variety of custom fonts. Custom fonts are a nice feature that allows your blog to look preferable to others. Let’s face it; we all love blogs and sites with the right […]
The post How to Add Custom Fonts to your WordPress Site appeared first on WPExplorer.
InMotion Hosting Review & Giveaway Read More »