Noupe.com

S'abonner à flux Noupe.com Noupe.com
THE magazine for webworkers and site owners
Mis à jour : il y a 50 min 3 sec

2016 Revisited: The 100 Best Free Icon Packs of the Year

27 janvier, 2017 - 10:00

There is no point in eulogizing and promoting icons since everyone knows that these tiny, in majority cases increasingly plain and simplified pictograms are simply indispensable when it comes to creating web or app interfaces. Can you imagine tab bar navigation without a set of vigilantly crafted well matched compact icons? Or e-commerce theme without a small trolley carriage in the upper right corner? I very much doubt it. These tiny visual cues that unobtrusively portray operations and enhance the site or application, making it friendly and intuitive to us, are just everywhere. So we just could not ignore and bypass them.

If you are currently in search of some icons for your project or artwork then we invite you to take a look at a ton of icons that were released for free during the last year. Some of them are elegant and subtle thanks to the vigilant line style realization; while others are bold, solid and visually heavy thanks to the outstanding flat or vector realization. Some of them are primitive; others are complex and intricate. Our collection covers icons from various categories. Here you will find a perfect pair for a sport, medicine, food, or corporate themed website, personal portfolio or e-store. Actually, there is lots of interesting hidden inside. Examine our compilation to find out more.

The Iconify Collection of 650+ Icons


Creator: VectorIcons
License: Free for personal and commercial use.

Free UI and E–commerce thin line icons


Creator: Rajesh Kumar
License: Declared as Free, no proper license given.

Special Free Pack of Interface Icons


Creator: Darius Dan
License: Free for personal and commercial use.

200 Free Icons


Creator: Jack Wassiliauskas
License: Attribution-NonCommercial-NoDerivatives.

1000+ Free blobs flat icons with two styles


Creator: Baianat ­
License: Attribution-NonCommercial-NoDerivatives.

Color Line Icons


Creator: iconshock
License: Personal use.

Filled Activities Freebie


Creator: Darius Dan
License: License Agreement.

5000 Free File Type / Extension Icons


Creator: onedollargraphics
License: Free for personal and commercial use.

400 Assorted Icons


Creator: Smashicons.com
License: Declared as Free, no proper license given.

Krispicons Flat Modern Icons – Free PSD


Creator: Nitish Kumar
License: Declared as Free, no proper license given.

Set Of Material design avatars 


Creator: Oxygenna
License: Declared as Free, no proper license given.

Filling Icons


Creator: Max Kalik
License: Creative Commons.

Individual Version


Creator: Max Kalik
License: Creative Commons.

Users Icons Free PSD


Creator: Anas Ali
License: Declared as Free, no proper license given.

Sweets Pack


Creator: Paula Jenda
License: Declared as Free, no proper license given.

UI icon pack


Creator: Pau Frischke
License: Free for personal and commercial use.

Trending Icon Bundle


Creator: Designer Yash
License: Declared as Free, no proper license given.

Icalicons


Creator: Noe Araujo
License: Declared as Free, no proper license given.

60+ Travel Color Icons


Creator: Icons8
License: Free for personal and commercial use..

Free Technology Icons


Creator: James George
License: Declared as Free, no proper license given.

8bit Remix – character-Set


Creator: Gregory Gasser
License: Declared as Free, no proper license given.

Jordan Icons Dribbbleshot


Creator: Fernando Gonzalez
License: Declared as Free, no proper license given.

UI Icons Free pack – for Sketch in vector shapes


Creator: Marco Lopes
License: Declared as Free, no proper license given.

Supermarket Icons


Creator: The Eyecons
License: Declared as Free, no proper license given.

Cyber Security Icons – Part 2


Creator: The Eyecons
License: Declared as Free, no proper license given.

25 Free Icons


Creator: The Eyecons
License: Declared as Free, no proper license given.

SEO Icon Set – Elegant Style


Creator: GraphicBoat
License: Declared as Free, no proper license given.

Space Icon Set


Creator: Elena de Pomar
License: Declared as Free, no proper license given.

Aurora Icon Pack


Creator: Samuele Bandini
License: Attribution.

Free Food Icons


Creator: Ahmed Hassan
License: Declared as Free, no proper license given.

