EZ Info

Welcome Guest

Search:

EZ Info » Internet » Wordpress » Moesia Wordpress Theme - Change Service Icons to Images

Moesia Wordpress Theme - Change Service Icons to Images

View PDF | Print View
by: John
Total views: 279
Word Count: 1216
Date: Sat, 28 Nov 2015 Time: 5:00 PM

How to change Service icons to images in Moesia Wordpress Theme

Before I start I have to say what a brilliant Wordpress Theme this is - Moesia Wordpress Theme.

As you have probably arrived at this page looking to change the service icons to images you'll more than likely have the theme, but if you are just messing around with it and haven't decided on using it yet then I would definately recommend it. It's the only theme you will ever need! If you are a developer, then you couldn't go far wrong with any of the themes produced by ATHEMES, they are all top notch and you can get the lot plus support for less than 100 bucks or £65 if in the UK. They're real easy to manipulate should you need that little bit of something different (as I will show you) or they work perfectly as is, with very fluid, professional and responsive designs.

Check the Moesia Wordpress theme out here if you haven't got a theme by ATHEMES.

Right lets get on with the matter at hand here and change those Moesia Wordpress Theme Icons to Images.

1. Open up your Wordpress Admin and go to Types > Custom Fields and click the 'Service Icon' link at the bottom (see pic below).
Replacing icons with images in Moesia Wordpress Theme

2. Once in the Service Icon section you'll see a box called 'Available Fields' with lots of different buttons in it. Click the 'Image' button. This will create a new field to the left called: Untitled - Image field.
Replacing icons with images in Moesia Wordpress Theme

Here's a pic of the Untitled - Image field and what button to click:

Replacing icons with images in Moesia Wordpress Theme

3. Fill in the details as follows:
Title: Service Image, Slug: service-image, description: service image - then scroll down and click 'Save'.

4. Drag (using the blue cross) the newly created Service Image field to the top (see pic below) and Save.

Replacing icons with images in Moesia Wordpress Theme

5. Click Services in left column and open them. The default will show around 8 services if you imported them from
the Moesia documentation page. I only need 4 and have already re-named a couple of them (see pic below).

Replacing icons with images in Moesia Wordpress Theme

6. Once you're in the Services section (above pic), click anyone of your service links for example service six.
Scroll to the bottom of the page and under the 'Service Icon' section you will see you have added a field for service image (see pic below).

Replacing icons with images in Moesia Wordpress Theme

7. Click the 'Select Image' button and choose an image from your media files. I chose one around 130 x 130 pixels
but you could have one smaller or bigger. I wouldn't go below 70x70 pixels or above 150x150 pixels but
this is just my personal choice.

PLEASE NOTE: IF YOU WOULD LIKE TO USE CIRCULAR IMAGES - THEN BEFORE COMPLETING STEP 7 ABOVE I RECOMMEND USING:
http://www122.lunapic.com/editor/ WHICH IS AN EASY TO USE FREE ONLINE IMAGE EDITOR AND REALLY SIMPLE!

8. Once you have chosen an image you will now need to add a little bit of code to the Moesia php files;
PLEASE NOTE IT IS RECOMMENDED TO USE A CHILD THEME CREATOR AND ALTER THE CODE THERE, OTHERWISE IT WILL REVERT
BACK TO THE ORIGINAL CODE ON ANY THEME UPDATE.

9. In Wordpress admin area go to Appearance > Editor and choose the 'Services Page Template' from the righ-hand column.
(page_services.php)
Add this line of code just above the code for the icon:

<?php $image = get_post_meta( get_the_ID(), 'wpcf-service-image', true ); ?>

It should look something like this...

<?php while ( $services->have_posts() ) : $services->the_post(); ?>
<?php $image = get_post_meta( get_the_ID(), 'wpcf-service-image', true ); ?> // This is the code added
<?php $icon = get_post_meta( get_the_ID(), 'wpcf-service-icon', true ); ?>
<?php $link = get_post_meta( get_the_ID(), 'wpcf-service-link', true ); ?>
<div class="service col-md-4 col-sm-6 col-xs-6">

10. Now scroll down a bit further and add this...

<?php if ($image != '') : ?>
<img class="service-icon wow zoomInDown" src="<?php echo esc_url($image); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>

Add the above code just below:
<div class="service col-md-4 col-sm-6 col-xs-6">
and just above:
<?php if ($icon) : ?>
<span class="service-icon wow zoomInDown"><?php echo '<i class="fa ' . esc_html($icon) . '"></i>'; ?></span>

SEE PIC 5 BELOW IF YOU ARE STILL UNSURE!!!

Click 'Update File' or Save it in your child theme.
Replacing icons with images in Moesia Wordpress Theme

11. Next we need to go to the fp-services.php file in the right-hand column, open it and do something similiar.

Should look like this...

<?php $image = get_post_meta( get_the_ID(), 'wpcf-service-image', true ); ?>
<?php $icon = get_post_meta( get_the_ID(), 'wpcf-service-icon', true ); ?>
<?php $link = get_post_meta( get_the_ID(), 'wpcf-service-link', true ); ?>
<div class="service col-md-4 col-sm-6 col-xs-6">

<?php if ($image != '') : ?>
<img class="service-icon wow zoomInDown" src="<?php echo esc_url($image); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>

SEE PIC BELOW FOR FURTHER CLARIFICATION!!!

Replacing icons with images in Moesia Wordpress Theme

Now save it or update file and have a look! Viola!!
PLEASE NOTE: FOR TESTING PURPOSES I SIMPLY USED THE CLASS (class=service-icon) THIS WILL MAKE ANY IMAGE YOU USE
THE SAME SIZE AS THE OLD ICONS WHICH IS 70X70 PIXELS. YOU COULD MESS AROUND AND TRY OTHER CLASSES OR YOU CAN ALTER THE CSS FOR THE ICONS FROM 70X70 TO WHATEVER YOU WANT IN (styles.css) OR YOU COULD CREATE YOUR OWN CLASS.
DON'T FORGET TO REMOVE ANY FONTAWSOME ICONS FROM THE FONT ICON FIELD UNDER WHERE YOU SELECT IMAGE OTHERWISE YOU
WILL HAVE BOTH AN IMAGE AND AN ICON (see pic below)... GOOD LUCK!

Replacing icons with images in Moesia Wordpress Theme

About the Author


Rating: 5.0

Comments

Sat, 28 Nov 2015 at 5:39 PM, by Tony2Times
Excellent tutorial, very easy to understand and works perfectly. Thanks for sharing.

Add Comment

Log in or Register to leave a comment.
A User Name and Email is all that is required to post comments.