WordPress Freelancer Profile Widget Formatting
In the first part, we discussed how to find the correct freelancer.com username and api calls in detail. The article ended with a description of the first of the three settings sections in WordPress Freelancer Profile Widget. In this article, adding and removing Profile widget components is discussed. Freelancer profile widget styling with WordPress theme customization api is discussed at the end of this article.
Freelancer Profile Widget Components
There are ten components listed in the second settings section in the WordPress Freelancer Plugin admin settings page. These settings will enable you to turn on/off widget components using checkboxes. Make sure you ‘Save’ the settings after making changes.
Freelancer logo field enables you to display freelancer.com logo on top of your profile widget to denote the profile information is obtained from freelancer.com
User Photo - Freelancer profile api call response returns with two links for your freelancer.com profile photo. One is for the larger image which is displayed in your freelancer.com profile page. The other one is 100pxX100px sized one mainly used for thumbnails. In the WordPress Freelancer Profile Widget the latter one (100pxX100px) is used. You can turn on/off profile photo using this setting.
Company, city and country details are obtained from the api response too. They can be individually be turned on or off depending on your decision.
Registered date is the date you registered on freelancer.com. For old members of freelancer.com may turn on this component to highlight their freelancing experience. However it is up to you to decide on the appearance of this component.
Rating is the average rating you received for your freelancer.com projects. This is given to relative to 10. Project count is the total number of projects you completed on freelancer.com
WordPress Freelancer Widget Styles
WordPress Theme Customization API (Codex) allows you to customize themes. You can live preview the effect of the changes you made in the customizer without going live. Only after you are satisfied with the changes you made and save, it is going to be live.
WordPress Freelancer Plugin uses this powerful api to style Freelancer Widgets. Visit the theme customizer via the link in the third settings section in the first tab (Profile tab). (Theme customizer is usually located at yourdomain.tld/wp-admin/customize.php)
Before visiting the theme customizer you need at least one widget visible in the site. Freelancer Profile Widget in a home page sidebar is recommended. After setting up widgets, visit the theme customizer. Expand the section named ‘Freelancer Widget’.
You can find two color settings in the customizer. One is for changing the widget border color and the other one is for changing the widget background color. You can change the margins and padding too. You can specify different values for these fields. e.g. To have four different margin sizes use ‘1px 2px 3px 4px’ as the margin. ‘5px 0’, ‘2px’, etc.
You can change the border of the Freelancer Widgets to match the rest fo the site. Border size(width) and border radius options are available to customize via theme customizer.
You should see live changes in the theme preview panel. The reflected changes in the preview panel of the customizer will be lost unless you save them. Be sure to ‘Save & Publish’ after customization.