Landmark Icons


Creator: Wassim
License: Declared as Free, no proper license given.

Birthday Cake Icons


Creator: designer bundle
License: Declared as Free, no proper license given.

100 Free Social Media Icons


Creator: uiconstock
License: Declared as Free, no proper license given.

50 Company Icons


Creator: Yunjung Seo
License: Attribution-NonCommercial-NoDerivatives.

70 Free All Purpose Line Icons


Creator: Paolo Ertreo
License: Declared as Free, no proper license given.

54 Business Icons


Creator: graphic google
License: Free to use personally and commercially, but link-back is compulsory.

Cargo Icon Set


Creator: Rena Xiao
License: Declared as Free, no proper license given.

Free Basic UI Icon Set


Creator: Angela Angelini
License: Free for commercial and personal works.

Camping – Free Icon Set


Creator: Yana Bereziner
License: Attribution-NonCommercial.

25 Bicycle Line Vector Icons


Creator: graphicpear
License: Personal use.

London Icons – Cityset


Creator: Bryn Taylor
License: Declared as Free, no proper license given.

48 Free Linear Icons


Creator: Honcharov Maxim
License: Declared as Free, no proper license given.

Simple Line Icon Set Vector PSD


Creator: TushiT
License: Declared as Free, no proper license given.

Free Flat Line Fashion Icons Pack


Creator: Rafi
License: Free for personal and commercial use.

60 Free Icons


Creator: Vincent Le Moign
License: Declared as Free, no proper license given.

Free Icons


Creator: Tetiana Donska
License: Free for commercial and personal use.

Davi Icons


Creator: Vlad Cristea
License: Free for personal and commercial use.

Hexagon Icon Set


Creator: Bulent Keles
License: Declared as Free, no proper license given.

Camping Line Icons Set2 


Creator: memed nur
License: Free for commercial and personal use.

Strategy Icons Set


Creator: Peecheey
License: Free for personal and commercial use.

30 e-Commerce Flat Icons


Creator: Graphiqa Stock
License: Declared as Free, no proper license given.

Online Business And Finance Icons Free PSD


Creator: PSD Freebies
License: Declared as Free, no proper license given.

Futuristic Space and Astronomy Flat Line Icon Set


Creator: ecomm.design
License: Free for personal and commercial use.

The Web Interface Icon Set (70 Icons, SVG & PNG)


Creator: Freepik.com
License: Free for personal and commercial use.

100 Colored Food & Drink Icons


Creator: Icons8.com
License: Free for personal and commercial use.

The Flat & Stroke eCommerce Icon Set


Creator: Freepik
License: Free for personal and commercial use.

LineKing Icons


Creator: Pixel Bazaar
License: Free for personal and commercial use.

160 Icons


Creator: VectorIcons
License: Free for personal and commercial use.

Cartoon Characters vol.


Creator: Netguru
License: Declared as Free, no proper license given.

Flat Line UX And E-Commerce Icon Sets


Creator: Ecommerce Website Design
License: Creative Commons Attribution 3.0 Unported l.

Summer Icon Set


Creator: Printerinks.com
License: Creative Commons Attribution 3.0 Unported.

Months And Seasons Set


Creator: GraphicMama
License: Creative Commons Attribution 3.0 Unported.

Essential Free Icons


Creator: Igor Babariko
License: Free for personal and commercial use.

50 Free Icofactory Line Icons


Creator: iconfactory
License: Free for personal and commercial use.

Social Icons – Free PSD


Creator: Sohail Shahid
License: Declared as Free, no proper license given.

Free Construction Icons


Creator: graphic google
License: Free to use personally and commercially, but link-back is compulsory.

Camcons


Creator: geticonjar
License: Declared as Free, no proper license given.

440 BigMug Icons


Creator: Catalin Fertu
License: Declared as Free, no proper license given.

132 Line Icons


Creator: doonnn
License: Declared as Free, no proper license given.

60 Free iOS icons – Space


Creator: PixelLove
License: Declared as Free, no proper license given.

Free flags of all the countries in the world


Creator: Daftcode
License: Declared as Free, no proper license given.

Luminance, A Black Pixel Icon Set


