Using an image sprite with hover
Live example https://directories.wpusersplugin.com/alpha-nav-list/.
Add social media profile links to your public user lists? Here is an add-on that works out the box or you can customise:
- option to group social media icons, or to list them separately
- uses standard wordpress contact methods functionality or customise to use your own fields
- it uses amr-user filters and hooks so you can customise the hell out of it and stay within the upgrade path of the main plugin
- lots of code comments and clearly written code that can be copied and tweaked , so minimal php,css knowledge required
- totally translatable in case you have a multi-language site
- use any user profile fields you may already have collected
- optionally add new ones simply using wordpress contact methods
- use your own themes css, or use a choice of provided images, or load your own
- image sprite example (replace with own sprites and css as desired), or get more. Perhaps a glyph version?
- jetpack social media images (must have jetpack installed)
- Both provided css options have softer focus on main icons which brighten on hover.
- work with the social profile fields individually or manipulate a social media block in the lists
- custom social profile formatting functions (using amr-users pluggable function lookup for format functions)
An html 5 version:
user list with social media links
Admin example view – individual control or a ‘block’.
List for demonstration purposes: To show both individual social media profile field control or as a ‘block’
Instructions:
- Download, unzip, Ftp to your plugin directory,Activate
- Edit some user profiles – make sure there is data in the wordpress contact methods section of the user profile. Save
- Go to amr-user settings. Run ‘Find fields’ to pickup these if not already identified
- Configure your lists, add social media fields (either as a ‘social block’ or the individual fields)
- Rebuild lists, voila
WordPress user contact methods defined in the code will show on the wordpress user profile.
Run find fields to pickup new contact methods
Either add the social block OR add individual social contact method fields to your list
Social Block added to list
Edits to the code may be desired
- Optionally edit the social profile contact methods as desired in te file amr-users-plus-social.php. It is well commented, follow the structure.
- If you already have social profiles in database, then check if the field names are different to what is defined in the code. Edit add-on plugin names (should be fairly obvious) in various sections. Look for the ‘EDIT this’ in the comments.
- Using jetpack? Change css stylesheet path (See “EDIT this” – half of one line of code
- Using jetpack and want smaller icons? Change the jetpack css file (or create copy and change path as per above
- Not using jetpack. Want a different image sprite? Replace the image, tweak css file as necessary (sizes, image name, hover attributes etc)
- a sample user_url formatting function is included. It is not necessarily recommended as is – the sample strips the protocol and the www. Some website owners want their www showing!
1 year licensed access to updates before renewal required.
Support
If you need help editing, I am available for a fee. Work out exactly what you think you’d like to have happen (in doing this you may figure it out yourself!). Then contact me. The more info you provide upfront, the quicker we can get a solution for you.
- amr-users-plus-social1.3