S'abonner à flux
THE magazine for webworkers and site owners
Mis à jour : il y a 42 min 27 sec

Tool Tip: Moving Letters With Anime.js and CSS

16 octobre, 2017 - 12:00

Animated font effects are real eye-catchers. Used correctly, they can enhance your design. Moving Letters provides you with 16 fantastic visuals.

The Swedish designer and developer Tobias Ahlin has an impressive backlog of references. First of all, he was one of Spotify’s first contributors and is responsible for its design. Today, he works for Mojang, developing Minecraft. On the side, now and then, he likes to toss some smaller, and some bigger side projects into the masses.

Moving Letters by Simple Means

His open source project Moving Letters, for instance, is a growing collection of animated text effects. Tobias uses CSS and JavaScript, supported by the animation engine Anime.js.

Code Snippets to Go. (Screenshot: Noupe)

The project’s website itself is an impressive piece of design, which is not lacking in animation. On the landing page, you’ll find a clear overview of all effects. A click on a text opens the respective detail view, which provides the visual effect, as well as the required code snippets in HTML, CSS, and JavaScript. This allows you to integrate the effect into your projects via a simple copy and paste.

Ahlin Provides Further Useful Tools for Web Developers

Tobias made the code available under the liberal MIT license. Thus, you can use it for free, even in client commissions. You may already know Tobias Ahlin from his other, similar projects SpinKit and TypeSource. The SpinKit displays animated status indicators, while TypeSource is a source of inspiration for the proper use of Google Web Fonts.

All three projects deserve a bookmark in every designer’s toolbox.

Catégories: News dév web

Print on Demand: Printify Now Lets WordPress Users Sell Shirts for $5.99

13 octobre, 2017 - 09:00

Print on demand with drop shipping is a way to monetize your brand. Now, Printify, one of the largest competitors, announced the integration of their service with self-hosted WordPress sites working with WooCommerce.

Printify is Different

Should you never have heard about print on demand and drop shipping, here is a brief explanation. These relatively new solutions allow you to create products with your design and sell them to potential customers. Once a customer buys one of your designs, the corresponding product will be printed and sent directly to your customer. You only provide the design and integrate the service into your own shop, that’s all. All of the handlings will be done with your branding. The provider itself stays entirely invisible to your customers.

There are quite a few print on demand providers out there in the wild, but Printify stands out as Printify does not offer print on demand. What? Calm down. It’s easy. Printify is a transparent provider network. They work with roughly a dozen print on demand providers as of the time of this writing to help you fulfill your demand.

Printify has more than 150 products in several variants available.

Instead of having to rely on your one and only chosen fulfillment center Printify allows you to choose between some. You might want to select a provider near you or your target market. Location is not the only filter criterion, however. You can also select by price and other parameters. Where with other services you would in the worst case be forced to look for another, Printify has alternatives within their own network.

Strong Product Base and Ripe Service

Printify is not new to the market. They are one of the most popular apps for the Shopify platform since years, and their service has absolutely grown up and is ripe for business. Their catalog of 150+ unique products includes shirts, phone cases, mugs, laptop sleeves, tote bags, pillows, blankets, shower curtains and many more.

Choose a product.

As you see, you cannot only make your own shirt but also create custom phone cases and a variety of other products. Printify’s provider network offers high-quality garments, such as Bella & Canvas 3001 or Next Level 3600, both of which are absolute bestsellers within the shirt portfolio.

Printify Products are Easy and Free to Integrate

Integration with your shop is seamless. You need not even have Photoshop skills to provide realistic product images in your store. The Printify Mockup Generator will create high-resolution 3D mockups for you that appeal to your customers and look good, no matter the device they get viewed on. Your artwork will be instantly placed on a three-dimensional product model, making the rendered images look highly realistic.

Design it.

The use of Printify’s technology is free. You only pay for the printed and delivered products, which makes the business totally risk-free for you.

Printify Goes WordPress and WooCommerce

While not everyone uses Shopify, 28% of the world’s websites run on WordPress and more than 30% of world’s eCommerce websites are powered by Woo, explains Printify CEO James Berdigan and adds, that now two out of every five stores out there will be able to use Printify which opens a massive market of millions of outlets.

See the rendered preview.

What made James Berdigan so excited, you might ask. Printify just released an integration with WooCommerce, enabling any self-hosted WordPress site owner to sell shirts and other products from right within their own WooCommerce shop. And this integration is fairly easy to accomplish as is explained in this short tutorial video:

As you can see, there is no rocket science for you to master. The administration of your shop happens comfortably from within the Printify Dashboard. Your WooCommerce instance will draw the products in automatically. That way you could use WooCommerce as just another channel to sell your goods. Products have to be maintained in one place only to serve all your outlets.

WooCommerce print on demand should definitely become part of your future monetization strategy. As you can enter this market completely risk-free, you have nothing to lose, but everything to gain.

Download the WordPress plugin from here and integrate the service as shown in the video above or documented in more detail here.

Catégories: News dév web

iOS for Webworkers: Track Expenses With Bobby 2

12 octobre, 2017 - 09:00

If there’s a lot of month to go through at the end of your money, this is either due to your income, or due to your expenses, or a deadly combination of the two. In all of these cases, Bobby 2 can help you.

Bobby 2: Expense Manager From Amsterdam

Bobby 2 by Yummygum, based in Amsterdam, NL, is a gorgeous app for the iPhone, iPad, and iPod Touch which makes managing your returning expenses easy. Not only does Bobby 2 provide a database that lets you put in your spendings with a few taps, but it also contains a ton of finished templates for common services.

Bobby 2: Landing Page

This lets you manage your payments to Spotify and Netflix in a way that is visually adjusted to their respective CI. In some cases, Bobby 2 also suggests the corresponding fee right away. This never worked for me, though, because there’s no service where I have booked the smallest plan. Those seem to be the only saved ones, though.

This is not an issue, as you can quickly alter all fees with a few taps on your keyboard. Different currencies, including EUR and USD, are supported. You can also use several currencies in parallel. That’s especially handy should you be using US-American services outside of the US.

Further Types of Expenses Are Easily Recorded

If you also want to manage your membership at the local gym with Bobby 2, this is just as simple. Set up a new expense, and you’re done. From the setup dialogue, you can influence all significant parameters. With Bobby, you can manage almost any due date. It doesn’t matter if you have to pay once a year, every seven years, or every other day, every month, or every two months, Bobby manages it for you and notifies you when the time for payment approaches. If you want to.

iOS-Typical Clarity in the Overview. (Screenshot: Noupe)

Payment circles that include time frames other than a month are broken down to the month when Bobby shows you the average monthly expenses at the very bottom of the start screen. A tap on that display lets you switch to “per year,” or “per week,” although I can’t really tell the purpose of that.

Some Features Have to be Paid

Bobby speaks English, Dutch, German, Italian, Norwegian Bokmål, Polish, Portuguese, and Spanish. Aside from the contextual parameters for each expense, the app’s UI can also be adjusted to your taste. However, these adjustments require a paid expansion of the app, which is free without it.

Securing your task management with Touch ID or passcode, as well as saving backups in iCloud, are also functions that Yummygum wants you to pay for. The same applies if you ‘re going to manage more than five subscriptions.

To be able to use all of the app’s features, I recommend buying the All-in-one Pack, which is only 2.29 EUR as of right now. If all you want is an unlimited number of subscriptions, that will be 1.09 EUR, another 1.09 EUR for the design options, and another 1.09 EUR if you want to use Touch ID and iCloud.

I paid 2.29 EUR, and I’m done. Sure, there are other task managers on the App-Store, but none is as pretty as the one with the squirrel icon.

Catégories: News dév web

Pearl: The Premium WordPress Theme With the 200+ Faces

10 octobre, 2017 - 09:00

If a premium WordPress theme suits all of your customers, yet no design looks like the other, you might be using Pearl. Let’s take a more in-depth look at it.

The Budget Problem: Who Values Pure Handcraft, Anyway?

Let’s be honest. Who wants to learn a new theme philosophy for every new project? Given the vast variety of solutions on the market, developing custom themes is only worth it in the few cases where the client is either extremely peculiar, so his brand can’t be covered using standard solutions, or so generous that you don’t need to use standard solutions to cover him. In the latter case, you might still want to look for a suitable starting point aka premium theme.

Pearl: Landing Page (Screenshot: Noupe)

In all other cases, which would be about 99 percent, you’ll fall back on a theme or a theme framework, if the goal is WordPress as a CMS. The client cares about the visuals and features. He won’t build a shrine for you if you create a unicum.

Theme or Framework or Something in Between?

While pure theme frameworks sometimes force you to worship crude control concepts, classic themes often don’t provide enough application logic for a well-positioned creative worker. The new multi-theme Pearl by Stylemix takes the middle road. It’s close to a pure premium theme’s philosophy, yet it still provides various customization options, regarding both design and functionality. The creator calls Pearl a multi-niche theme, which basically means that it lets us cover a lot of typical client groups.

Pearl: The Jack of all Trades Among the Premium Themes

For getting started quickly, Pearl offers almost a dozen of demo pages, which others would call templates, for different branches, including restaurants, artist sites (even with selling options), portfolio websites, or the health sector. The demo contents can be imported directly into your Pearl installation. This way, you get a template that you can easily edit and turn into your own. Some demos are still in the works, so you can’t use them as of right now. In this context, it is good to know that the (low) price of the theme is a one-time payment that grants you access to all future updates.

The real variety of the Pearl theme is a result of the over 200 different available page elements, that you get to use to build your dream website. No matter if it’s about sliders (including Revolution), online appointments, audio or video players, table reservations, menus, price charts, or a shop based on Woocommerce; Pearl comes with all required elements.

This is what a typical company website made with Pearl could look like. But it it could look completely different as well. (Screenshot: Stylemix)

Pearl covers a lot of the functionality via popular premium plugins. The required licenses are included and don’t need to be bought separately. Stylemix also provides specific Pearl plugins for some features. For example, you’ll find the Header Builder, which is based on Angular.js, allowing you to create a website header that deserves its name. The same applies for the Pearl Mega Menu Builder, which lets you create flexible menu structures within your navigation. Amazon sends its regards.

Example of a Navigation Menu Made Using the Pearl Mega Menu Builder. (Screenshot: Noupe)

By the way, the developers also made sure that Pearl is compatible with as many plugins as possible. With other theme creators, you might run into some unpleasant surprises in that regard. I can remember dozens of cases where a plugin installation or a simple update caused a website to blackout entirely.

Aside from the variety of design- and function-related options, the fact that Pearl is capable of making all adjustments, either visually or in a dialogue, deserves a special mention. Manually interfering with files, like writing or rewriting code, is fully redundant. Thus, Pearl is not only interesting for creative workers but also an alternative for the ambitioned DIY’er who wants to build his website by himself despite all the tedious detail work.

Create Complex Headers With the Pearl Header Builder. (Screenshot Collage: Stylemix)

In the backend of your WordPress installation, you’ll find an unusually broad access to the settings of the Pearl theme. Here’s where you take care of the basic parameters of your presence in such a detailed fashion that the only appropriate term to describe it is fiddling. This is the place for you to exert your control obsession meticulously. This does not only affect the typography, which you can edit using the hundreds of fonts from the Google Fonts Directory.