Creator:  Black Pixel
License: Declared as Free, no proper license given.

Free Ecommerce Icon Pack + PSD / AI Freebie


Creator: Intuz
License: CC0.

20 Halloween Flat Icons 


Creator: Ramy Wafaa
License: Declared as Free, no proper license given.

Virtual Reality Icons


Creator: Manuela Langella
License: Free for personal and commercial use.

Diwali


Creator: Iconscout
License: Iconscout Basic license.

Kitchen Tools & Appliances Icons


Creator: Brook Wells
License: Free for personal and commercial use.

Yoga Icons


Creator: Juan Sarmiento
License: Free for personal and commercial use.

Houses & Buildings Icons (AI, PDF, SVG, PNG)


Creator: Manuela Langella
License: Free for personal and commercial use.

25 Line Contact Icons Vector Format


Creator: graphicpear
License: Declared as Free, no proper license given.

Color Vector Characters


Creator: Vincent Le Moign
License: Free for personal and commercial use.

Medical Icons Set


Creator: Roll’n’Code
License: Declared as Free, no proper license given.

130 Icons


Creator: Han Wang
License: Declared as Free, no proper license given.

Marine Icon Set


Creator: Florent Lenormand
License: Declared as Free, no proper license given.

Beauty and Spa Icons


Creator: graphicpear
License: Declared as Free, no proper license given.

Line icon set random stuff 


Creator: MajorYom
License: Declared as Free, no proper license given.

Free icons Set


Creator: José Polanco
License: Declared as Free, no proper license given.

Docto Icons


Creator: Doctolib
License: Declared as Free, no proper license given.

Few Basic Icons


Creator: Laura Reen
License: Creative Commons (Attribution 3.0 Unported).

100 Pixelicons Free Pack


Creator: pixelicons
License: Declared as Free, no proper license given.

Charticons


Creator: Rudd Fawcett
License: Creative Commons Attribution 4.0 International License.

Ecology Green Line Icons


Creator: Peecheey
License: Free for personal and commercial use.

Spanish Language Free icons


Creator: icons8
License: Declared as Free, no proper license given.

Work Icon Set


Creator: Agung Krisna Wijaya
License: Declared as Free, no proper license given.

BIGU – Icon Set


Creator: Damien LEGENDRE
License: Free to personal and commercial use.

50 Free Icons


Creator: Cort McGinty
License: Declared as Free, no proper license given.

New Year’s Free Mascots 


Creator: Yulya
License: Declared as Free, no proper license given.

Christmas Stickers


Creator: Kara Sotskaya
License: Free for personal and commercial use.

Circus Icon Set


Creator: NamLy
License: Declared as Free, no proper license given.

Free Icon Set


Creator: Robert Karnovski
License: Free for personal and commercial use.

Catégories: News dév web

All You Need to Know About WordPress Child Themes

26 janvier, 2017 - 10:00

WordPress attracts tons of bloggers that want to handle things on their own. You gain full control, and there is nothing that you couldn’t adjust with a few lines of PHP, CSS, or HTML. On top of that, there are hundreds of small functions regarding the extension of the CMS available on the web. The world of WordPress could be so beautiful if it weren’t for the theme updates. With child themes, these become a lot less scary.

Do you know this problem? You install a theme, adjust it to meet your desires, and you’re satisfied and happy. But then, the next theme update comes around, and all of your changes are gone.

To prevent this from happening to you, this article will teach you how to create and use a child theme.

What’s a Child Theme and What do I Need it For?

Basically, a child theme is the child of a full-fledged, regular theme. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScripts – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.

All Changes Remain, Even After an Update

A fresh set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. Here, 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 teach you all the few pitfalls that can come up.

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, good HTML editors. Thus, we have compiled a list with 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 an 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: http://yourdomain.com 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 in order 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 within the main index, not into 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 displayed well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended. I have created the following preview image for the child theme:

