Websites by Silva Web Designs…

As you may already know, we are a team of developers working remotely across the world, working together to deliver projects in a timely manner without compromising quality!

We offer the following packages:-

  • Brand design
  • Responsive design
  • CMS systems
  • E-commerce
  • Email campaigns
  • SEO (Search Engine Optimisation)
  • App development
  • Hosting
  • Social Media Marketing
  • Copywriting / Content Creation

 

And much more, however, our main passion is web design!

So what do you get from a website build by Silva Web Designs?

In a nutshell, you will get a clean, responsive website that is fully optimised for SEO and speed. We can help you grow your business, whether you need assistance with Copywriting, Google Adwords, Social Media Marketing or anything else in the digital world… we have you covered!

We also provide maintenance and love to develop long-term relationships with our clients, our goal is to help you with every step of your journey to make you as successful as you can be.

Between our team, we have decades of agency experience in building websites that convert… Don’t be fooled by crazy agency prices when you can get the same (or a lot better) quality delivered for a massive deduction of the price!

Which frameworks do we use?

We love WordPress but that’s not our limit, we also work with Squarespace, Drupal, Magento, Shopify, OpenCart, PrestaShop and Larvael to name a few. Whatever the project, we can deliver.

So how do you deliver such a great service?

Taking our most recent project; BeauSocial.

The client wanted a single page web site and needed our team to create a bespoke design and bespoke WordPress theme for their new website. They needed a fairly quick turnaround, a few days… not weeks! (or months, god forbid)

And so we got cracking on this for our client immediately and delivered in just a few days 😉

That’s not to say we rushed the job, we just have the experience to deliver quality work 24/7 to keep out clients super satisfied.

95% of the time, we build bespoke websites, why? Because it gives us the ability to build a website without any restrictions, is built with SEO and speed in mind from the get-go and it’s very easy to update any content/images and everything else across the site.

So the result of BeauSocial was as follows; here is the design of the website:-

https://beausocial.com

As you can see, it’s pixel-perfect to function correctly regardless of browser size and device. Responsive websites at it’s best 😉

Okay, so what else? Well, speed is a major important factor with SEO and the results below show that we definitely adhered to our promises:-

We then continued to support our client helping with their social media accounts, Google AdWords campaigns and providing regular maintenance on their website.

Client = Estatic.

Summary

We have helped a lot of clients now achieving their digital goals at a fraction of the price that you would pay a digital agency.

Is there any benefit to using a design agency? The simple answer is no. You will get the same or better quality and a quicker turnaround in most cases and a massively discounted price that you would pay any agency… People always believe that paying more will result in better quality but that’s not the case in web design at all.

If you need a web developer for your next project, whether it’s a complete rebuild, new website, website updates, maintenance or anything else in the digital world, feel free to drop us an email and we would love to work with you; [email protected]

If you have come this far, thanks for reading… look forward to working with you in the future.

∆ The Silva Team ∆

It’s good to share

How to make Responsive Slanted Divs in CSS

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

If you need to create a slanted div for your website then you have come to the right place.

We are going to create a slanted Div using CSS only. We are going to use the clip-path property and will be skewing the whole element. Here is the code:-

HTML


<div class="slanted"><a href="https://silvawebdesigns.com">SILVA WEB DESIGNS</a></div>

CSS


.slanted {
    background-color: #3b3c43;
    height: 500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%); 
}

It really is that simple.

If you prefer to see a JSFiddle then click here.

I hope this helps.

It’s good to share

CSS – Text Rotation

If you’re trying to turn some text using rotation for elements, such as rotating text 90 degrees clockwise/counterclockwise then you’re at the right place.

So how can we achieve this? Simple! Check out the below CSS which gives you cross-browser compatibility:-


.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

Check out the following CodePen to see this in action!

It’s good to share

How to switch to a different PHP version?

So if you are wanting to upgrade the PHP version of your website, you have come to the right place.

This can usually be performed through your web hosting control panel (cPanel/Plesk), but for whatever reason, you don’t have access to this, you can actually update it via the .htaccess file.