When it comes to the pages and your website’s posts, there’s an extensive WYSIWYG editor to help you out. It’s the popular Visual Composer by WPBakery, which has a price tag of 34 USD on its own. The Stylemix team did some work to the composer dashboard to grant you easy access to all Pearl modules.

The Visual Composer even lets you edit your website from within the frontend. However, if you, like me, have used WordPress since the beginning, you might be more comfortable with the backend editor.

The Performance and Support Are Nothing to be Ashamed of

Performance is one thing that Stylemix put a significant emphasis on. All benchmark services, such as GTMetrix, Google Page Speed or Pingdom, testify that the theme’s loading times are competitive, even without any further optimizations. I don’t think I need to point out that you can quickly ruin this score with three to four heavy cruisers right from your DSLR. In that sense, performance remains a continuous task, even with Pearl. The system itself is already optimized, though.

Out of the box, Pearl only supports the English language. However, the theme is fully WPML compatible, letting you create a localized version at any point. Speaking of support, I don’t want to leave out the extensive support the Stylemixers offer. There’s a 24/7 live chat available to the customers. Redeeming a classic support ticket is possible as well. Last but not least, users can help each other in the Stylemix forum.

In many cases, you won’t need this kind of help. Stylemix comes with an incredibly detailed written documentation, as well as a wide variety of tutorial videos. Pearl is pretty easy to handle, and all the videos are pure point-and-click presentations. Learning by doing is the name of the game.

Pearl: The Jewel is Not Expensive

The name Pearl was not just chosen because of how beautiful it sounds or how expensive the theme is. Instead, you’re supposed to open the theme’s shell and find your personal pearl inside. Romantic, isn’t it? Before we get sentimental, let’s take a quick look at how we can get to our new pearl.

Pearl is distributed exclusively via Envato’s Themeforest and comes in at only 35 USD during an introduction stage. If you were to purchase all the included plugins separately, you’d end up in the triple digit area.

However, I can’t tell you where the price will move to after this stage, and for how long the offer is still up. For its current price, Pearl is not just a real pearl in the ocean of premium WordPress themes, but a real steal on top of that. Take a look!

Catégories: News dév web

Fall Cleaning 2017: 10 Free WordPress Themes and How to Use Them Right

9 octobre, 2017 - 11:00

It’s time for a thorough autumn cleaning. We show you ten free WordPress themes that have just been released, and we guide you through the steps to create a proper child theme from whatever theme you choose.

Look For a Solid Starting Point

Of course could you start from scratch and create yourself a perfectly new WordPress theme beginning on an empty screen. I cannot imagine a case where this mode of operation would seem sensible to me, however. It’s much easier and more efficient to just choose a proper theme that fits your needs as closely as possible and then alter it to meet your needs perfectly. This is done by deriving a child theme from the original theme files. We will come to how this is done later on in the article.

WordPress Themes Galore: The 10 Best Free New Entries This Autumn

Let us first take a look at the hottest new entries in the free WordPress theme repository. As we know that our audience is international we will only feature themes that are translation ready.

1. Canuck Canuck

Canuck is a modern theme in grid layout that can be customized to any look you like. Flexibility is its biggest benefit.

Download on WordPressTheme Demo

2. Mercia Mercia

Mercia is a magazine theme with a heart for typography and responsiveness. It’s near perfect for any website that focuses on fast changing dynamic content.

Download on WordPressTheme Demo

3. Rinzai Rinzai

Rinzai was originally created as a motor for food-related websites, foremost those that present recipes. Its strict grid layout and visual hierarchy support that usecase ideally. Rinzai can still be used for other projects, such as portfolios or even a corporate website.

Download on WordPressTheme Demo

4. Hestia Hestia

Hestia offers quite a few child offspins already. Hestia adheres to the Material Design guidelines, thus sporting a very contemporary look. The theme is positioned towards creative workers in need of a totally flexible foundation to build any client project on. It is even WooCommerce-ready.

Download on WordPressTheme Demo

5. Neville Neville

Neville is a very visual theme. It fits best with publications that want to draw their readers into the pictures they post. Generally any magazine could use Neville but as soon as you are lacking visuals the theme would be much less impressive.

Download on WordPressTheme Demo

6. Oblique Oblique

Oblique attracts the viewer’s eye with its unusual aesthetics. Diagonal lines and asymmetrically cut images make for that special look you don’t see too often in our squares grid new world. As an example of how you can use Oblique as a corporate site take a look at one of the child themes named CoffeeIsle. Oblique is fully responsive.

Download on WordPressTheme Demo

7. HitMag HitMag

Finding a usable magazine theme was painful in the past but is not anymore. HitMag is one of the most contemporary magazine designs that I have seen in quite a while. It’s not necessarily the best for highly visual sites but does a great job for just about any other publication thinkable.

Download on WordPressTheme Demo

8. Headstart Headstart

Headstart is a very flexible theme for blogging and less dynamic websites alike. Its responsive design can be fully customized using widgets that carry almost any type of content you like. Build a dynamic blog oder build a static modern landing page. It will equally work great. Headstart is built upon the popular Foundation framework.

Download on WordPressTheme Demo

9. ClubFitness ClubFitness

ClubFitness breaks with design conventions and is the most unusual new entry this autumn. If you like Pinterest ClubFitness might just be what you need. Its heavily card-oriented layout fits best with visually heavy websites. Despite its orientation towards images it runs perfect on mobile devices as well.

Download on WordPressTheme Demo

10. Redxun Redxun

Redxun is a theme for the writers. Based on Bootstrap and giving access to all Google Fonts it offers a near perfect playground for anyone who wants to see their content strive on any platform.

Download on WordPressTheme Demo

More Great Themes

Not the right theme for you in here? Take a look at this evergrowing collection of the best WordPress themes of 2017. There is something for everyone.

What’s a Child Theme and How Do I Create One?

A child theme is the child of a full-fledged, regular theme as we’ve shown you ten of right above. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScript – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.

Should you need more basic support with WordPress, I advise you to thoroughly read this great tutorial. It will have you covered.

All Changes Remain, Even After an Update

A newly set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. From there, you can make any change you want, without any dangers, and these changes will remain even after an update of the original theme. That’s the big advantage.

Every WordPress theme that is capable of receiving updates should only be used with a child theme. It’s very simple, and in today’s article, we’ll show you the pitfalls that can break open.

The Preparation for Creating a Child Theme

To create a child design, you need an FTP program, as well as an HTML editor. You can get both for free. To work with the FTP program, you’ll also need the FTP access information for your web host. Your host will provide this information.

  • I can recommend the FTP program “FileZilla” as it’s feature-rich and free for both Windows and Mac.
  • The HTML editor I’d recommend is the program “Brackets.” It’s free as well, and due to its many expansions, it can be tailored to your needs.

Of course, there are other reasonable HTML editors. Thus, we have compiled a list of programs for Windows, and for Mac.

Creating and Using Child Themes

I’ll use WordPress’ popular Twenty Fifteen Standard Theme as an example for the creation of a child theme. You’ll learn to create a child design, use your own stylesheet for the CSS, and to adjust theme files. I will also introduce you to all tripping stones that may come up when working with child layouts.

1 – The Creation and Activation of a Basic Child Theme

A child theme only requires three things: the index to the parent theme, a style.css file, and a functions.php.

First, create a folder on your desktop, and name it “twentyfifteen-child.” Next, please create an empty file named style.css using the HTML editor. Enter the following into the CSS file:

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes at the Bottom */

This Header Defines the Following Things:

  • The name of your theme
  • The description that states that it’s a child theme of the Twenty Fifteen Theme
  • Under Template, you’ll find the “address” that your theme needs to be able to display the template files. It’s the name of the parent theme’s theme folder. When creating a child theme for another theme, of course, the folder name of your theme has to be included. So, if you need a child theme for the popular “Hueman” theme, this will say “hueman”.
  • Under Text Domain, your child theme finds the translation files, so that the theme will continue to be displayed in the language you chose.

Next, set up an empty file called functions.php. The following has to go into this file:

<?php /* ============================================================================= The functions.php for Your Child Theme ============================================================================= */ /** * This Function is Necessary. It Installs the Parent Theme's CSS * The CSS of Your Child Theme Will be Installed Automatically. */ add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' ); function tb_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } /* ============================================================================= From This Point Downwards is Where You Can Enter Your Changes =============================================================================== */ Optional: Create a Preview Image For Your Theme

Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed in the main index, not in a separate folder.

The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be shown well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended.

2 – Activating the Child Theme

Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under “Design => Themes.”

Now, the child theme is active. Thanks to the new screenshot, it is effortless to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.

The Child Theme Right After the Activation, No Changes to be Seen. 3 – Customizing Child Themes – CSS