Feel free to download and use it.

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 very easy 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: Andreas Hecht Author URI: http://techbrain.de Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes Below */ body { color: #666; background: #444; } h1.site-title { font-size: 38px; } h1.site-title 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, simply copy it from the parent theme into your child. Now you are able to either change the entire display, or add certain 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: Andreas Hecht Author URI: http://techbrain.de Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Alle Deine Änderungen fuegst Du unterhalb ein */ body { color: #666; background: #444; } h1.site-title { font-size: 38px; } h1.site-title 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="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?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="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&amp;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="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;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="https://www.facebook.com/TechBrain-552504691587032" target="_blank" rel="nofollow" title="Meine Facebook-Seite Liken"><span>Like</span></a> <a class="druck social-tooltip" href="javascript:window.print()" title="Beitrag ausdrucken">Drucken</a> </div> </div> <?php } function tb_fontawesome() { ?> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" 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 ============================================================================= */ div.share-buttons.top {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.druck, .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.druck { margin-right: 0;} a.druck{background:#13475e;} a.druck: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>', ) ); ?> <!-- Die statischen Share-Buttons. Anzeige nur auf single.php --> <?php if ( is_single() ) : ?> <?php echo tb_share_buttons(); ?> <?php endif; ?> <!-- Ende statische 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( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a> </div><!-- .site-info --> </footer><!-- .site-footer --> </div><!-- .site --> <?php wp_footer(); ?> </body> </html>

The Final Result:

Our Additional Widget Area in the Footer.

Child Theme Download

You can download the child theme for Twenty Fifteen that we just created.

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 modifed 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 out get_template_directory() for get_stylesheet_directory(). Further information above.
  7. Now for the part that really 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 an own style.css file. After that, place it into the child theme folder equipped with all modifications.
  8. When you feel like 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 shit again:-)
Conclusion

Now, you’ve gotten to know pretty much all important aspects of creating a child theme, and you also know why you should always use one. As always, you’ll have to look up all other difficulties you may face on Google. Sadly, it’s practically impossible to cover everything in one article, as there are so many problems that can come up during the development of a child theme.

Catégories: News dév web

Survival Strategies for Small Agencies

25 janvier, 2017 - 10:00

Small agencies are jacks of all trades, but masters of none. Usually, there is no specialization, because it’s just not worth it. Are these statements even true, and if they are, how do these generalists survive?

The question of survival as a small, or the smallest, agency is asked on multiple levels. In a beautiful infographic, Laura Müller and Luis Masallera deal with the human, and social aspects of this question. I definitely don’t want to withhold it from you:

(Infographic created by Laura Müller and Luis F. Masallera, published on Medium, The Agency)

The recommendations are the following:

  • Fight for a proper fee, but stay realistic.
  • Work hard, but also do some small talk.
  • Be friendly, but don’t crawl up anyone’s ass.
  • Take off the blinkers so that you can recognize miracles.
  • Don’t forget to go home.
  • Stand by your mistakes.
  • Keep yourself healthy.
  • Ask for help.
  • Learn to say “no.”
  • Take time for your passion.

I assume that no freelancer would disagree with this advice. We could probably call it a core set of advice for a balanced life as a freelancer. Now, if two or more of these freelancers got together, and founded an agency with this mindset, we wouldn’t have to worry about the sanitary basics, neither in physical nor in psychological aspects.

Fast Times, Fast Agencies: The Advantage of “Small.”

Now, it’s time to take care of the business components of small agencies. Those remaining from the nineties, like me, know that we had to keep on learning new things to survive in the business of the web, and graphic design. However, with decent effort, this was still doable back then.

Nobody’s Got a Head Like a Library. (Photo: Pixabay.com)

Today, unifying the entire knowledge on everything related to web development, and other design-related topics in one person is simply impossible. Thus, it seems logical for an agency to take care of certain areas only, meaning to specialize itself. But in reality, there are only a few large agencies. Because of that, the path in this direction will probably block itself, even if you wanted to take it.

In my opinion, this shouldn’t be your goal either way, since large agencies are barely any different from other large businesses. You’ll always have that one guy sitting there, ruining your day. It might seem cool when you see the relaxation areas, and football table rooms of modern agencies, and other digitally working businesses. But the truth is, that even these companies also put on their trousers one leg at a time. All of these conveniences have to be earned, nobody else puts money into that. And who makes the money? Right. You, the employee. So don’t be jealous of those that have to put some of their earnings into free latte macchiato or squash arenas.