Before proceeding, back up your .htaccess file or your entire website, just to be extra safe!

Also, if you’re doing this to permanently upgrade the PHP version of your WordPress website, find out if your web host, theme, and plugins support a higher version of PHP, such as 7+.

So the .htaccess file can be found in the root of your public domain, I’ll give you several handlers to add, but you should stick to PHP 7+ (7.3 currently recommended) because it’s faster and more secure!

So to perform the upgrade, add one of the below handlers right above the #BEGIN WordPress line in your .htaccess file:-

Change to PHP 7.3


AddHandler application/x-httpd-php73 .php

Change to PHP 7.2


AddHandler application/x-httpd-php72 .php

Change to PHP 7.1


AddHandler application/x-httpd-php71 .php

Change to PHP 7.0


AddHandler application/x-httpd-php70 .php

Change to PHP 5.6


AddHandler application/x-httpd-php56 .php

Change to PHP 5.5


AddHandler application/x-httpd-php55 .php

It’s good to share

Load More Posts Ajax Button in WordPress

In today’s post, I will show you how to create a load more button to show additional posts or custom post types using AJAX.

The benefit of this is that it will improve the page load of the page as it will only be displaying a certain amount of posts before having to load any more of the content.

So let’s get started…

So the first thing that you should have is a list of posts to display on the frontend as follows:-


    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Then you want to add the following code in your functions.php file.


wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'twentyfifteen'),
));

Right after the existing wp_localize_script. This will load WordPress own admin-ajax.php so that we can use it when we call it in our ajax call.

At the end of the functions.php file, you need to add the function that will load your posts:-


function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

The final part is the ajax itself. In functions.js or your main JavaScript/jQuery file, you need to input inside the $(document).ready(); environment the following code:-


var ppp = 3; // Post per page
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = ''&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

With the above code, you should now have a load more button at the bottom of your posts where on click it will display further posts. This can also be used with CTP (custom post types).

If you need any help with this, feel free to get in touch in the comment below. This can also be used to load automatically on scroll, again, if you need help with this, just drop me a message and I’ll be more than happy to help you!

It’s good to share

Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

Do you want to change the default behaviour of the Bootstrap 4 navbar? Well, you’re at the right place. The default menu for mobile is a hamburger menu when clicked it will slide to the menu items.

There are various ways to do this using jQuery/JavaScript but the best way, in my opinion, is just using plain old CSS.

So to do this, we can override the transition styles for the navbar-collapse as follows:-

Mobile Nav – Slide from Left


@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}

Mobile Nav – Slide from Right


@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: 0;
    }
}

I hope this quick tutorial has helped you. If you require any further assistance just leave a comment below.

It’s good to share

How to Increase the Maximum File Upload Size in WordPress

Do you have a large file that you can’t upload to WordPress due to limitations? Do you want to increase the maximum file upload size in WordPress? Some times low file upload size limit can stop you from uploading files via media uploader, or install plugins and themes. In this article, we will show you how to easily increase the maximum file upload size in WordPress to correct that issue.

How to Check Your Maximum File Upload Size Limit in WordPress?

WordPress will automatically show the maximum file upload size limit when you are uploading images or media. To check this, you can simply go to Media > Add New page and you will see the maximum file upload size limit for your WordPress site.

So how do we fix this?

Method 1

In some cases you can just add the following code in theme’s functions.php file to increase the upload size:


@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Method 2

Create or Edit an existing PHP.INI file. For this method you will need to access your WordPress site’s root folder by using FTP or File Manager app in your hosting account’s cPanel/Plesk dashboard.

In most cases, if you are on a shared host, then you will not see a php.ini file in your directory. If you do not see one, then create a file called php.ini and upload it in the root folder. In that file add the following code:-


upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

This method is reported to work for many users. Remember if 64 doesn’t work, then try 10MB (sometimes that work).

Method 3

For some, it works by updating the .htaccess file which you can find in the root directory. You can increase the maximum upload size in WordPress. Edit the .htaccess file in your WordPress site’s root folder and add the following code:-


