Xidipity Blog Brand Logo
February 10, 2022
Branding WordPress

Building and maintaining a brand is a very important investment. Branding efforts can be as simple as a clever name, an engaging logo, or as complex as developing a complete business strategy. Xidipity offers several branding options to ensure your look is everything you want it to be. 

Xidipity WordPress Post 195 Content Image 0


What is a brand? Your brand defines who you are and the association can be positive or negative. WordPress is a communication tool and a conduit for branding. Even before visitors read a single word, the title and style of your blog sends a message to those who visit. Xidipity supports four levels of branding.


  1. Title & Tagline
  2. Brand Fonts
  3. Colors & Wallpaper
  4. Logos


Title & Tagline


A configuration you should perform soon after installing your new WordPress site is to enter the site title and tagline. The site title is the name of your site. The tagline is a concise description of the purpose. Site titles should be unique. Why? There are at least three reasons.


  1. Legal – the brand may belong to someone else
  2. Technical – domains not available / display issues
  3. Logistics – brand confusion (I thought you were someone else)


I always perform a Google search to validate a suggested title. Then I do a domain search for potential registered domains.


Trouble shooting display issues is tricky. Xidipity uses the fantasy font family to display the site title. The Google font assigned to this family is ” Dosis ” and the size is “3rem/48px”. We use ” Poppins ” as the font for the tagline with character spacing set to “0.5rem/8px”.


The best way to mock up the design is to use a graphical design tool. There are many free ones available; Canva, Google Draw, and PicMonkey, to name a few. Another choice is trial and error. By that, I mean try it and see how it looks. I am using Google Draw and PicMonkey for this purpose.


For demonstration, let’s create a blog about blogging titled “The Practical Blogger”. The tagline will be “No nonsense blogging tips”.


From the dashboard admin menu ( ​ ​ ), click settings. The general settings page will load and the first input is site title, the second tagline. Enter the above data.


The following is a mockup of how that might look.


Xidipity WordPress Post 195 Content Image 1


I would say this is not the desired result. One option to is to shorten the title and tagline. Let’s see how changing the title to “Practical Blogger” and tagline to “Blogging Tips” looks.


Xidipity WordPress Post 195 Content Image 1


This is better, but why is the ruler set to 320px? The least common denominator in mobile is the iPhone 5s, and it has a display width of 320 pixels. Should we care about the iPhone 5s? That depends on your target audience, but social media experts estimate 37% of the global iPhone user base uses an iPhone 5S or older. For the sake of argument, we are going to say we care.




Styling the site title in this scenario means to select a font which has the desired look. Use the ” Config sys parms ” page template and assign a new font to the fantasy font family. It is important to note as of December 2021, the Google Library has 1,321 font families to choose from. What if your brand uses a font not available in the Google font library? You have two choices. Use a similar font or create a logo. For this discussion, I am going to use the Google font ” Dancing Script “.


Xidipity WordPress Post 195 Content Image 1


Header background / Wallpaper


Xidipity supports a header background, which can be an image or CSS. It is important to note you can use the header background with the title tagline and logo option. To implement, use the “Config sys parms” page template.


Background Image


When you use an image for the background, we center and then scale it to the available space. It is best not to use an image which includes details that are location sensitive, as the position will change among devices. Be careful the background does not take away from the focus of the site title tagline or logo.




  1. create 2560x500px png / jpeg image
  2. upload to WordPress media library
  3. copy image URL to clipboard
  4. open “Config sys parms” page template
  5. paste URL into wallpaper input
  6. save changes


Xidipity WordPress Post 195 Content Image 2


​Click image to zoom.


Solid Color


If the desire is to paint the background with a solid color, you can accomplish this with an image or CSS attribute.


Color:  ​ square



background-color: #f9b4a3;


Xidipity WordPress Post 195 Content Image 5


​Click image to zoom.




Another choice is to paint the background with a gradient. Although you can accomplish this by creating a gradient image, CSS will also work. The nice thing about this approach is there are many online sites available to assist with the effort.



background: rgb(249,180,163);
background: linear-gradient(0deg, rgba(249,180,163,1) 0%, rgba(250,249,248,1) 100%);


Xidipity WordPress Post 195 Content Image 6


​Click image to zoom.




The advanced, and most times the best, solution to branding is to create a logo. You can reference the image as a URL, or image tag. In either case, the image will suppress the display of the site title and tagline. Updating the system logo parameter by using the “Config sys parms” page template. Make the graphic image background transparent to blend with the header background.


Xidipity WordPress Post 195 Content Image 6


​Click image to zoom.


Hyper link URL


The hyper link must be a fully qualified URL. The location can be your media library or another site like a CDN. I recommend testing the URL to ensure the image will load. The image can be any dimension; but as a reference, we recommend a size that looks good on a desktop or laptop and then test it for fit on other devices. There are several sites which will display your page as it would look on a wide assortment of devices. 




Image tag


This is where it gets really exciting.


Tag Template

    src=" URL "
    alt=" Description "
    width=" pixels "
    height=" pixels "
    class=" attributes "
    style=" attributes "



A fully qualified URL. The same rules apply as the hyper link option.



Image description. Important for SEO.



Optional image width in pixels.



Optional image height in pixels.



Optional class attributes from wpX.



Optional inline style attributes.


This is my preferred method of implementing a logo as a larger image produces the best result. In this scenario, I used an image sized to 1007×205 pixels, and added the following classes to manage the size across different devices.



Add 1 rem of padding to the top and bottom



Set the width to 75% of 1007 pixels on mobile



Set the width to 35% of 1007 pixels on small tablets – regular desktops



Set the width to 60% of 1007 pixels on large screen desktops


Here is the result.


  class="pad:vrt+1 wd:75% sm)wd:50% xl)wd:60%"
  alt="Practical Blogger Site Brand Logo"


Wrap Up


Xidipity WordPress Post 195 Content Image 9


​Click image to zoom.


One item missing from this conversation is site title and tagline font color. Although configurable, you make those updates using the WordPress theme editor. The file to edit is theme-var.css beginning at line 158.



Comment / Discuss


August 9, 2022