I would never join a large agency. I’m way too particular, and I have never liked Management by Champignon. My customer care is much more direct, much more personal, and adjusted much more accurately to their needs than it could ever be at any large agency.

Take a look for yourself to see, what happens with big business that is too sluggish to change quickly. Just take Blackberry, Nokia, or Kodak. Former market leaders are shadows of their former selves. Why is that? For one, companies with increasing size become increasingly sluggish, preventing them from acting fast where it’s needed. But a certain size also always comes with some kind of institutional conceit. The human factor becomes relevant. Intrigues are schemed, battles for power are fought. The customer is pushed into the background and turns into a number in the sales statistics.

Could You Work Like That? I Couldn’t. (Photo: Pixabay.com)

The smaller the business, the more flexible, the faster it is. These days, speed is an undisputed advantage over the competition. Inflated structures remove the actual service from the client. Take the German Telekom for example. If you have a technical problem, try to get through to a real expert that will fix your problem in the end.

Of course, the state of “too small” is also a thing. When approaching a customer that needs an entire website, telling them that you can only deliver the pixels, but not the code, won’t get you anywhere either. You have to be able to come up with a defined project size from one hand.

There are two ways to do that. You either build up a cooperation network with people whose abilities you know, who you trust, and that wouldn’t rip you off. When it works, this is the best variant. Unfortunately, the human factor broaches way too often, destroying such loose structures faster than they were built.

A Good Team? (Photo: Pixabay.com)

The second option is founding a small agency. You define your target group and make a qualified assessment of its size. Then, you look at which project dimensions typically occur, and divide them into their components. Here, you’ll find out what percentages of pixels, CSS, JavaScript, CMS, and so forth have to be provided.

Once done, it’s rather easy to calculate a number of people. You need x frontend developers, x designers, x backend developers, x SEO strategists, and x others. Writing the business plan can be done pretty quickly after that. Your small agency eliminates the risks of loose cooperation networks but comes with a turnover risk that is not insignificant.

How to Position Your Small Agency

Let’s assume you already own a small agency, and you are generally aware of the advantages. However, large agencies give you a tough time, since their money doesn’t grow on trees anymore, making them step down to small, and midsize customers. Some even undercut your prices, just to pay for their juggernaut of employees. I like to call this money exchange. But for you, this is life-threatening. No theoretical advantages regarding agility or flexibility can help you here. You need something more tangible. You have to communicate.

Please Choose a Type of Communication With Less Divergence Loss. (Graphic: Pixabay,.com)

This is How You Could Approach Customers:

Define Your Target Group

If you have specialized in a certain branch, you have to communicate clearly to this target group. Don’t leave any doubts that, with you and your agency, the person you approached is in the best possible hands. Especially in web design, there are tons of examples of former pastry chefs that now create websites for the craft of baking, or the medical technological assistant bringing doctors into the web of webs.

Set Yourself Apart From Large Agencies

Make clear that the customer will get a counterpart that supervises the entire project, instead of the client being handed from department to department. Highlight your flexibility, and the ability to stay responsive even during the work on the project. Make sure your customer knows that your pool of experts from different disciplines always takes part in every project, allowing for the most innovative solutions to be made up.

It’s not prohibited to hand over the savings from not having to pay for a feel-good manager, a private gym, and a free employee canteen, to your customer, and mention it.

Highlight the Customer Proximity

Big agencies are in big cities, so are big customers. What you want are the small and medium-sized enterprises that can be anywhere. I once randomly found a company with 400 workers in a secluded forest in the middle of nowhere.

Proper supervision is important to these customers. This is possible if you are close to them, and not have to travel all the way from a large city. Another advantage is that you know the region if this were to be a factor in marketing. The aspect that you can drive over to the customer is huge. Don’t underestimate the psychological effects of good client supervision.

Of course, it’s tempting when the internet allows you to work for any customer in the world, no matter where he is. But it’s a fact that people don’t work like that. Humans do business with humans. Don’t waste your time casting your net so far that you won’t catch anything in the wide meshes in the end.

Focus on Quality

This sounds profane, doesn’t it? However, when I look at what some large companies produce, I can only shake my head. Quality does not seem to be a factor there. I can actually understand this.