php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Again, do note that if you are on a shared hosting package then these techniques may not work. In that case, you would have to contact your web hosting provider to increase the limit for you.

We hope this article helped you increase the maximum file upload size in WordPress.

If you need any further assistance, just drop me a message in the comments below!

It’s good to share

How to Add Additional File Types to be Uploaded in WordPress

Due to security reasons, WordPress only allows you to upload the most commonly used file types. By default, you can upload commonly used image formats, audio/video and documents using the default media uploader. But what if you wanted to upload a file type that is not allowed? In this article, we will show you how to add additional file types to be uploaded in WordPress.

If the above error looks familiar to you, then you’re at the right place.

File Types Allowed for Upload in WordPress

WordPress allows you to upload most common image files, audio/ video, PDF, Microsoft Office and OpenOffice documents. WordPress codex has a full list of allowed file types and extensions.

Adding Exceptions for Additional File Types

Security is the main reason behind the limitation on file types that users can upload. However, this does not mean that users cannot change this. Using a bit of code, you can add a new file type and extension to WordPress.

For example, add this code in your theme’s functions.php file or a site-specific plugin to allow SVG file type to be uploaded:-


function my_myme_types($mime_types){
    $mime_types['svg'] = 'image/svg+xml'; //Adding SVG extension
    return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Notice that the file extension goes as the key in $mime_types associated array and the mime type goes as its value.

In this example, SVG file extension represents files with the mime type image/svg+xml. You can find out mime types of several common file extensions on this page.

You can also add multiple file types in one code snippet, like this:-


function my_myme_types($mime_types){
    $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension
    $mime_types['psd'] = 'image/vnd.adobe.photoshop'; //Adding photoshop files
    return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Awesome, now you can upload as many different file types as you like!

One other issue you may encounter is that you get a warning saying that the file “exceeds the maximum upload size for this site” as shown below:-

To resolve this issue please see the following article; WordPress troubleshooting guide to fix it.

If you need help with anything WordPress related, just drop me an email at [email protected] or leave a comment below.

It’s good to share

Full Width Containers in Limited Width Parents

How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of it’s ‘container’.

If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the container to remain inflow.

In my opinion, the best way to get around this situation is as follows:-


.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

The idea behind this technique is that we push the container to the exact middle of the browser window with left: 50%;, then we pull it back to the left edge with negative -50vw margin.

This way you don’t need any information about the parent width at all. Do note that both this and the calc() version require the parent to be exactly centred in the browser.

So why bother with the right and margin-right? To be honest, you don’t really need it on a left-to-right site, but if there is any chance of direction: rtl; happening, you’ll need the right properties, so having both is more bulletproof.

So start getting your div’s stretched outside your containers! If this has helped you, leave a comment!

It’s good to share

WordPress Developer / Full Stack Developer / Website Designer

Do you need a front-end/full-stack developer that creates style, fast loading, responsive front-end development using validated, accessible and semantic code practices?

I am a full-time freelance developer with over 15 years of experience. I also have 6 years of digital agency experience where I have been developing high-end WordPress web sites for big clients.

My main skills are HTML5, CSS3, PHP7, JavaScript, jQuery, MySQL, Bootstrap 3/4, SEO and Speed Optimisation. With a passion for anything WordPress related, you can guarantee that I will deliver nothing but exceptional work for the clients that I work with.

Whether you need some simple amends for your website, a new fresh and modern bespoke website built for your business, then look no further. To get started, just send me an email to [email protected] and I will be able to provide you with either an hourly rate or fixed price for any job.

I’m also available on PeoplePerHour if you would prefer to contact me on the PPH platform.

I also provide the following services:-

  • Brand design
  • Responsive design
  • CMS systems
  • E-commerce
  • Email campaigns
  • SEO (Search Engine Optimisation)
  • App development
  • Hosting

 

I love working with clients on a long-term basis, I will always be your go-to person for any kind of web development work.

If you want to look at some projects that I have been involved with then check out my Portfolio.

Get in touch today for a free quote, I look forward to working with you!

It’s good to share