Now, write all adjustments into your child theme’s style.css. A few very simple adjustments would be changing the background color, the color, size, and font of the header, and so on. With just a few lines of CSS, we’ve already changed the theme’s design entirely:

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes Below */ body { color: #666; background: #444; } { font-size: 38px; } a { color: #900; } #main { padding-top: 10px; } h2.entry-title { font-family: Arial, sans-serif; font-size: 38px; } h2.entry-title a { color: #900; } The Slightly Modified Child Theme Already Has a Completely Altered Appearance. 4 – Working With Template Files

Your new theme is fully customizable, you can also use your own templates, or revise the files of the parent theme. WordPress checks the child theme folder for template files first. If there are none, the files from the parent theme will be used.

This means, that a file header.php in the child theme folder is being used, instead of the file in the parent theme. If you want to change the display of a specific file, just copy it from the parent theme into your child. Now you can either change the entire presentation or add specific elements only.

Two Examples: Changing Post Images and Static Share Buttons Example 1: Reversing the Display of the Post Images

Copy the file content.php from your parent into the child folder. The original code of the file in the lines 14 to 27 looks as follows:

<?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header>< !-- .entry-header -->

For the fun of it, let’s reverse the code, and insert the post image under the header.

<header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header> <!-- .entry-header --> <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?>

Of course, our CSS needs some adjustments, so that the final result looks superb.

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter your changes below */ body { color: #666; background: #444; } { font-size: 38px; } a { color: #900; } #main { padding-top: 10px; } h2.entry-title, h1.entry-title { font-family: Arial, sans-serif; font-size: 38px; padding-top: 20px; margin-bottom: 20px; } h2.entry-title a{ color: #900; } h1.entry-title { color: #444 } Screenshot of the Final Result: The Final Result With the Reversed Order of Image and Header. Example 2: Adding Static Share Buttons

This task is also done using the content.php file. You don’t have to place another file in the child folder.

Part 1: The Snippet for the functions.php

<?php // Copy from here /** * Static Share Buttons With Print-Button * Adjust the URL of Your Facebook-Page. The Second Link From Below. * */ function tb_share_buttons() { ?> <div class="share-container"> <div class="share-buttons"> <a class="facebook social" title="Recommend on Facebook" href="<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Teilen</span></a> <a class="twitter social" title="Recommend on Twitter" href=";text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twittern</span></a> <a class="googleplus social" title="Recommend on Google+" href=";url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a> <a class="fb-like social" href="" target="_blank" rel="nofollow" title="Like my Facebook Page"><span>Like</span></a> <a class="print social-tooltip" href="javascript:window.print()" title="Print">Print</a> </div> </div> <?php } function tb_fontawesome() { ?> <link rel="stylesheet" href="" type='text/css' media='all' /> <?php } add_action( 'wp_enqueue_scripts', 'tb_fontawesome' );

The buttons need two functions. Number one creates the buttons, and number two adds the required icon font “Font Awesome” to your header.

Part 2: The CSS

For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.

/* ============================================================================= STATIC SHARE-BUTTONS ============================================================================= */ {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px } div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee} .share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5; max-width: 100%; display: inline-block; overflow: hidden} .share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important} .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.print, .share-buttons a.fb-like { display: block; width: 112px; font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;} .share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important} .share-buttons a.facebook { background: #3e64ad; } .share-buttons a.twitter { background: rgb(0, 172, 237); } .share-buttons a.googleplus { background: #cd3627; } .share-buttons a.fb-like {background: #4267b2} .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; } .share-buttons a.print{ margin-right: 0;} a.print{background:#13475e;} a.print:before{content:'\f02f';font-family:FontAwesome;font-size:16px;padding-right:8px} a.facebook:before{content:'\f09a';font-family:FontAwesome;font-size:16px;padding-right:8px} a.twitter:before{content:'\f099';font-family:FontAwesome;font-size:16px;padding-right:8px} a.googleplus:before{content:'\f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px} a.fb-like:before{content:'\f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Part 3: The Correct Placement in content.php

<?php // copy below this line, exchange the section .entry-content ?> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?> <!-- Staic Share Buttons. Only shown with single.php --> <?php if ( is_single() ) : ?> <?php echo tb_share_buttons(); ?> <?php endif; ?> <!-- End of Static Share Buttons --> </div> <!-- .entry-content -->

The correct position is still within the DIV .entry-content, right above the closing </div> tag.

The Final Result of Our Efforts:

We get these beautifully formatted share buttons with icons for Facebook, Twitter, Google+, the Facebook page, and a button that activates the browser’s print function.

The Static Share Buttons at the End of an Article. 5 – Now, Let’s Get Serious. Including Files

One of the pitfalls when working with child themes. Many clueless beginners fail this seemingly simple task, because the snippets from the web are always meant for independent themes. That’s why they can’t work.

If you want, or have to include a file, the internet will give you the following code:

require_once( get_template_directory() . '/my_included_file.php' );

This small tag tries to load a file from the parent theme. That’s where the child theme’s templates are located. As we overwrite the parent theme’s stylesheet with ours, the following tag has to be used instead:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

The tag above searches for the needed file from the child folder. Thus, always use the get_stylesheet_directory() variant, and you’ll get the desired result.

Check every snippet from the internet, to see if it has been modified for this small difference.

6 – Adding Widget Areas

Additional widget areas are possible without any problems. For example, we could create an area that wasn’t meant to contain widgets – the footer. Add the following code to the functions.php of your child theme:

<?php //Copy from here function twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => 'Footer Widget', 'id' => 'footer-widget', 'description' => __( 'An additional widget area in the footer' ), 'before_widget' => '<div class="footer-widget">', 'after_widget' => '</div>' ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

Afterward, copy the footer.php from the “Twenty Fifteen” theme folder into your theme folder, and add this small code in beforehand:

<?php if ( is_active_sidebar( 'footer-widget' ) ) : dynamic_sidebar( 'footer-widget' ); endif; ?>

At this point in the footer.php the code seems to be in good hands:

<?php /** * The template for displaying the footer * * Contains the closing of the "site-content" div and all content after. * * @package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 */ ?> </div><!-- .site-content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <?php if ( is_active_sidebar( 'footer-widget' ) ) : dynamic_sidebar( 'footer-widget' ); endif; ?> <?php /** * Fires before the Twenty Fifteen footer text for footer customization. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?> <a href="<?php echo esc_url( __( '', 'twentyfifteen' ) ); ?>"> <?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?> </a> </div><!-- .site-info --> </footer> <!-- .site-footer --> </div> <!-- .site --> <?php wp_footer(); ?> </body> </html> The Creation of a Child Theme From an Existing, Modified Theme

It is so much easier to create a child theme from scratch. However, if you have already modified your theme a lot, without having a child theme set up in advance, it’s still possible. You have to transfer all changes into the child theme to make sure that any updates to the parent theme don’t delete any changes.

Read the following steps, and follow them precisely. This is complicated, and hard work with a lot of fiddling.

  1. First, make a backup of your theme. To do so, use your FTP access, and copy the theme folder to your desktop. Then, create a backup of that folder, and save it somewhere else. You’ll use one of the folders to work, while the other one serves as a backup if everything goes wrong.
  2. Now, create a child theme, following the guide above. A folder, an empty stylesheet, an empty functions.php, and a screenshot.
  3. Get yourself a fresh version of your theme that has not been modified.
  4. Divide your HTML in the center, so that you can display the original file on the left, and the one from the modified theme on the right. Check every template file to see if you made changes.
  5. Transfer all modifications from the functions.php into the version of your child theme.
  6. The altered files belong into the child theme folder. Also, check if you have to swap get_template_directory() for. get_stylesheet_directory() Further information above.
  7. Now for the part that is a bit tricky. You have to compare the fresh Style.css function with the file you altered. Maybe your HTML editor has a function that lets you compare the two files, pointing out the differences. That would be helpful. I have never needed this type of function. If it is not available to you, you will have to use your own eyes to compare the files. All changes go into its own style.css file. After that, place it into the child theme folder equipped with all modifications.
  8. After you have put all altered theme files, and the extended CSS into the child theme folder, load the folder into your theme index wp-content/themes. Make sure that the fresh version of your theme is in there as well.
  9. Log into your WordPress, and make your way to the themes. Use the live preview to check your newly created child theme. If everything is displayed correctly, you’re good. If not, check, in which areas you may have overlooked something.
  10. Revise the missing elements.
  11. Then, check the entire website, and all necessary functions again, using the live preview. If everything is fine, activate your child theme, and enjoy it.
  12. Never do this again:-)

Now, you’ve gotten to know pretty much all important aspects of creating a child theme. Start by creating one based on one of the fine themes we presented you in this article. Which one is your favorite?

Catégories: News dév web

Web Hosting Trend 2017: Dedicated WordPress Providers on the Rise; But Why?

6 octobre, 2017 - 10:00

There are two defining trends of web hosting 2017. One is the transition from physical to virtual hosting, the so-called cloud. The other is the rise of dedicated WordPress providers.

Trends Created From Profit Expectations

Not that long ago, I wrote this article for Noupe, covering the trend of the cloud as a hosting platform. I concluded that not all of a client’s needs could be covered via cloud hosting and that there would still be a demand for cheaper offers.

Not everything that’s possible makes sense… (Cartoon: Noupe)

At the same time, there’s an upcoming trend that I can’t really understand. More and more providers have started to offer dedicated WordPress hosting, some exclusively, and some as an added service. Here, you won’t get free web space for whichever project you need to get hosted. Instead, you’ll get a complete, installed, and maintained WordPress website. Essentially, you get the same thing you can book at, but outside of

From my point of view, there is no real problem that resulted in this offer as its solution. Instead, a problem is made up, as people assume that they can make money off it. This is some kind of “reverse product development”. Most of the time, these do not work in the long run…

WordPress Hosting: Missing the Point

Now, why is it so hard for me to understand the offer? It’s pretty simple. If I want to set up a WordPress website, I either need a good amount of expertise or a professional service provider that takes care of the work for me. If I don’t have the expertise myself, I’d rather focus on the content creation, and be happy that a third party takes care of the technology. Now you may think this was logical, and that that’s what WordPress providers were there for.

This is not right, though. The dedicated WordPress provider is no design agency. Instead, you simply get the naked system in a condition that allows it to run. Thus, you don’t have a design, a structure, SEO, no added features from plugins, nothing. Your domain is directed to a WordPress installation, that’s it. On top of that, the installation, sometimes even including installed plugins and themes, undergoes a regular backup. Of course, the host also takes care of the WordPress updates.

geralt / Pixabay

What’s the point? This offer doesn’t help people without the knowledge, as it is not extensive enough, and doesn’t make the agency or the freelancer redundant. Additionally, even some simple web space packages will give you the option to install WordPress from the backend in a few clicks.

People with the knowledge are able to create conventional WordPress installations on any web space within ten minutes; agencies and design freelancers can do that anyway. They won’t break a sweat over a proper backup either. Current WordPress versions come with automatic updates by default.

The specialized WordPress host Raidboxes relies on SSD, HTTP2, PHP7, and nginx rather than Apache, as well as server-side caching. These are a few upsides, but there’s nothing that you couldn’t find at other hosts. You’d just have to look for it.

WordPress Hosting: Expensive and Inflexible

Dedicated WordPress hosts are quite costly and inflexible when compared to conventional hosts. The hosting is always tailored towards exactly one domain. If you need another, buy another package. With a conventional hosting, you’d just add another domain for a small fee, and redirect it to a folder in the root of your webspace.

If you, as a creative person, want to free yourself from the work of a webmaster, and fully rely on WordPress for your clients, the WordPress hosting could be interesting to you. Usually, this will also fail due to the lack of flexibility, and the high costs, however.

What a dedicated WordPress hosting does guarantee is a technology package tailored to the specifics of the CMS. Raidboxes likes to point out their high level of security, and their strong performance. Sure, a provider that only hosts one platform can fully focus on that.

Hosting WordPress Instead of WordPress Hosting

On the other hand, WordPress hosting is not rocket science, and can easily be brought to a respectable level with a bit of knowledge. Find these articles on the matter here at Noupe.

Thus, I believe that the best WordPress hosting is not a WordPress hosting at the core, but a regular package that you have been able to buy for 20 years already. Pay attention to the technological aspects, and you’re not much further behind than you’d be with an expensive WordPress hosting. Here, you can find an extensive market overview across thirty different providers.

If you are not a creative worker, and you just want to run a WordPress-based blog, the best way to start is the free offer on Once you’ve got a feel for the system, you can either move to a self-hosted WordPress, or connect your domain to, and continue your blog as part of a paid package.

StockSnap / Pixabay Conclusion: WordPress Hosting is Far From Mandatory

Because of all that, I don’t think there’s any striking reason for dedicated WordPress hosting. Of course, there are a few things to keep in mind if you want to operate WordPress yourself. However, you won’t get around building some knowledge or finding the right experts.

Thus, I recommend getting a hosting checklist, and investing the saved money into a premium theme, or commission a professional design service provider that will get you a key-ready WordPress with a layout, and all required functionality.

Even in the latter case, you should, and will have to, start learning about the system’s internals. That’s not a bad thing, as WordPress is pretty simple in comparison to others.

Catégories: News dév web

False Ambition: Am I a Designer, Developer, or Both?

5 octobre, 2017 - 10:00

I started out as a designer. At one point in time, I was forced to start developing. Now, it’s time for a reset.

We Didn’t Have Anything

This goes back to the nineties. Netobjects Fusion was the most widespread design tool, with Microsoft’s Frontpage as a close second. Fusion was made for designers. There was no encounter with the source text of a website, and it wasn’t even possible. The same applied to Frontpage. This resulted in pretty pages, but horrible source code.

Not everything was better in the old days. Ratfink1973 / Pixabay

Later on, Macromedia’s Dreamweaver, and Adobe’s GoLive joined the group, and even surpassed Fusion and Frontpage. In terms of WYSIWYG, the newcomers were superior, and in terms of code quality too. It only made sense that designers were not sad to see the pioneers of design tools leave. However, the damage had already been done.

What Could Have Been if Things Had Gone Differently

Do you write Postscript manually? No? Why not? Right, you don’t need to. Manually writing HTML would not have become necessary either, had the early tools been able to provide a proper realization of the standards, or at least established that this didn’t matter at all. Look at Word and its topsy-turvy code, that works.

Better solutions would’ve been helpful. pucho / Pixabay

Now, did the mediocre quality of early HTML design tools force all of us onto the developer track? This might seem a little over the top. At the very least, the guys from Netobjects or Microsoft won’t be the only ones to blame. However, it’s a fact that we’ve been forced to manually write code from the very beginning, which is something that print design tools never have and would never have asked from us.

Thus, we ended up dealing with unattractive code blocks, rather than appealing designs. Soon enough, this became standard. Ever since then, the code-based working has been picking up pace almost dramatically. No day passes without three dozens of brand-new, naturally awesome frameworks, boilerplates, libraries, and other tools.

Design is Only a Partial Aspect of Our Work

Design in itself has been moved to the background. The developer tasks dominate. Some may like it, but not all do. When looking at my order book, the requests of my typical client have barely changed in the past two years. However, the technological options have changed drastically. This barely matters to the average client, though, as their business goals are the same that people had twenty/thirty years ago. You can open any business studies book of the Eighties and just start reading anywhere.

That’s not beautiful… (Pexels / Pixabay)

The brand-new features that you can only make use of as a developer are not useless, of course. However, they only affect a rather small share of potential customers and are heavily overrepresented in terms of their visibility, and the buzz that is created around them.

Back to the Roots

I’m done. Instead of evaluating new tools just to realize that, after a pointless training period, I can accomplish the same thing that I accomplished before, I will now exit this rat race. I don’t want to develop a Facebook clone, and no client will ever ask me to do so.

I enjoy working on designs, not fiddling around with code. I’ve gotten angry about a missing semicolon, or a superfluous underscore countless times, once I finally found them. This has to stop.

Visual design is more fun. fancycrave1 / Pixabay

And while we’re at it. I don’t want to be a webmaster either. In the Nineties, I’ve put days of work because the mail server of client XYZ didn’t work, or appeared on some block list. Today, doing this is much clearer, and easier, thanks to proper backends. But that doesn’t make it a fun activity.

So, if I don’t want to webmaster, and don’t want to develop, which tool is the one for me? Naturally, the first thing that comes to mind is the homepage builders of the new generation. Dreamweaver and co don’t take care of the webmaster tasks, although they go pretty far in terms of cloud storage support, and management of modules, and other reusable elements.

Hello Wix

For Noupe, I’ve already looked into homepage builders several times, and I’ve also covered the topic for t3n, including the creation of a large market overview. I think I’m able to claim that I can make qualified decisions for, or against certain products.

Looking at it from this perspective, two website builders remained, namely Wix and Webydo. You’ll find a whole bunch of articles covering both of them here at Noupe. My colleague Robert Mening also created a complete website using Wix, and gave a detailed report on it.

While Webydo seems to provide the more complete package, even including billing and white labeling, Wix established the bigger business.

Why does that matter? I don’t want to act as if I was putting my entire occupational future in the hands of the system that I choose. However, it would definitely be – say – annoying should my provider end up shutting down at a moment’s notice. So, assessing how likely the worst case is, is the right thing to do in advance.

Here, I, personally, think the market leader Wix is the safest bet. German competitors have been through tough times already, so all of them are out of question for me. Webydo does offer a good product, but it appears to be moving towards some sort of final battle with Wix. In the end, one of the two will be victorious, and I feel like it will be Wix.

In terms of the feature set, the two providers are very similar, and that also applies to the learning curve and the controls. In case of doubt, it would even be possible to quickly switch between the two. This idea reinforced my decision.

By clearly focusing on Wix-based websites, I won’t lose one single customer. I can tell you that much already. The clients never cared for the technological foundation I got their designs running on. And I’ve only developed web services, mostly communities, two or three times in the past; the last time was 15 years ago.

Mental Health is always a big topic amongst designers and developers. andreas160578 / Pixabay

Psychologically, this decision is immensely easing to me. Once you’ve realized that your business doesn’t need to run at the cutting edge of the latest technologies, a lot of weight falls off.

Of course, I’ll keep staying up to date regarding new developments, but there won’t be a lot of experiments anymore. I won’t write any more code, either. From today on, I’ll only design. Just like I used to in days gone by.

Catégories: News dév web

Branding: The Perfect Logo Will Be Remembered

4 octobre, 2017 - 10:00

If a logo is truly clever is not decided by its pleasant design. It’s much more important that potential customers remember the logo.

If a client can’t even remember your logo, what kind of branding is that? Brand popularity is an asset that you should strive to have.

Branded in Memory: Study With an Interesting Approach

The sign makers of wanted to know the state of brand popularity. They recruited 159 US-American participants for their survey “Branded in Memory”. These participants were asked to draw ten logos of popular brands, among them Apple, Ikea, and Adidas. There was no additional help on that. All they had was their own memory.

The Adidas logo drawn from memory. (Graphic: Over 50% of Participants Achieved at Least Good Results

As expected, the results were of very varying quality. Although the logos they were asked to draw were present in their daily lives, only 16% created almost perfect drawings. Another 37% submitted good, although not perfect, sketches.

The brands participating in the survey should be satisfied with the result, as a majority of 53% of participants recreated the logos pretty well. Naturally, the accuracy of the logo was weaker the higher the complexity of the logo in question. Still, even with complex logos, most participants used the respective colors correctly.

Logos Need to be Simple and Clear

For logo design, this confirms something that we as good designers already knew. A good logo is very simple, with bold colors, simple lines, and few details. Among the tested logos, only Apple and Starbucks took part in the experiment of forgoing their own name in the logo. Starbucks, however, ended up getting the worst test results in return. Of course, the complexity of the displayed figure is also to blame.

The study also showed that younger participants tend to be able to draw a logo with higher precision than older ones. For a while now, we’ve known that younger people in general have a much stronger reaction to advertisements than older people.

Thus, “Branded in Memory” confirms many assumptions that have been considered settled for years. The only new thing here is the perspective that this confirmation was gained from.

Catégories: News dév web

Tool Tip: Best Resume Ever, the Resume Generator for Developers

3 octobre, 2017 - 13:00

Developers are technocratic enough to have Node generate a resume for them. And, strangely, this is pretty cool.

Best-Resume-Ever is a resume generator for Node.js. Based on Vue and LESS, it doesn’t require an underlying aesthetic understanding at all. One could be cheeky and say that this was ideal for programmers.

The Templates of Best-Resume-Ever

The small tool by Sara Steiert from Stuttgart is available on Github, distributed under the liberal MIT license, allowing you to use it freely, and to actively collaborate as well. Especially additional language localizations are in demand.

As of right now, there are five different, appealing templates available for your resume. There is no need for you to design anything, simply enter your personal information into the file src/person.js. The finished curriculum vitae is exported as a PDF.

I wouldn’t install Node just for Best-Resume-Ever if I didn’t have it already. However, if you already have Node in use, this gives you a nice additional use case for your professional future.

Catégories: News dév web

Tool Tip: Banimatic Creates Banners of All Sizes

2 octobre, 2017 - 10:00

The online banner generator Banimatic generates banners of any size fully automatically. The results can be edited, and even animated, if you want to.

Chop-Chop, a Banner

Go make a banner for your website real quick. If possible, do that in six different resolutions. This sounds like it was a bit of work, and of course, it is. It’s not really an attractive task, either. If I can get help on that, I’ll gladly take it.

Banimatic is a service that automatically creates banners for, and from, websites. All Banimatic needs from you is a URL. After entering said URL on the service’s landing page, you’ll get a whole bunch of suggestions after a short wait.

Suggestions From the Robot

As the service randomly draws the images from the entered URL, and uses fonts however it likes, a majority of the results can take some getting used to. Thus, you shouldn’t close the tab after the first page of suggestions.

Works Most of the Time: Generating Ideas Via Many Suggestions

For me, the main benefit of the service is that it gives you quick access to a few ideas on what a banner could look like in a certain resolution. I also find the animation function to be rather useful. While all of them are randomly applied default animations, viewing them still sets your brain in motion.

If one of the suggestions is somewhat appealing, you should edit it. Banimatic grants you access to all design elements of the created banner. This lets you change all texts, images, and fonts. You also get to remove all elements that you believe are not needed. This is pretty flexible, and can lead to a complete banner.

Adjustable to the Last Detail

If you happen to want to edit and actually use a banner created with the service, you have to set up an account at Banimatic, and pay for the final result. You can pay via monthly subscription or on demand. 10 banner downloads will cost you about 10 USD.

You’ll have to decide for yourself if this is worth it. I only use Banimatic for a quick idea, but not for finished banners. However, I don’t want to eliminate the possibility of me actually falling back on the offer, should time constraints force me to.

Catégories: News dév web

Roundups: The Newsletter Aggregator for Designers

29 septembre, 2017 - 08:30

Newsletters and other ways of compiling design resources are a dime a dozen. helps you keep an overview.

The Part With the Heavy Sighs

I don’t know how you feel about this. I’m subscribed to a couple dozen newsletters, and, upon receiving them, I automatically place them into folders. Afterwards, I barely get to read them. However, I have sorted them, and who knows, I might read them later on when I have more time … No, probably not.

This is the landing page of the service

Nothing is as old as yesterday’s newsletter. This doesn’t apply to every topic, but it tends to be a documented wisdom. Wouldn’t it be cool to have a newsletter that evaluates all other newsletters, only curating their best components? Yeah, that would be pretty nice.

The Part With the Vision of a Better Future, developed by the English designer Joel Rosen, is that service. is designed as a traditional collection of newsletters and compilations for designers, apperaing to be some kind of bookmark portfolio. Every resource that Joel has picked up for us is presented with a thumbnail, and a short teaser text.

To make it easier to find your way around, Joel sorts all bookmarks into relevant categories, like Marketing, Typography, UI & UX, and many more. This allows us to limit the list to the topics we’re interested in, resulting in only receiving appropriate newsletters and roundups.

Detail View is a Big Word for the Thumbnail and the Teaser, But oh well…

The list of categories is rather long, and so is the list of curated resources. But, wouldn’t really do anything in terms of slowing down the information overflow, if it wasn’t for this one clever small function being that offers an own newsletter. This newsletter on the other hand only curates the best content from the portfolio’s collected newsletters, and it is published once a month.

If you are a hard working designer who’s constantly groaning from the burden of the deadline, this release cycle should definitely be sufficient. If it isn’t, you should reconsider your workload situation.

The Conclusion: Check it Out

Those familiar with the world of design information, will have seen a lot of offers from already. I was surprised how many I knew, and just ended up forgetting. Now, I’m excited for the first issue of the super mega newsletter. I hope it will be good…

Catégories: News dév web

Good Web Design: Best Practices for Modern Designers

26 septembre, 2017 - 15:00

Good Web Design is a service dedicated to collecting the best landing pages. Not limited to that, the developers also focus on details, such as the best navigation bars, or the best CTA.

We all know curated screenshot collections of modern designs. They are a dime a dozen. Unfortunately, a lot of them have suffered from their creator’s disinclination, and don’t add any new designs, or add anything the users hand in. Eldorado for link builders.

Good Web Design: Navigation Bars

Good Web Design pursues a different approach. Firstly, the creators, Charlie Feng and Yitong Zhang, didn’t get bored of it yet, allowing you to continuously find freshly curated pages. Furthermore, the two operators don’t restrict themselves to the display of landing pages as a whole but also present more specific best practices, like the best CTA, the best FAQ, or the best navigation bars.

Good Web Design: Fullscreen Preview

The service itself has a modern design, and the controls are intuitive. You can either display all entries chronologically or filter by keywords. The overview can be shown as a grid or as a list. Clicking an element opens it in a fullscreen view, but it’s not a link to the original. This way, they make sure that the example presented as a best practice cannot be made nonsense of by potential changes to the original. The link to the source can be found on the bottom right of the preview in the grid and list view, behind the word “Source.”

Aside from the option to filter individual topics using the upper navigation bar, you can use the tags of the respective preview at any time during surfing, allowing you to move through the supply associatively.

The submission of your own suggestions is appreciated as well.

Catégories: News dév web

Hixle: UI-Design Dissected

25 septembre, 2017 - 10:00

Design is not only about taste. Good design can be constructed, not just invented. The new service Hixle helps you do that.

Inspiration is Not Cheap

Inspiration itself is a good thing. But, just seeing a pretty screenshot of an app or website won’t actually do much for you. Inspiration wants to be fed more precisely.

Which tools did the designer work with? Which fonts did he use? What kind of color gradient is this? Which dominant colors, which color palette is this design based on?

Use this information to create a blueprint for you to use for your next project.

Hixle Gives You Blueprints for Your Ideas

The new service Hixle provides you with help regarding just that. Thus, it’s no surprise that Hixle’s inventor has the goal to turn the service into some starter kit for new projects. Here, Hixle is even meant to consider cultural differences. For instance, a future search query could be: “Show me the colors most US-Americans associate with joy and satisfaction. There’s no denying that this would be a great thing.

Hixle: Landing Page

As of right now, Hixle is a small but neat project, based on a WordPress installation, and it is curated manually. Hixle’s creator, the London-based product designer Balraj Chana, plans to make the project open to designers, allowing the portfolio to expand faster. Of course, Design is always a question of taste, too. In that aspect, not everyone will agree with Chana’s selection.

Currently, Hixle offers different approaches to get the desired inspiration. Access displays of entire projects from the landing page. After clicking one of the thumbnails, a modal window with detailed information on the project pops up. The information includes the used fonts, and tools, as long as Chana can make it available. He mainly relies on source code analyses for that. The dominant colors, for example, are extracted from the CSS.

Hixle: Detailed Information Palettes, Gradients, Fonts, and Tools for Your Next Project

Aside from this rather global approach, Hixle also provides direct access to palettes, gradients, fonts, and tools. The way of accessing them is always the same. All elements are visualized as a grid. You hover over this grid and click one of the elements that you’re interested in, opening a modal window with further details. Here, you’ll find out the hex values of the color palettes and gradients, which you won’t see in the project overview. Access the source of the respective tool, font, etc. from the modal.

Hixle: Collection of Palettes, Gradients, and More.

Every listed element can be shared via your social media channels, like Twitter, Facebook, LinkedIn, and Pinterest. An upvote system lets you make sure that your favorites get the attention you think they deserve. Participating is simple, but not for everyone. The only way to sign up is using Twitter or Facebook OAuth. The benefit: it’s done super fast ;-)

Conclusion: Hixle is Worth a Bookmark

Hixle has potential. Especially when the project succeeds in gaining further contributors, the service can turn into a real source of inspiration. If you’re not a fan of the authentification, don’t do it. All you’re missing out on is the participation in the voting.

Overall, Hixle has earned its spot in your bookmark collection.

Catégories: News dév web

Creative Browsing With Vivaldi 1.12

22 septembre, 2017 - 11:00

The new project Vivaldi by the founder of Opera is gaining momentum. The feature set is slowly expanding towards creative workers.

Firefox, Chrome, Edge: All Similar

I can’t claim to be satisfied with the big browsers. Thus, I’m even more interested in the new version of the Vivaldi browser. Why do browsers still look the way they did ten years ago? Should I assume that the UI for website viewing programs have been declared sophisticated with a global consensus?

Noupe on Vivaldi

No, that can’t be it. Both the creators and the previous creators of Opera show that there are other approaches to displaying and equipping the browser in the future.

Vivaldi: Interesting Realization of Interesting Ideas

Vivaldi 1.12, for instance, comes with the ability to display the attributes of any desired image on a website, in a clear and visually appealing way. To do so, it reads the EXIF data. Of course, this requires the EXIF data to still be in the photo. Other browsers are able to display this data too, some only with extensions, but the way Vivaldi does it is simply beautiful, in the sense of aesthetically pleasing.

Additionally, the developer team has also taken care of the topic of file downloads. No questions are left unanswered with Vivaldi’s download panel. Here, users can see the name of the file, where it’s from, where it goes, how fast that is happening, and a lot more.

The third feature is both the most unusual, and most unnecessary one. Via the browser settings, you are able to lower the saturation of the browser’s accent colors. Supposedly, users have complained about the browser’s colors being too dominant. With the saturation settings for the accent color, you can even turn a loud red into a grey-red look. This has no use for me, but it might have one for people that don’t know what else they could ask for.

However, Vivaldi is still a visually appealing page viewer, that orients itself by the principles of flat design. Vivaldi is no feature monster, but it’s simply beautiful.

You can download Vivaldi for Windows, macOS, and Linux. Aside from the aesthetics, creative workers will also enjoy the features, like the integrated screenshot engine, as well as the various website actions, allowing you to change the font, or block content, for example. The browser itself can also be altered in all kinds of visual aspects. Go take a look for yourself.

Catégories: News dév web

WordPress: Modern Theme Development With Action Hooks

21 septembre, 2017 - 13:00

Developing excellent WordPress themes is an actual challenge. But even the seemingly easy adjusting of existing themes can become pretty tough pretty fast.

More and more developers use action hooks in their template files, as they help to keep a clear overview of the individual files, as well as the used functions. As there is very little information on working with action hooks out there, beginners and advanced users alike tend to run out of ideas quickly.

WordPress Action Hooks – an Introduction

To prevent that from happening to you, today, we’ll look into action hooks and their advantages, to save you from these frustrations.

If you want to open a WooCommerce shop, you may consider adjusting the popular Storefront theme to your needs. After opening the template file for the display of the start page, this is what you’ll see:

Welcome to the New and Clear World of Theming.

As you can see, there are no loops in this file. Other theme files of Storefront are designed like this, too. However, these files could be cleaned up even more:

Theming With Action Hooks Brought to the Boil. A Theme File Does Not Need to Contain More Than This.

Here, a single action hook takes care of the display of the star page’s content.

<?php do_action( 'homepage' ); ?> The Principle of the WordPress Action Hooks

The principle behind this is rather simple, and you already know it. WordPress already offers a couple of pre-defined hooks, which are commonly used. These include:

<?php //Well Known Action Hooks: wp_head(); wp_footer(); the_content(); the_excerpt(); ?>

The principle remains: functions are “hooked,” and either executed or displayed. Your own, custom action hooks work the same way. But what exactly is the benefit of this type of development?

The Big Advantage of This Type of Theme Development

Now, you’ll probably ask yourself what the benefit of this kind of development is. The answer is obvious. Aside from the clarity of the individual templates, there’s another unbeatable benefit:

For individually editing and adding new functions to an existing theme not a single theme file needs to be touched. The largest source of errors in custom theme files falls out completely.

Modifications and custom functions can be added to the templates without having to change these files, using action hooks. They can “magically” appear right where you want them to. Allow me to summarize:

  • Clear structures
  • Absolute clarity
  • All functions in one place
  • No adjustment of single theme files required
How to Work With WordPress Action Hooks

Once you got the hang of it, working with action hooks is pretty simple. You define your own hook, program your function, and hook it. Creating an own hook is easy, the needed function is called do_action() However, before dealing with that, there are a few things to keep in mind.

Step 1: What You Should Pay Attention to

Clarity is the most important aspect. You should collect all template functions in one file. The functions.php, however, is not the right file for this job. Create an own file for this job, where you collect all functions that work on the display of the theme.

The Storefront theme serves as a good example here, as you’ll find all template functions in the folder /inc in the file storefront-template-functions.php. I recommend setting up a file like that too. A folder /inc is the right place for this file.

However, you still need to tell WordPress about the existence of the file. One line of code in the functions.php makes sure that you file is loaded:

<?php require_once( get_stylesheet_directory(). '/inc/template-functions.php' ); ?> Properly Document Your Code

A proper documentation of your code is crucial. Assume that other people will have to understand your code as well. Even if that isn’t the case, after a year, you’ll have problems finding your way around your own theme.

A proper documentation provides a perfect overview at all times. I have solved this requirement like this:

This is what a proper documentation should look like. Even the respective folder and the files are mentioned. Schritt 2: Defining a WordPress Action Hook

Define your hook within the brackets. For example, it could be called like this:

<?php do_action( 'startpage' ); ?>

If you need to divide words, use underscores instead of hyphens.

<?php do_action( 'startpage_loop' ); ?>

Now, place this hook in the theme file, wherever you want the function to be. You are not restricted here, and you get to use your action hooks almost anywhere. Before or after the content, before or after the heading, or the comments, for example. One example is Storefront’s single.php:

The Storefront Theme’s single.php is a Good Display of the Hook’s Possibilities. Step 3: Working With the WordPress Action Hooks

Let’s use the Storefront theme’s start page as an example once more. You’ll quickly realize that working with the hooks is pretty easy to grasp. Here’s the start page’s hook once again:

<?php do_action( 'homepage' ); ?>

Now, write your functions in the file you set up for that.

<?php if ( ! function_exists( 'storefront_homepage_content' ) ) { /** * Display homepage content * Hooked into the `homepage` action in the homepage template * * @since 1.0.0 * @return void */ function storefront_homepage_content() { while ( have_posts() ) { the_post(); get_template_part( 'content', 'homepage' ); } // end of the loop. } }

Afterwards, your function is hooked and moved to the respective spot:

<?php add_action( 'homepage', 'storefront_homepage_content', 10 );

Your function will now appear on the start page. First, write the action hook, then enter the function’s name into the add_action() tag. It’s that simple.

Step 4: One Hook, Many Functions

But, how does one place many functions with a single hook? The secret lies in the priorities. The lower the priority number, the higher up the function appears. Let’s take a close look at the template:

The Storefront Theme’s Homepage File.

Seven functions share one action hook. This is possible thanks to the priorities that appear behind each hooked function. Here in the example, this ranges from priority 10 to priority 70.

These numbers determine the order of the executed functions. The ten appears at the top, the 70 at the very bottom. We distribute the priorities with the add_action() tag:

<?php // The 10 is the priority add_action( 'homepage', 'storefront_homepage_content', 10 ); Simply Sliding Functions in Between

Controlling the display of your file is that simple, and in the case of our example, you can even slide functions into the file wherever you want to. Just enter an “in-between priority” for your function.

<?php add_action( 'homepage', 'your-own-function', 15 );

Now, due to the priority, your custom function is displayed between the Storefront homepage content and the product categories.

WooCommerce: Adding Share Buttons Without Template Modifications

Every WooCommerce shop owner wants to add the important share buttons on the display of an individual product. Thanks to the action hooks, this can be done within a few minutes. The respective file that we hook our share buttons into is share.php.

The share.php With the Action Hook, Into Which We Hook Our Share Buttons.

Aside from the automatic integration of share buttons into the theme, many share button plugins give you the option to manually place the buttons. For the most part, this is done using a shortcode. The shortcode for the manual integration into the theme file looks like this:

<?php echo do_shortcode('[your-button-plugin]'); ?>

The function required for the integration into the view of a single product would look like this:

<?php /** * Implementing Share Buttons on the Page of an Individual Product */ function share_for_woocommerce() { echo do_shortcode('[dein-button-plugin]'); } add_action( 'woocommerce_share', 'share_for_woocommerce' );

As only a single function is hooked, defining priorities is not needed.

The Result:

Share Buttons in the Right Spot Without Having Touched the Template File. Perfect! Conclusion

WordPress action hooks are an excellent way to keep a theme’s files clear and structured. A good code documentation with a thought-out folder and template structure provides massive advantages, as it allows other developers to find their way around quickly.

Additionally, this modern theming is very user-friendly, as no files need to be altered to adjust a theme.

Catégories: News dév web

Adobe Xd is THE Prototyping Tool of 2017

20 septembre, 2017 - 09:00

Prototyping, creating a first usable model of a website or app, needs to be one thing above all else: fast. The fastest tool for this purpose is Adobe Xd.

Today, I had to develop a wireframe model of a smartphone app. It wasn’t supposed to be very detailed but meant to give a comprehensible explanation of the basic concept and be presentable on a smartphone. It didn’t take me long to figure out which tool I should use. I started up Adobe Xd.

Adobe Xd: Newbie in the Creative Cloud

Adobe Xd, also known as Adobe Experience Design CC (Beta), is software available as a part of the Creative Cloud. If you’re already subscribed, you have access to the program. As it is currently in the beta for Mac and Windows, you can even use and download it for free. Setting up the required Adobe ID can be done fast, and for free.

So, at the current moment, you don’t need to be a subscriber of CC to download and use Adobe Xd. The time is now to test it.

Once the final version is out, after the beta test has concluded, the only way you’ll be able to use AdobeXd is via a CC subscription.

Fast Wireframes With Varying Details

Now, why did I start up Adobe Xd just to create a wireframe of an app? In contrast to what the product’s name may suggest, Adobe Xd does not only deal with more specific problems of UX designers. Instead, it is a general tool for the creation of designs for the web and mobile devices.

Adobe Xd Start Screen

Adobe Xd is a fast helper when it comes to wireframes. However, the software is also capable of creating interactive prototypes, screen designs, and even production ready assets. To sum it up, Adobe Xd supports the entire design process. You get to choose the level of detail.

Of course, Xd can support you from the wireframe up to the finished product, simply by continuously increasing your design’s complexity, depending on the customer feedback.

Adobe Xd: Clear Task Description and Clear Labor Division

Depending on which stage of your product you’re in, you’ll enjoy the various tools that Adobe Xd provides. At any point, it is possible to export the project stage, to get feedback from clients or team members. For example, you can create a link that allows everyone with access to the linked project to view your design, or even use it, if you selected that option. A comment feature allows for real-time feedback.

It’s also possible to view your app concept on mobile devices. To do so, move the Xd file into your Creative Cloud, where you can access it with a mobile app, available in the app stores of Android and iOS. The design can be then tested on mobile. Of course, this will be especially impressive to the client. For a quick test, the smartphone connection via USB should be the faster option, if you want to test it on a real mobile device at all.

Adobe Xd goes all in when it comes to speed. Thus, the software’s user interface is very clean and divided into two separate environments.

The design of the mockup is taken care of in the section “Design.” This is where you’re sure to spend most of the time. It’s where you create your drafts page by page, and place them next to each other on the screen. All visible image elements are designed here. The work section “Design” is where the app’s entire look is created.

In the section “Prototype,” the feel of your app is developed. Here, simple connection lines let you choose which screen element on which screen leads to another screen with a tap. This is where you work on the entire control structure. Aside from the pure targets, you also get to define various transition effects, as well as easings and their duration.

Connections Between the Drawing Areas Are Represented by Lines.

The fastest form of the preview is the program functionality simply called “preview.” It opens your mockup in a separate window, which has the size of the target resolution. This should be sufficient for the first review, and your own purposes. Distributions via links or the presentation on the phone are only worth it once other project participants come into play. In a later version, it will be possible to collaborate in real time using the Creative Cloud, as shown by Google Docs or Office365.

Adobe Xd: Efficiency is Key

What impresses me the most are the effective tools that Adobe Xd presents in the “Design” section. For instance, there’s the control panel “Elements.” Here, you get to deposit design elements, like colors or fonts, to let you pick them back up at a later point in your design. This is also where you save so-called symbols. These could be icons, for example, which can then be adjusted over the course of the entire project by just editing the stored symbol.

In general, you can transfer the formatting of any object to other objects by copying it. It is also useful to know that the text tool always keeps the settings of the previous text. Thus, you can quickly add text in the correct formatting, of which you, as a sound designer, only have three or four.

Very Clean! In Adobe Xd, You Get to View All Design Components at Once.

The so-called repeat grid allows you to quickly add a grid or a formatted list without having to manually add every single element of the list or table. All you need to do is create an object, and multiply it with the Repeat Grid.

Speaking of grids. Adobe Xd offers many ways to level your design elements. Various help lines tell you where your element is currently positioned within the design. It can easily be aligned with the top or bottom border.

Just drag images you want to use in the design into the respective drawing area via drag and drop. Specific masks make sure that your images are automatically adjusted to the defined design parameters.

As we know it from other Adobe applications, design parts can be grouped, letting you edit these groups in a later step, while preventing individual elements of the group from being moved or altered in other ways.

Once your prototype is matured to the point where it’s time to produce the assets for the developer of your app’s code parts, Adobe Xd’s export function comes into play. Depending on the target platform (Web, iOS, or Android), the software makes sure that all required assets are exported. The export is done as an SVG, or PNG. An additional PDF export allows you to distribute the concept in the reader format.

Adobe Xd: Fast, Catchy, and Available for Both Large Operating Systems

My app mockup took me half an hour. It didn’t contain any production-ready assets, as it was a classic wireframe. Nonetheless, the presentation on my smartphone was able to illustrate my ideas well enough for all project members. Did I mention that I’ve been a subscriber of the Creative Cloud for years as it is? For me, this subscription has gained a lot of value with Adobe Xd.

If you want to mention Sketch as an alternative, let’s get to this straight away. Sure, Sketch is an excellent product. However, it takes a lot longer to get to a result, as it focuses more on the creation of production-ready assets than rapid prototyping. On top of that, it’s only available for macOS, while Adobe Xd runs on both macOS and Windows.

For a quick start, Adobe offers a whole bunch of video tutorials. This way it will take you a maximum of 19 minutes to be able to use the software productively.

You can find the mobile app for the presentation on smartphones here:
Catégories: News dév web

The 26 Most Useful and Most Functional WordPress Snippets

19 septembre, 2017 - 10:00

WordPress becomes better with the plugins, as they allow you to fully customize your website to fulfill your needs. However, many functions can also be integrated without using a plugin. A simple snippet does the trick. Collecting all the required snippets can be pretty tedious, though. Thus, today, I’ll open my toolbox and list my favorite WordPress snippets for you.


  • WordPress Version up from 4.6
  • PHP-Version 7.xx

Either copy the snippets into your active theme’s functions.php, or set up a page-specific custom plugin for this job.

[box-achtung text=”Remember: Before you apply any changes to the functions.php, create a backup of the file. Don’t alter the file using the WordPress editor. If something goes wrong, you won’t have access to your website. Make your additions using an FTP access, directly on your web space.”]

The WordPress Tag Cloud is a popular tool for a blog’s sidebar. Your visitors can use it to easily find what they’re looking for. However, WordPress displays the tags in different sizes, which is not always a desired thing. Use this snippet to remove the inline styles.

<?php /** * Remove style from Tag Clouds * @author Andreas Hecht */ function drweb_remove_tagcloud_inline_style($input){ return preg_replace('/ style=("|\')(.*?)("|\')/','',$input); } add_filter('wp_generate_tag_cloud', 'drweb_remove_tagcloud_inline_style',10,1); 2 – Turn Off Your Self-referring Pingbacks

Pingbacks and trackbacks are not generally bad. They tell you if your articles were mentioned or linked on other websites. Sadly, WordPress has the bad habit of informing you about links of your articles on your own website. This snippet lets you turn off these annoying messages.

<?php /** * Disable self pingbacks * */ function evolution_no_self_ping( &$links ) { $home = get_option( 'home' ); foreach ( $links as $l => $link ) if ( 0 === strpos( $link, $home ) ) unset($links[$l]); } add_action( 'pre_ping', 'evolution_no_self_ping' ); 3 – Turn Off WordPress Emojis

Not everyone is a fan of the colorful emojis. If you don’t want to use emojis in your posts, you can deactivate this feature. Your blog’s performance will thank you.

<?php /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference betwen the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', '' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; } 4 – Turn Off the jQuery Migrate Script

jQuery Migrate is a script meant to create a downward compatibility of older jQuery applications. The “normal” and modern jQuery version does not support all old applications anymore. While this won’t affect more than 5% of all WordPress website, WordPress loads the pretty sizeable script by default. Here’s an easy way to turn it off:

<?php /** * Dequeue jQuery Migrate Script in WordPress. */ if ( ! function_exists( 'evolution_remove_jquery_migrate' ) ) : function evolution_remove_jquery_migrate( &$scripts) { if(!is_admin()) { $scripts->remove( 'jquery'); $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' ); } } add_filter( 'wp_default_scripts', 'evolution_remove_jquery_migrate' ); endif; 5 – Deactivate the WordPress oEmbed Function

The WordPress version 4.4 brought us the new function oEmbed, which is mainly meant to allow you to integrate foreign articles or pages into your posts with a simple link. If you don’t need this function, or you simply don’t want your articles to be able to be displayed in foreign posts at any time, just deactivate this function.

<?php /** * Disable embeds on init. * * - Removes the needed query vars. * - Disables oEmbed discovery. * - Completely removes the related JavaScript. * * @since 1.0.0 */ function evolution_disable_embeds_init() { /* @var WP $wp */ global $wp; // Remove the embed query var. $wp->public_query_vars = array_diff( $wp->public_query_vars, array( 'embed', ) ); // Remove the REST API endpoint. remove_action( 'rest_api_init', 'wp_oembed_register_route' ); // Turn off oEmbed auto discovery. add_filter( 'embed_oembed_discover', '__return_false' ); // Don't filter oEmbed results. remove_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10 ); // Remove oEmbed discovery links. remove_action( 'wp_head', 'wp_oembed_add_discovery_links' ); // Remove oEmbed-specific JavaScript from the front-end and back-end. remove_action( 'wp_head', 'wp_oembed_add_host_js' ); add_filter( 'tiny_mce_plugins', 'evolution_disable_embeds_tiny_mce_plugin' ); // Remove all embeds rewrite rules. add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' ); // Remove filter of the oEmbed result before any HTTP requests are made. remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result', 10 ); } add_action( 'init', 'evolution_disable_embeds_init', 9999 ); /** * Removes the 'wpembed' TinyMCE plugin. * * @since 1.0.0 * * @param array $plugins List of TinyMCE plugins. * @return array The modified list. */ function evolution_disable_embeds_tiny_mce_plugin( $plugins ) { return array_diff( $plugins, array( 'wpembed' ) ); } /** * Remove all rewrite rules related to embeds. * * @since 1.0.0 * * @param array $rules WordPress rewrite rules. * @return array Rewrite rules without embeds rules. */ function evolution_disable_embeds_rewrites( $rules ) { foreach ( $rules as $rule => $rewrite ) { if ( false !== strpos( $rewrite, 'embed=true' ) ) { unset( $rules[ $rule ] ); } } return $rules; } /** * Remove embeds rewrite rules on plugin activation. * * @since 1.0.0 */ function evolution_disable_embeds_remove_rewrite_rules() { add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' ); flush_rewrite_rules( false ); } register_activation_hook( __FILE__, 'evolution_disable_embeds_remove_rewrite_rules' ); /** * Flush rewrite rules on plugin deactivation. * * @since 1.0.0 */ function evolution_disable_embeds_flush_rewrite_rules() { remove_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' ); flush_rewrite_rules( false ); } register_deactivation_hook( __FILE__, 'evolution_disable_embeds_flush_rewrite_rules' ); 6 – Free the WordPress Header From Unnecessary Entries

WordPress loads a bunch of things via the wp_head() hook into the header of the WordPress themes. Some of them are very useful, some aren’t. Some just inflate the website unnecessarily. Here’s a small snippet to do some major cleaning up.

<?php /** * Frees the header from unnecessary entries */ add_action('init', 'evolution_remheadlink'); function evolution_remheadlink() { remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'index_rel_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'feed_links', 2); remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'parent_post_rel_link', 10, 0); remove_action('wp_head', 'start_post_rel_link', 10, 0); remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0); remove_action('wp_head', 'wp_shortlink_header', 10, 0); remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0); } 7 – Inject Post Images Into the RSS Feed

By default, WordPress doesn’t add post images to the RSS feed. This snippet changes that.

<?php /** * Add Post Images to the RSS Feed */ function evolution_featuredtoRSS($content) { global $post; if ( has_post_thumbnail( $post->ID ) ){ $content = '<div>' . get_the_post_thumbnail( $post->ID, 'large', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content; } return $content; } add_filter('the_excerpt_rss', 'evolution_featuredtoRSS'); add_filter('the_content_feed', 'evolution_featuredtoRSS'); 8 – Allow Additional File Formats For the Media Library

You want to upload special file formats to your WordPress media library, and you get an error message? Use this code, and your problem is solved. The code allows you to upload the file formats ZIP, MOBI, PDF, and EPUB. If you happen to need more formats, find the complete list of MIME types here.

<?php /** * Add further Mime types for the download of the products */ function add_custom_mime_types($mimes){ $new_file_types = array ( 'zip' => 'application/zip', 'mobi' => 'application/x-mobipocket-ebook', 'pdf' => 'application/pdf', 'epub' => 'application/epub+zip' ); return array_merge($mimes,$new_file_types); } add_filter('upload_mimes','add_custom_mime_types'); 9 – Freely Define the Length of the Excerpt

Sometimes, a very precise excerpt length is needed for a certain template. The following function lets you define this length freely. The good thing is that the excerpt length is not set globally, allowing each template to have its own length.

<?php /** * Custom Excerpt Lenght * */ the_excerpt_max_charlength(190); function the_excerpt_max_charlength($charlength) { $excerpt = get_the_excerpt(); $charlength++; if ( mb_strlen( $excerpt ) > $charlength ) { $subex = mb_substr( $excerpt, 0, $charlength - 5 ); $exwords = explode( ' ', $subex ); $excut = - ( mb_strlen( $exwords[ count( $exwords ) - 1 ] ) ); if ( $excut < 0 ) { echo mb_substr( $subex, 0, $excut ); } else { echo $subex; } echo '...'; } else { echo $excerpt; } }

In the template, just exchange the tags and define the excerpt length:

// Deleting the original tag: <?php the_excerpt(); ?> // Exchange with this tag, and enter any length (in brackets): <?php the_excerpt_max_charlength( 250 ); ?> 10 – Responsive Videos – YouTube and Vimeo

If your theme doesn’t support responsive videos, setting up the support to do so can be done very quickly. A PHP function makes for an automatic embedding in a Div, while the CSS information makes sure there’s an optimal scaling at any resolution.

<?php /** * Responsive Videos, Youtube and Vimeo * */ function evolution_wrap_oembed( $html ){ $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); // Strip width and height #1 return'<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>'; // Wrap in div element and return #3 and #4 } add_filter( 'embed_oembed_html','evolution_wrap_oembed',10,1);

The necessary CSS:

.embed-responsive.embed-responsive-16by9 { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .embed-responsive.embed-responsive-16by9 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* This indication makes HTML5 videos responsive */ video { width: 100% !important; height: auto !important; } 11 – Setting Up WordPress Pagination Without a Plugin

Do you want to replace the “older posts | newer posts” with a cool list of numbers? No problem, as with WordPress version 4.1 you don’t need the popular plugin WP PageNavi anymore. Now, doing this is very easy to do using default means.

You can use this function directly within the index.php , and in the archive.php. However, creating a child theme to do so is advantageous.

<?php the_posts_pagination( array( 'mid_size' => 3, //How many buttons will be displayed before the placeholder »...« appears. 'type' => 'list', // Display as a list 'prev_text' => __( '« Newer', 'textdomain' ), 'next_text' => __( 'Older »', 'textdomain' ), ) ); ?>

To give the list a design, some CSS is needed. Here are the styles that I use every now and then. You need to adjust it to your blog colors:

nav.pagination{position:relative;display:block;margin-top:20px} .page-numbers{margin:0;padding:0} .page-numbers li{list-style:none;margin:0 6px 0 0;padding:0;display:inline-block} .page-numbers li span.current{padding:10px 15px;background:#9FC65D;border:1px solid #9FC65D;display:block;line-height:1;color:#fff} .page-numbers li a{padding:10px 15px;background:#eee;color:#555;text-decoration:none;border:1px solid #eee;display:block;line-height:1} .page-numbers li a:hover{background:#9FC65D;border-color:#9FC65D;color:#fff} .screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute!important; height: 1px; width: 1px; overflow: hidden; } 12 – Custom Login Logo With a Custom Background Color

You are really proud of your WordPress website, and you put lots of effort into the design? Take it a step further, and adjust the logo on the login page. In combination with your own background color, this looks really nice.

<?php /** * A new logo for the admin area and an own background color * @author Andreas Hecht */ function ah_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/dein-logo.png); margin-bottom: 0; background-size: 180px; height: 180px; width: 180px; margin-left: auto; margin-right: auto; border-radius: 50%; } body.login {background-color: #0073bf;} .login #backtoblog a, .login #nav a {color: #fff !important} </style> <?php } add_action( 'login_enqueue_scripts', 'ah_login_logo' ); 13 – Change the Look of the First Paragraph

Your article will only look really cool when the first paragraph is designed in a different color and font. To do so, you don’t even need to switch into the text area of your editor, as WordPress itself can do that for you automatically. Two snippets do the trick:

<?php /** * Auto-Highlighting - Automatic highlighting of a post's first paragraph * @author Andreas Hecht */ function tb_first_paragraph_highlight( $content ) { return preg_replace( '/<p([^>]+)?>/', '<p$1 class="opener">', $content, 1 ); } add_filter( 'the_content', 'tb_first_paragraph_highlight' );

The code above adds the class .opener to every article’s or page’s first paragraph. Now, a bit of CSS lets you control the paragraph’s formatting, as well as the “place” of action.

/* Only selected articles get the design */ .single p.opener { color: #165a72; font-weight: 400; font-size: 21px; line-height: 1.5; }

Or articles and pages display the first paragraph differently:

/* Individual articles and pages are designed */ .single p.opener, .page p.opener { color: #165a72; font-weight: 400; font-size: 21px; line-height: 1.5; } 14 – User Signup With Email and Password Only

Since WordPress version 4.5, a user signup via email address and password is possible. In order to annoy hackers, and make WordPress a bit safer, you can sign up via email and password exclusively using this code.

<?php // Copy from here //Deleting WordPress authentification remove_filter('authenticate', 'wp_authenticate_username_password', 20); // Placing new authentification - sign up via email and password only add_filter('authenticate', function($user, $email, $password){ //Check for empty fields if(empty($email) || empty ($password)){ //create new error object and add errors to it. $error = new WP_Error(); if(empty($email)){ //No email $error->add('empty_username', __('<strong>ERROR</strong>: Email field is empty.')); } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ //Invalid Email $error->add('invalid_username', __('<strong>ERROR</strong>: Email is invalid.')); } if(empty($password)){ //No password $error->add('empty_password', __('<strong>ERROR</strong>: Password field is empty.')); } return $error; } //Check if user exists in WordPress database $user = get_user_by('email', $email); //bad email if(!$user){ $error = new WP_Error(); $error->add('invalid', __('<strong>ERROR</strong>: Either the email or password you entered is invalid.')); return $error; } else{ //check password if(!wp_check_password($password, $user->user_pass, $user->ID)){ //bad password $error = new WP_Error(); $error->add('invalid', __('<strong>ERROR</strong>: Either the email or password you entered is invalid.')); return $error; }else{ return $user; //passed } } }, 20, 3); 15 – Prevent Users From Changing Their Passwords

The WordPress admin area is the heart and the lungs of your website. Make sure that the distributed passwords are very safe, giving attackers no chance. Users like to change the assigned passwords into very easy to remember, and very easy to hack versions, though. You can prevent that!

<?php /** * * Preventing users from changing their passwords * */ class Password_Reset_Removed { function __construct() { add_filter( 'show_password_fields', array( $this, 'disable' ) ); add_filter( 'allow_password_reset', array( $this, 'disable' ) ); } function disable() { if ( is_admin() ) { $userdata = wp_get_current_user(); $user = new WP_User($userdata->ID); if ( !empty( $user->roles ) && is_array( $user->roles ) && $user->roles[0] == 'administrator' ) return true; } return false; } } $pass_reset_removed = new Password_Reset_Removed(); 16 – Displaying Ads After the xx Paragraph

If you want to make money off your blog, you won’t get around using ads. You could use the popular Google Adsense, for example. This snippet displays your ads after a selected paragraph.

<?php /** * Adding an ad after the second paragraph * */ add_filter( 'the_content', 'tb_insert_post_ads' ); function tb_insert_post_ads( $content ) { $ad_code = 'The ad code goes here. Both static ads and Google Adsense.'; if ( is_single() && ! is_admin() ) { // The number in front of the content defines where the code appears. Here, it pops up after the article's second paragraph. return tb_insert_after_paragraph( $ad_code, 2, $content ); } return $content; } // Parent Function that makes the magic happen function tb_insert_after_paragraph( $insertion, $paragraph_id, $content ) { $closing_p = '</p>'; $paragraphs = explode( $closing_p, $content ); foreach ($paragraphs as $index => $paragraph) { if ( trim( $paragraph ) ) { $paragraphs[$index] .= $closing_p; } if ( $paragraph_id == $index + 1 ) { $paragraphs[$index] .= $insertion; } } return implode( '', $paragraphs ); } 17 – Expanding Your User Profile With Further Social Media Accounts

The biographic information in your WordPress profile is pretty thin. You don’t have the option to link all of your social networks. With this code, you can add and display all of your social media accounts.

<?php /** * Managing contact fields for author bio */ $evolution_pro_Contactfields = new evolution_pro_Contactfields( // Missing accounts can easily be added array ( 'Feed', 'Twitter', 'Facebook', 'GooglePlus', 'Flickr', 'Xing', 'Github', 'Instagram', 'LinkedIn', 'Pinterest', 'Vimeo', 'Youtube' ) ); class evolution_pro_Contactfields { public $new_fields , $active_fields , $replace ; /** * @param array $fields New fields: array ('Twitter', 'Facebook') * @param bool $replace Replace default fields? */ public function __construct($fields, $replace = TRUE) { foreach ( $fields as $field ) { $this->new_fields[ mb_strtolower($field, 'utf-8') ] = $field; } $this->replace = (bool) $replace; add_filter('user_contactmethods', array( $this, 'add_fields' ) ); } /** * Changing contact fields * @param $original_fields Original WP fields * @return array */ public function add_fields($original_fields) { if ( $this->replace ) { $this->active_fields = $this->new_fields; return $this->new_fields; } $this->active_fields = array_merge($original_fields, $this->new_fields); return $this->active_fields; } /** * Helper function * @return array The currently active fields. */ public function get_active_fields() { return $this->active_fields; } }

Use the following tag to display the new fields in the theme:

<?php echo get_the_author_meta( 'facebook' ); ?> 18 – Display a Category List With RSS Feeds

Sometimes, being able to display all categories with their respective RSS feed addresses can be handy. It gets even better when you are able to use a WordPress shortcode to display the list anywhere – even in the text widgets.

<?php function tb_categories_with_feed() { $args = array( 'orderby' => 'name', 'feed' => 'RSS', 'echo' => false, 'title_li' => '', ); $string .= '<ul>'; $string .= wp_list_categories($args); $string .= '</ul>'; return $string; } // add shortcode add_shortcode('categories-feed', 'tb_categories_with_feed'); // Add filter to execute shortcodes in text widgets add_filter('widget_text', 'do_shortcode');

The Shortcode:


lets you display the list wherever you want to. It also works within widgets.

You can also use the shortcode in your theme:

<?php echo do_shortcode("[categories-feed]"); ?> 19 – Display Related Posts Without a Plugin

The popular similar posts can easily be displayed without an inflated plugin with “many” functions. You need a PHP snippet, a child theme, and a bit of CSS.

<?php if ( ! function_exists( 'evolution_related_posts' ) ) : function evolution_related_posts() { global $post; if($post) { $post_id = get_the_ID(); } else { $post_id = null; } $orig_post = $post; $categories = get_the_category($post->ID); if ($categories) { $category_ids = array(); foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id; $args=array( 'category__in' => $category_ids, 'post__not_in' => array($post->ID), 'posts_per_page'=> 3, // Number of related posts that will be shown. 'ignore_sticky_posts'=>1 ); $my_query = new wp_query( $args ); if( $my_query->have_posts() ) { echo '<div class="related-wrap">'; echo '<h4 class="entry-related">'; _e('Related Posts','evolution'); echo '</h4>'; echo '<div class="related-posts">'; $c = 0; while( $my_query->have_posts() ) { $my_query->the_post(); $c++; if( $c == 3) { $style = 'third'; $c = 0; } else $style=''; ?> <article class="entry-item <?php echo $style; ?>"> <div class="entry-thumb"> <a href="<?php the_permalink($post->ID); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'evolution-medium' ); ?></a> </div> <div class="content"> <?php if ( ! empty( $categories ) ) { echo '<span class="cat"><i class="icon-folder-open" aria-hidden="true"></i> <a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a></span>'; } ?> <header> <h4 class="entry-title"><a href="<?php the_permalink($post->ID); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4> </header> </div><!-- content --> </article><!-- entry-item --> <?php } echo '</div></div>'; echo '<div class="clear"></div>'; } } $post = $orig_post; wp_reset_postdata(); } endif;

After the code has been copied to the functions.php, a tag had to be added in the single.php, or the template that contains the loop of individual posts.

<?php evolution_related_posts(); ?>

To make sure that the whole thing looks nice, some CSS is required:

.related-posts { display: flex; } .related-posts .entry-title { font-size: 1rem; } .related-posts .cat { color: #ba9e30; font-size: 0.85rem; } .related-posts .entry-item { width: 31%; margin-right: 3.5%; position: relative; float: left; } .related-posts .entry-item.third { margin-right: 0; } .related-posts a img:hover { opacity: .85; } .entry-related { padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 20px } .related-wrap { margin-bottom: 70px; } 20 – Creating a Sitemap.XML Without a Plugin

In combination with the Google Search Console (formerly Webmaster Tools), the sitemap.xml makes for a fast indexation of your website’s posts. Previously, you had to install a plugin in order to generate a sitemap.xml. With this code, you can forgo the plugin.

[blue-box text=”The sitemap is created for your posts, the pages, and the images in the media library.”]

<?php // Copy from here /** * Creating an own sitemap.xml without a plugin * @author Andreas Hecht */ function ah_create_sitemap() { $sitemap_posts = get_posts(array( 'numberposts' => -1, 'orderby' => 'modified', 'post_type' => array('post','page', 'attachment'), // Deine Custom Post Types hier einfügen (z.B. Portfolio) 'order' => 'DESC' )); $sitemap = '<?xml version="1.0" encoding="UTF-8"?>'; $sitemap .= '<urlset xmlns="">'; foreach($sitemap_posts as $post) { setup_postdata($post); $postdate = explode(" ", $post->post_modified); $sitemap .= '<url>'. '<loc>'. get_permalink($post->ID) .'</loc>'. '<lastmod>'. $postdate[0] .'</lastmod>'. '<changefreq>monthly</changefreq>'. '</url>'; } $sitemap .= '</urlset>'; $fp = fopen(ABSPATH . "sitemap.xml", 'w'); fwrite($fp, $sitemap); fclose($fp); } add_action('publish_post', 'ah_create_sitemap'); add_action('publish_page', 'ah_create_sitemap'); 21 – Make Post Images Mandatory

The following snippet could be very useful for blogs with multiple authors, as it makes post images required in order to be able to publish an article.

<?php add_action('save_post', 'evolution_check_thumbnail'); add_action('admin_notices', 'evolution_thumbnail_error'); function evolution_check_thumbnail($post_id) { // change to any custom post type if(get_post_type($post_id) != 'post') return; if ( !has_post_thumbnail( $post_id ) ) { // set a transient to show the users an admin message set_transient( "has_post_thumbnail", "no" ); // unhook this function so it doesn't loop infinitely remove_action('save_post', 'evolution_check_thumbnail'); // update the post set it to draft wp_update_post(array('ID' => $post_id, 'post_status' => 'draft')); add_action('save_post', 'evolution_check_thumbnail'); } else { delete_transient( "has_post_thumbnail" ); } } function evolution_thumbnail_error() { // check if the transient is set, and display the error message if ( get_transient( "has_post_thumbnail" ) == "no" ) { echo "<div id='message' class='error'><p><strong>You have to assign a post image. Without a post image, the article can't be published.</strong></p></div>"; delete_transient( "has_post_thumbnail" ); } } 22 – Automatically Link Twitter Accounts

If you tend to link Twitter accounts in your posts, you’ll love this snippet. When entering @account, it will automatically link the according Twitter account.

<?php function content_twitter_mention($content) { return preg_replace('/([^a-zA-Z0-9-_&])@([0-9a-zA-Z_]+)/', "$1<a href=\"$2\" target=\"_blank\" rel=\"nofollow\">@$2</a>", $content); } add_filter('the_content', 'content_twitter_mention'); add_filter('comment_text', 'content_twitter_mention'); 23 – Prevent Automatic Linking in User Comments

Every URL entered in the comments is automatically turned into a link by WordPress. This can become a problem, as not all of those links are worth being linked on your blog. The following snippet turns the URLs into pure text.

<?php remove_filter('comment_text', 'make_clickable', 9); 24 – Load the Entire JavaScript in the Footer

WordPress normally loads the JavaScript into the header of your website. This slows down the page buildup by a lot. With this code, the entire JavaScript is loaded in the footer, allowing the site to build up faster.

<?php /** * @uses wp_head() and wp_enqueue_scripts() * */ if ( !function_exists( 'evolution_footer_scripts' ) ) { function evolution_footer_scripts() { remove_action('wp_head', 'wp_print_scripts'); remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); } } add_action( 'wp_enqueue_scripts', 'evolution_footer_scripts' ); 25 – Create a Breadcrumb Navigation Without a Plugin

You don’t need an overloaded plugin for a breadcrumb navigation. A few lines of code are all it takes.

<?php // Copy from here function ah_the_breadcrumb() { echo '<ul id="crumbs">'; if (!is_home()) { echo '<li><a href="'; echo get_option('home'); echo '">'; echo 'Home'; echo "</a></li>"; if (is_category() || is_single()) { echo '<li>'; the_category(' </li><li> '); if (is_single()) { echo "</li><li>"; the_title(); echo '</li>'; } } elseif (is_page()) { echo '<li>'; echo the_title(); echo '</li>'; } } elseif (is_tag()) {single_tag_title();} elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';} elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';} elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';} elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';} elseif (is_search()) {echo"<li>Search Results"; echo'</li>';} echo '</ul>'; } The Tag For the Invocation in the Theme

In the theme, the navigation can be integrated using a simple function invocation. The right files to do that would be the header.php, the index.php, or the single.php, depending on the theme.

<?php ah_the_breadcrumb(); ?> 26 – Display Custom Post Types in the Categories and Tags

Custom Post Types are an extremely useful tool for the design of an extensive website with many functions. However, they are not automatically included in the categories and tags. If you start a search, this will always leave you with an error. These two snippets integrate your custom post types into the WordPress search function.

The Snippet for the Categories:

<?php /** * Results in the display of the custom post types in the categories * @author Andreas Hecht */ function evolution_query_post_type($query) { if( is_category() ) { $post_type = get_query_var('post_type'); if($post_type) $post_type = $post_type; else // Adding your post types $post_type = array('nav_menu_item', 'post', 'posttype', 'posttype'); // don't forget nav_menu_item to allow menus to work! $query->set('post_type',$post_type); return $query; } } add_filter('pre_get_posts', 'evolution_query_post_type');

The Snippet for the Tags:

<?php /** * Results in the display of the custom post types in the tags * @author Andreas Hecht */ function evolution_tag_query_post_type($query) { if( is_tag() ) { $post_type = get_query_var('post_type'); if($post_type) $post_type = $post_type; else // Adding your post types $post_type = array('nav_menu_item', 'post', 'posttype', 'posttype'); // don't forget nav_menu_item to allow menus to work! $query->set('post_type',$post_type); return $query; } } add_filter('pre_get_posts', 'evolution_tag_query_post_type'); Conclusion

I hope you discovered some useful snippets for you and your WordPress. If this article ends up being successful, I might follow up with an article on the most useful WooCommerce snippets. Let me know whether that interests you.

Catégories: News dév web


Une question, une remarque ?
Une demande de devis ?


A propos...

Yves Bresson, ingénieur en informatique, consultant freelance, spécialisé dans le développement web (CMS, PHP, Laravel, Ajax, jQuery, Bootstrap, HTML5, CSS3) et d'applications mobiles (iPhone, Android). Voir le profil de Yves Bresson sur LinkedIn