Here, Added Value is Still Made Manually. (Photo: Pixabay.com)

In the large agencies that I know, the commission is done once it has been placed. What’s that supposed to mean? Well, there is a lot more attention on the acquisition. In at least weekly meetings, the leads are being talked about, and the liquidity is being complained about. Once the commission has been placed, the customer becomes a part of the turnover list, and, tragically, his commission has to be completed on top of that. Shoot, but hurry up. So that we don’t have to put too much money into it.

You should do this very differently, with the old manufacture concept in mind. In the end, the result will be the best one possible. Your focus is not on the placement of the commission, but on its completion.

These are my tips from 25 years of experience in a fast-paced branch. What do you think about the topic? Are you a freelancer, or an employee of a small, or large agency?

Catégories: News dév web

5 Best Places To Find Deals For Designers and Bloggers

24 janvier, 2017 - 11:23

If you’re like most people, you’re probably too careful when spending money online on digital products. Instead of buying assets from popular online marketplaces, you spend a lot of time looking for free alternatives and taking risks downloading pirated content.

Well, there’s no shame in that. You work hard to earn your money and you should always be careful when spending that money. Although, unfortunately, those free stuff you download online are often very poor in quality and they’ve already been used by thousands of other people so your designs always end up looking like someone else’s creation.

When doing professional work, you shouldn’t cheap out. Because the quality of your work heavily reflects on your reputation. And for designers, reputation is everything.

But, that doesn’t mean you have to buy expensive design assets or pay full price either. There are plenty of great sites you can explore to find great discounts and deals to grab your favorite mockups, fonts, graphics, web hosting, themes, and many other online services.

In this article, we’ll share with you some of our favorite Deals sites designers and bloggers can use to find special coupons and discounts.  

Design Bombs

Design Bombs is a blog that shares useful guides, tips, and tutorials for both professional designers and bloggers. The site has a special Deals section that includes many different types of deals and coupons that help designers and bloggers save a lot of money. The coupons on this site range from 20% to 60% of savings when buying web hosting, themes, graphics, illustrations, icons, and more.

In addition, Design Bombs also has a section for Freebies, lots of articles dedicated to designers, and beginner guides such as how to choose the right WordPress hosting and How to start a WordPress blog. Whether you’re a blogger looking to use unique graphics to include on your blog posts or a graphic designer looking for fresh graphics for your next project, this site got deals for all.

Mighty Deals

This is yet another popular site for finding deals on many different types of content, such as fonts, textures, brushes, online courses, design elements, and much more. The site includes deals starting at $10 and above. And there’s also a Free Deals section on the site where you can download mockups, fonts, and icon packs for free.

The site also has deals for web designers and bloggers as well. The deals on this site will help you save 50% to 90% when buying design assets.

WPKube

WPKube covers all things related to WordPress and blogging. This blog is filled with tutorials, how-to guides, tips, and tricks on how to make the most of WordPress platform and building blogs. If you’re new to WordPress, WPKube is a blog you must follow.

The Coupons and Deals section of the website also includes lots of deals for buying WordPress themes, plugins, web hosting, and other services at incredible discounted rates. The WPKube deals for WordPress plugins and themes will come in handy when building your next blog or even upgrading the existing website.

In addition to deals, they also have some in-depth guides such as What is Managed WordPress Hosting, How to install WordPress, and more.

Design Cuts

Design Cuts is a curated marketplace full of deals for designers. There are deals on this site for unique typefaces, card designs, graphics, backgrounds, brushes, and so much more. The deals on Design Cuts will allow you to save up to 99% when buying various content for your projects.

The learn section on Design Cuts features lots of free tutorials and tips on design, like installing fonts, downloading resources, and more. There’s also a Freebie section as well.

Ecommerce Booth

Building an eCommerce website is not easy, especially when you have to worry about making the site look perfect in every way, setting up payments, and offer a great user experience to the customers. The Ecommerce Booth is a great blog you should follow if you’re thinking about starting an eCommerce business.

The Deals section of the blog also includes several great deals for saving money when buying web hosting for your eCommerce website and using website builders like Squarespace to create landing pages or easily build an online shop without any experience in web development.

Wrapping Up

All the deals sites in this list are often updated with new deals and coupons. Remember to bookmark them to come back later so that you’ll never miss a great deal ever again.

Next time when you’re in the market looking for new stuff for a design project or for building a new blog, don’t go buy stuff directly, use a coupon and save some money! It’s not being cheap, it’s how smart folks spend their money.

Catégories: News dév web

Theme Juice: This Tool Lets You Create Local WordPress Sites Quickly

24 janvier, 2017 - 10:00

The fewest designers use Github or similar platforms but develop locally. For that, there are some proven solutions, but the new Mac App Theme Juice makes all of it easier.

Theme Juice Landing Page (Screenshot: Noupe) Theme Juice Creates Local WordPress Installations

Theme Juice is a software that makes the creation, and operation of local WordPress installations very easy. By concept, Theme Juice is not even limited to WordPress, but overall, the feature set is adjusted to this type of sites. However, you can also use it to run Magento or Drupal, for example.

At the moment, Theme Juice is only available for Mac users. Versions for Windows and Linux have already been announced, and are supposed to be released “soon.” Theme Juice can be tried out for free for 30 days. After that, it costs 6 dollars a month, or 49 dollars a year. Of course, the price includes all updates, as well as a quick support.

Theme Juice is a wrapper for established technologies, like Vagrant, XCode Command Line Tools, and VirtualBox. After the installation, you’ll be notified that these additional components are required for a smooth functionality.

Theme Juice: a Virtual Machine is Created. (Screenshot: Noupe)

The LAMP stack at the basis of the WordPress installation was handwritten, and of course, there are alternatives that work outside of a paid program.

What makes Theme Juice worth considering is the fact that the software does not only install an executable Apache environment on your Mac but even places this environment within a virtual machine. This way, the functionality of your projects is not dependent on the existence of your particular system configuration. Instead, Theme Juice installations run on every AMP stack. If you can’t decipher the abbreviation: A is for Apache, M for MySQL, and P for PHP. For the first letter, you’ll often find the M for macOS, or the L for Linux.

Theme Juice: the Project is Being Configured. (Screenshot: Theme Juice)

Here, Theme Juice doesn’t just install a universal virtual machine. You can determine exactly which start configuration you want to work with. This allows you to start every new project with a default structure when it comes to plugins, themes, and so on. Of course, there are other solutions for that already as well. Here at Noupe, we’ve already presented a good one called WP-Staging. However, this solution also requires an already installed WordPress site.

Theme Juice is an all-in-one solution. In the beginning, all you have is a running OS. Then, you install Theme Juice and its dependencies. Now, you create a project and have Theme Juice generate a respective virtual machine. Next, you install WordPress. Done. Without Theme Juice, this would’ve taken a lot more time, and knowledge. Thus, the tool definitely has its right to exist. As we all know, time is money, so using Theme Juice lets you save a lot more than it costs you every month.

Theme Juice: Project Dashboard (Screenshot: Theme Juice)

Once it’s running, you can keep managing your projects via the intuitive Theme Juice Dashboard. This way, the tool warrants the connection between development site and productive installation. Databases, for example, are migrated with a simple click. The deployment is done via SSH. Not insignificant either: all projects in the development area run with an SSL encryption by default.

Theme Juice: Not Free, But Inexpensive

In the end, the only downer is the fact that Theme Juice is not free. However, it’s just a small one, as 49 dollars a year, or six dollars a month (for those with commitment phobia), won’t make you poor. I already mentioned that just a few projects are enough for the saved time to exceed the input cost.

On top of that, Theme Juice doesn’t quit its service once the subscription ends. You just won’t receive any more updates, and no support, bur you’re free to keep using the software for as long as you want. By the way, your license is platform independent. So, if you’re working with Mac, Windows, and Linux, your license won’t prevent you from doing that. However, this will only be relevant once the app is available for Windows and Linux.

Take a look for yourself. But keep in mind that you have to lodge a valid method of payment at the beginning of the test phase. I don’t like this type of approach in general. If you’re convinced of your product, you don’t need mantraps like that. Maybe the makers of Theme Juice will come to their senses in this regard…

Catégories: News dév web

Pages

Contact

Une question, une remarque ?
Une demande de devis ?

Contactez-moi

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